DEV Community: Zeppa

Nuxt.js?

Zeppa — Mon, 21 Sep 2020 19:57:41 +0000

Vue.js is a JavaScript framework for building user interfaces and single page applications. But it is missing advanced features required for complex applications. This is were Nuxt.js comes in.

What is Nuxt.js?

Nuxt is a progressive framework based on Vue.js. It is also based on Vue's libraries (vue, vue-router, and vuex) and some development tools (webpack and Babel).

Nuxt allows developers to create three types of applications:

Static Generated Pages
Single Page Applications
Server Side Rendered Applications

A static generated application is a web application that can be delivered directly to the browser. The contents of the pages are already included in the HTML file. Most believe that this only includes flat files or pages. However, it also refers to sites that utilize technologies in the browser instead of on the server to deliver dynamic content. So basically, a static generated application is any web application that the server does not alter.

The single page application (SPA) is a web application that includes content that is dynamically populated with new data from the server. The dynamic rewriting of the page is usually in response to the user's actions. Even though it may seem that it is a new page, the page never reloads nor does it go to another page. It just gives that perception.

Server side rendered applications (SSRs) is a web application that that renders fully on the server before sending it to the browser. Once the client receives the page, JavaScript takes over and allows the SPA framework to function.

What Vue problems does Nuxt address?

Due to Vue's limitations to create complex applications, Alexandre and Sebastien Chopin created Nuxt.js. (Not to be confused with Next.js, which is a React framework.) They took Vue and created a framework for it.

Some of the issues Nuxt solves are:

Ability to create universal apps
Routing configuration
Standardized folder structure
Easy compilation

Building universal applications can be difficult since it must execute both on the client and the server. Nuxt.js make it possible to share code between the client and the server with component properties like isServer and isClient. They even include a special component property no-ssr, which statically renders an application, so no server is necessary.

Building a universal application allows the server to pre-render the Vue pages on the server. This then makes the application SEO-friendly, so search engines can discover the web pages of the application by after adding SEO-related tags. Also since the server pre-renders the HTML, this makes the browser load faster, which gives the user a better experience.

Even though Vue applications are built with the assets and components directories, Nuxt sets up additional folders to be able to standardize the organization of the code. The main additional folders are the pages, layouts, and store directories.

With Nuxt, the Vue components that are placed in the pages folder have their routes automatically generated. There is no need to configure Vue Router; Nuxt takes care of it. In small projects this may not seem like a huge benefit, but it is with larger applications.

Nuxt.js comes prepackaged with Webpack and Babel. It sets up the the build process of the application. The JavaScript compilation will then work on all browsers.

Create a Nuxt App

The app is easily created with npx. It is included in npm since version 5.2.0. It facilitates the usage of other locally installed tools without having to use npm directly. It is ideal to run code generators like Nuxt's scaffolding tool create-nuxt-app.

$ npx create-nuxt-app hello-nuxt-app

The tool gives the developer several options that help configuring the application.

Conclusion . . .

With all the added features, Nuxt makes the development of Vue.js applications easier. It also provides the flexibility to develop the application like the developer wants. To get started, it is as easy as typing npx create-nuxt-app.

JavaScript vs Java

Zeppa — Thu, 17 Sep 2020 15:00:07 +0000

Since "JavaScript" includes the word "Java", it is a common misconception that JavaScript is based on Java. This has confused many since JavaScript came into existence, and it continues to confuse people after 25 years. Some believe that since Java was the popular programming language when JavaScript was created, Netscape was trying to leverage that popularity by including Java in their creation's name as a clever marketing scheme.

What is JavaScript?

JavaScript is a scripting language that was born as a result of Netscape's desire to load dynamic web pages in their Navigator browser. Their first attempt was to incorporate Java for which Brendan Eich was initially hired. However, Netscape decided that it would be best to create a new language similar to Java. The new language was called LiveScript, but the name was changes to JavaScript three months later.

What is Java?

Java is a class-based, object-oriented programming language whose intention is to allow developers to "write once, run anywhere" (WORA). Once compiled, it can run on all platforms that support Java without the need for recompilation with the use of the Java Virtual Machine (JVM). Java was created by a group of Sun Microsystem engineers called the "Green Team". Unlike the ten days it took to develop JavaScript, Java took almost four years. It was initially called Oak, and then it was known as Green. Finally, it was renamed Java after the Indonesian coffee. Java is currently owned by Oracle.

What are the similarities?

Both languages have a syntax similar to C. Since Netscape's projected initially started with Java, JavaScript uses similar naming conventions used by Java. Java wanted to keep the leraning curve low for programmers that were accustomes to C and C++.

Both languages can be used front-end development. JavaScript can be embedded directly into HTML, and it can be implemented as a framework or library. Java can run in the browser as a Java applet, and it too uses libraries.

Both languages can be used on the server. JavaScript was bale to run on the server with the introduction of Node.js. Java has been running on servers for longer with technologies like Apache and WebSphere.

Both are influenced by the programming community. They both have a large programming community following. Java's standard is controlled through the Java Community Process (JCP). Anyone can become a JCP member by simply filling out a form at their website.

Both have libraries and frameworks.

What are the differences?

JavaScript is an interpreted programming language while Java is a compiled programming language. JavaScript is interpreted directly by a browser, and Java runs on a virtual machine.

JavaScript uses dynamic typing; the data type is then determined at runtime. Java uses static type checking, so the programmer must specify the data type of all created variables. Dynamic typing has the advantage that the programmer is free to assign any data type to variables. Static typing has the advantage that type errors are caught early in development.

JavaScript is a single-threaded. To handle concurrency, a system queue called the event loop was introduced. Java is multi-threaded, so it can perform tasks in parallel. Both work fine in most cases; however, Java is generally faster.

Applications of JavaScript

JavaScript should be considered for:

Dynamic single page applications (SPA)
Client technology
Server technology
Mobile app

Applications of Java

Java should be considered for:

Android apps
Enterprise software
Scientific computing
Big data analytics
Hardware programming
Server-side technologies

Hello World!

Hello World in JavaScript:

console.log("Hello, World!");

Hello World in Java:

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

. . . Which one is better?

Neither programming language is better than the other. Each one is useful, and each has strengths over the other. They are both used by programmers for a variety of tasks.

JavaScript vs TypeScript

Zeppa — Mon, 07 Sep 2020 13:53:30 +0000

Both JavaScript and TypeScript are used to create interactive web applications. They are both widely known languages. But before mentioning their differences, let's first introduce each.

What is JavaScript?

JavaScript is an open-source, scripting language. It was developed at Netscape in 1995. The developer Brendan Eich wrote the prototype in 10 days. It was initially called LiveScript. It was then renamed to reflect Netscape's support of Java within its browser. A year later, Netscape submitted JavaScript to the European Computer Manufacturers Association (ECMA).

Originally, it was meant to be a client-side language. But is was soon discovered that it was suited to be a server-side language as well. Along with HTML and CSS, it is the one of the core technologies of the internet. It's continued acceptance is made evident with the fact that after almost 25 years, it still continues to have an open standard. The current version of JavaScript, ECMAScript, was release in 2020. It also has a huge development-community following.

const message = 'Hello World!";
console.log(message);

What is TypeScript?

TypeScript is an object-oriented, programming language. It was developed by Microsoft in 2012. It was designed for development of large web applications.

TypeScript is more of a super set of JavaScript. Since TypeScript compiles into JavaScript, all JavaScript code is valid in TypeScript. But TypeScript has additional features. It is a strong typed programming language. TypeScript is considered to simplify code, making it easier to read and debug. It is also easy to learn and implement for JavaScript programmers.

Like JavaScript, TypeScript has also been used to develop both client-side and server-side code. It is also open source.

const message:string = 'Hello World!";
console.log(message);

Advantages of JavaScript over TypeScript

JavaScript has a vast number of frameworks and libraries that TypeScript does not have.
JavaScript is best for smaller projects.
JavaScript is an interpreted language, so it does not take time to compile like TypeScript.
JavaScript does support abstract classes
JavaScript has a large programming community.

Advantages of TypeScript over JavaScript

TypeScript offers static typing.
TypeScript highlights compilation errors while it is being developed.
TypeScript was developed for large projects.
TypeScript supports object-oriented classes and modules.

Conclusion

Although JavaScript is more widely used than TypeScript, TypeScript has been gaining in popularity. Since TypeScript depends on JavaScript, it can never replace JavaScript. TypeScript can, however, influence how developers write web applications. If a developer is working on a small coding project, JavaScript is ideal. However, if it is a large scale project, then TypeScript will be preferred.

A Brief Intro to Vue . . .

Zeppa — Mon, 31 Aug 2020 13:47:24 +0000

What is Vue?

Vue.js is a lightweight, front-end framework for building user interfaces and single-page applications. It is an open-source JavaScript framework that is commonly referred to as Vue.

Why was Vue created?

Vue was created by Evan You. He wanted to create a framework with the features he best liked about Angular but lightweight. Vue was then released in 2014.

Since Vue's release, it's popularity has grown. At the most basic level, it focuses on declarative rendering and component composition.

Vue rendering

Vue uses an HTML-based syntax that allows binding the DOM with Vue's instance data. Vue recommends using templates; however, to take advantage of JavaScript, a render function may be needed.

Hello World!

To illustrate how simple Vue is, let's create a Hello World! app.

First, install Vue by typing the following command in the terminal:

$ npm install vue

Then, create an html file and type the following:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello world!'
      }
    })
  </script>
</body>
</html>

Notice that within the <script> tag, a new instance of Vue is created with the words new Vue. This new instance has an element id and data associated with it.

The el: #app declaration tells Vue to render the app inside the DOM element with the id of app. In the code above, this corresponds to the <div> tag.

The data object holds the data for the app. In the code above, note that message is being referenced inside the <div> tags as {{ message }}. If the value of message changes, Vue will update the page. This is known as declarative rendering.

Vue components

Vue components extend basic HTML elements to encapsulate reusable code. A component is essentially a Vue instance with predefined options. They can have their own state, markup, and style.

To incorporate a render function in the Hello World example, remove the script from the html file and the {{ message }}.

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

In a JavaScript file, type the following:

new Vue({
  el: '#app',
  render(createElement) {
    return createElement('h1', 'Hello World!');
  }
});

The code included in the JavaScript file above is a Vue component. But there are other ways to create Vue components.

The next is created using the keyword component as shown below:

Vue.component('component-name', {
  /* Add component options here */
});

To implement named components include <div> tags encapsulating the component calls:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id = "component_hello1">
    <hellocomponent></hellocomponent>
  </div>
  <div id = "component_hello2">
    <hellocomponent></hellocomponent>
  </div>
</body>
</html>

The JavaScript file should contain similar code to the following:

Vue.component('hellocomponent',{
   template : '<div><h1>Hello World!</h1></div>'
});

Using new Vue or Vue.component is the standard way of implementing Vue components when the application is not a single page application. In single page application, it is more common to use Single File Components.

Conclusion

Vue is very easy to learn compared to other frameworks. It is also very flexible. Giving the rise in popularity, it is worth taking time to learn Vue. Vue may surpass React and Angular in the near future.

React Hooks???

Zeppa — Mon, 24 Aug 2020 13:48:02 +0000

React Hooks were introduced with React version 16.8. Hooks were the solution to React's shortcomings.

Hooks allows the use of React's features without having to define classes, making it easier to learn. In React, there was much confusion in the use of this, since it differs from how it is used in most other programming languages. Not to mention, the need to bind event handlers.

Hooks also allows the reuse of stateful logic without having to restructure the component. Even though sharing code is possible using props or higher-order components in React, their implementation resulted in multiple levels of abstraction, making the code harder to follow. This is known as "wrapper hell".

Hooks also permits the splitting of one component into smaller functions. In React, complex components were split based on lifecycle methods. These methods most often resulted in a hodgepodge of stateful logic and side effects, making it easy to instigate bugs and inconsistencies.

Since Hooks is not replacing React, they can co-exist in the code. So, there is no need to rewrite any existing code.

There is a limitation to Hooks, only call Hooks from React function components or from custom Hooks. This is necessary to ensure that all stateful logic is visible from its source code.

There are many hooks, but the three basic hooks are useState, useEffect, and useContext.

useState

In React, function components were known as "stateless components". A React state is now possible with Hooks. Making the "stateless components" into "function components".

The useState is a Hook that can be broken down into: the current state value and a function that updates the state value. It is similar to React's this.setState. The only argument needed is the initial state, which does not have to be an object unlike this.state.

import React, { useState } from 'react';

function Example() {
  const [flag, setFlag] = useState(false);

  .
  .
  .
}

useEffect

The useEffect is a Hook that adds the ability to perform side effects from a function component. It is similar to React's componentDidMount, componentDidUpdate, and componentWillMount all rolled up into one.

One of the most common uses of useEffect is to fetch data.

import React, { useState, useEffect } from 'react';

function HooksExample() {
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if (flag) {
      .
      .
      .
    } else {
      .
      .
      .
    }
  });

  render() {
    return (
      <div>
        <button
          onClick={() => setFlag(!flag)}
        >
          Click me!
        </button>
      </div>
    )
  }
}

useContext

In React, context makes it possible to pass props down from a parent component to a child component. To make context available to functional components, the useContext Hook must be used. The current context value is determined by the value prop. When the prop is updated in the provider, the Hook will trigger a rerender with the latest value.

Create the context by using createContext.

const FlagContext = React.createContext();

The child component using the context will be wrapped with the context provider.

const App = () => {

  render() {
    return (
      <div>
        <FlagContext.Provider
          value={{flag}}
        >
          <Flag />
        </FlagContext.Provider>
      </div>
    )
  }
}

The child component that will use the passed in context from a parent component.

const Flag = () => {
  const { flag } = useContext(FlagContext);

  render() {
    return (
      <div>
        .
        .
        .
        <span className="flag">{flag}</span>
        .
        .
        .
      </div>
    )
  }
}

In Conclusion . . .

Hooks takes advantage of the cleanliness and simplicity of a component, its state, and its lifecycle methods. But it is done in regular JavaScript functions, resulting in shortened code and making it more readable. If that were not enough, Hooks makes it possible to create custom Hooks.

A Simple Intro to SQL

Zeppa — Mon, 27 Jul 2020 13:13:57 +0000

What is a Database?

A database is a collection of information. It helps organize and keep information easily accessible.

What is a Database Management System?

It is common for people to use the term 'database' to refer to a database management system (DBMS). However, The DBMS is actually a software package that is responsible for defining, manipulating, and managing information in a database.

What is SQL?

SQL is the acronym for Structure Query Language. It is a language used to manage data. It supports relational databases. These type of database models consists of tables with columns and rows. The data can then be modified using the INSERT, SELECT, UPDATE, and DELETE commands.

What is MySQL?

MySQL is a relational database management system (RDBMS). A relational database structure allows the identification and access of data in relation to another in the database. More specifically, these relationships are logical connections between different tables.

MySQL is used by many popular websites, such as Facebook, Twitter, and YouTube.

INSERT

The INSERT statement is used to insert new records in the database. If adding values for all columns of the table, make sure the order of the values are in the same order as the column in the table.

INSERT INTO table_name
VALUES (column1_value, column2_value, . . . );

However, the statement can also specify the column nales and the values to be inserted.

INSERT INTO table_name (column1, column2, . . . )
VALUES (column1_value, column2_value, . . . );

SELECT

The SELECT statement is used to select records from a database. The data retrieved is stored in a table. One simple statement selects all columns from the table.

SELECT * FROM table_name;

The columns can also be specified to retrieve only the data needed.

SELECT column1, column2, . . .
FROM table_name;

The JOIN clause is used to combine tables, based on their relationship. There are four different kinds of JOINs: JOIN, LEFT JOIN, RIGHT JOIN, and FULL JOIN. While JOIN is an INNER JOIN, the other three are OUTER JOINs.

Use an INNER JOIN when only the matching values of two or more tables are desired.

SELECT A.column1, A.column2, B.column3, B.column4 . . .
FROM tableA A
INNER JOIN tableB B
ON A.column = B.column;

Use a LEFT JOIN when records from the left table are desired. The left table is the one specified in the FROM clause. If there is no match in the right table, the result will be NULL.

SELECT A.column1, A.column2, B.column3, B.column4 . . .
FROM tableA A
LEFT JOIN tableB B
ON A.column = B.column;

Alternatively, use a RIGHT JOIN when records from the right table are desired. The right table is the one specified in the JOIN clause. If there is no match in the left table, the result will be NULL.

SELECT A.column1, A.column2, B.column3, B.column4 . . .
FROM tableA A
RIGHT JOIN tableB B
ON A.column = B.column;

The FULL JOIN is used to return all records when there is a matching record in either table.

SELECT A.column1, A.column2, B.column3, B.column4 . . .
FROM tableA A
FULL JOIN tableB B
ON A.column = B.column;

Since the resulting data of a SELECT statement can potentially return large data, the WHERE clause is used to specify a condition.

UPDATE

The UPDATE statement modifies the existing data in a table. Since the UPDATE statement can modify all records in a database, it is necessary to include a WHERE clause, which specifies the records to be updated.

UPDATE table_name
SET column1 = value1, column2 = value2, . . .
WHERE condition;

DELETE

The DELETE statement is used to delete existing data in a table. Like the UPDATE statement, a WHERE clause identifies the records to be deleted. If all the WHERE clause is omitted, all records of the database will be deleted.

DELETE FROM table_name
WHERE condition;

CONCLUSION

The INSERT, SELECT, UPDATE, and DELETE are the CRUD (Create, Read, Update, Delete) SQL equivalents.

Promises, Promises . . .

Zeppa — Mon, 20 Jul 2020 13:03:59 +0000

What is a Promise?

In JavaScript, a Promise represents an object whose result is initially unknown. It is used to more efficiently synchronize program execution. Once execution is complete, the value of the object is updated.

Many JavaScript libraries are based on the implementation of Promises, such as jQuery's Deferred Object and NodeJS's node-promise.

Why is a Promise Special?

JavaScript is single-threaded programming language, meaning that only one command is executed at a time. To solve this limitation, JavaScript introduced Promises in its ES6 release. It provides a way to run code asynchronously.

Prior to promises, only callbacks were used to write asynchronous code. So, what is a callback? A callback is a function that is passed into another function as an argument. The callback function is then invoked inside the containing function to complete some action. As the level of code complexity rises, so does the amount of nested or cascading callbacks to create asynchronous code. To the point, that it has become known as "Callback Hell".

The Promise Constructor

Promises expect a value eventually. As a result, promises have their own constructor. It takes in a function which is known as an executor. When a new promise is created, the function or executor runs automatically.

The following is a simple promise constructor:

let promise = new Promise(function(resolve, reject) {
  // Code that will produce a result
});

The parameters of the executor function are resolve and reject; both represent callbacks provided by JavaScript. The appropriate callback will then be execute when a result is obtained.

let promise = new Promise(function(resolve, reject) {
  if (error) {
    reject();
  }
  resolve();
});

The promise object returned by the constructor has two properties: state and result. Both change during the function's execution. State is initially pending, and then updates to fulfilled or rejected depending on whether resolve or reject is called, respectively. Result is initially undefined. If the operation has successfully completed, resolve will be called with a resulting value. Otherwise, an error occurred, so reject will be called with an error.

Here comes `.then`, `.catch`, and `.finally`

Since the properties of promises cannot be accessed directly, .then, .catch, and .finally help control how and where the code is handled.

The .then method takes in two arguments, which are both functions. The first function runs when the promise is resolved and receives a result; the second function runs when the promise is rejected and receives an error. However, it is not necessary to include both functions. If an error is not of importance, only provide the first or result function. If the error is of more interest, provide null as the first argument and provide the error-handling function as the second argument.

promise.then(
  result => {
    // Code that will run if fulfilled
  }, 
  error => {
    // Code that will run if rejected
  }
)

Instead of providing null as the first argument along with the error-handling function in a .then method, .catch can also be used.

The following illustrates the difference of using .then and .catch to only handle error:

promise.then(null, error => {
    // Code that will run if rejected
  }
) 

promise.catch(function () {
  // Will execute the promise's reject code
});

There are also situations where the same function would be run whether it was resolved or rejected. Instead of providing the same function for both the resolve and reject of a .then method, a .finally method can be used. The .finally method will always run no matter what as long as the promise has been settled.

promise.then(
  result => {
    // Same code as error function
  }, 
  error => {
    // Same code as result function
  }
) 

promise.finally(() => {
  // Code that will run if fulfilled or rejected
});

While a promise is pending, the .then, .catch, and .finally methods wait for its completion. Once its settled, they execute immediately.

Promise Chaining

Chaining results in running code in serial, just like synchronous code. It is similar to when built-in methods are chained together, or when chaining together higher-order functions.

promise
  .then(resolveFunction)
  .catch(errorFunction)
  .finally(noMatterWhatFunction);

Since .then always returns a new promise, it is possible to chain several together in order to provide the control necessary over the codes execution. This helps mimic normal synchronous code.

promise
  .then(resolveFunction1)
  .then(resolveFunction2)
  .then(resolveFunction3)
  .catch(errorFunction)
  .finally(noMatterWhatFunction);

Conclusion

Asynchronous code allows execution of other code while it waits for the unknown. Even though both callbacks and promises provide a way to run code asynchronously, promises result in cleaner code, which is easier to debug. Promises help save a place for the unknown, and they are always waiting for the resulting value no matter where it occurs in the code.

A ReactJS Introduction

Zeppa — Mon, 13 Jul 2020 10:18:55 +0000

ReactJS is a JavaScript library used in front-end web development. Since a JavaScript library is a collection of common tasks, ReactJS helps developers build user interfaces quickly without having to 'reinvent the wheel.'

ReactDOM

Previously, ReactDOM was a part of the ReactJS library. It is a library that provides DOM-specific methods, while ReactJS is only responsible for rendering data to the DOM.

ReactDOM helps declare the top-level of the application by using the ReactDOM.render method. It is a reference to the root component instance, and it helps control its contents.

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Components

ReactJS allows the composition of complex user interfaces to be rendered by small pieces of code called components. A component contains both the HTML template and the code that controls it.

The main component is detailed in a class declaration. ReactJS uses an ES6 class instantiation, which contains a constuctor and a render method.

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <p>Hello World!</p>;
  }
}

Simple Components

ReactJS also consists of simple components. These components do not use the class keyword. Instead, simple components can be created using ES6 arrow functions.

const List = () => {
  <div className="list">
    <list.map((listItem, i) => (
      <ListItem />
    )
  </div>
}

Props

When referencing a ReactJS component, developers can define what properties should be used. Props are the arguments that can be passed to a component. They are similar to Javascript's native object type with key/value pairs.

To the previous list example, the prop of listItems is now being passed to the List component.

const List = ({listItems}) => {
  <div className="list">
    <list.map((listItem, i) => (
      <ListItem />
    )
  </div>
}

const ListItem = ({item}) => {
  <div className="listItem">
    {item.text}
  </div>
}

The propTypes declaration informs developers what the component expects as an argument.

List.propTypes = {
  listItems: PropTypes.array.isRequired;
}

ListItem.propTypes = {
  item: PropTypes.object.isRequired;
}

States

In ReactJS, data can only go from a parent component to a child component. If a parent component needs data from a child component, states can be used. An initial state is declared when setting up a component's constructor.

A state can be passed to a child component as a prop.

States are also used to determine when things should be updated.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {key: value}
  }

  render() {
    return <p>Hello World!</p>;
  }
}

JSX

Historically, HTML and JavaScript were in separate files. However, since components contain both HTML and JavaScript code, it has the .jsx file extention.

JSX stands for JavaScript and XML. JSX are preprocessed by compilers like Babel, that transform HTML tags into JavaScript code.

Higher-Order Components

Up until now, only behavior-based components have been mentioned.
However, there is another way to to build components. Higher-order components are logic-based components.

Higher-order components are common in other React libraries.

Higher-order components are pure functions. The functions are known as "HoC". The basic structure of a higher-order component is a function that takes a component as a parameter and returns a new component.

const HigherOrderComponent = higherOrderComponent(OtherComponent);

Conclusion

Even though ReactJS can seem a bit overwhelming at first, it is currently one of the most popular libraries. Once the patterns are learned, it is easy to use, and the components are reusable. Not to mention that JSX makes it much simpler and cleaner. This makes it fast when displaying a large number of components.

JavaScript's ES6 Pseudoclassical Instantiation

Zeppa — Mon, 06 Jul 2020 13:54:14 +0000

The latest of the JavaScript instantiation patterns is ES6 Pseudoclassical. This instantiation pattern allows the creation of objects with the use of classes, similar to other programming languages.

Even though the ES6 Pseudoclassical class seems to be what others consider to be a "real" or "traditional" class, it continues to be prototypal. One of the outcomes is that it makes JavaScript more inviting to those programmers that are not familiar with prototypical inheritance.

For whatever the reason or intention may have been, one thing is for sure . . . it makes implementing object classes much easier. In order to make this possible, new keywords were introduced like the class keyword.

The following is an empty class:

class Person {

}

Constructor

The class allows the creation of the object by defining a constructor. The constructor is contained within the class declaration. It is very similar to the creation of an object with object literals. However, instead of separating the key/value pairs with a comma, the constructor uses semicolons. The constructor keyword helps facilitate its implementation.

constructor (first, last, dob) {
  this.firstName = name;
  this.lastName = last;
  this.birthDate = new Date(dob);
}

Methods

The class still allows for the creation of methods that the object class will be able to use. Even though the keyword prototype does not prefix the method name, the class method is defining a prototype method.

calculateAge = function() {
  return this.birthDate.getFullYear() - newDate().getFullYear();
}

Static Methods

Static methods are created with the keyword static. To use static methods, no instantiation of an object is required. The methods are accessed directly. It is similar to when Array.isArray is invoked. Array is not an instantiated object; it is an object type. Think of static methods as utility functions since they cannot be called by a class instantiation.

In static methods, the keyword this references to the class. This makes it possible for one static method to call another static method from the same class.

The concept of static methods may also have been introduced for those programmers that are used to them from other programming languages.

static greeting(person) = function() {
  return 'Hello ' + person.name + '!';
}

The resulting class, then looks like this:

class Person {

  constructor (first, last, dob) {
    this.firstName = name;
    this.lastName = last;
    this.birthDate = new Date(dob);
  }

  calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  }

  static greet(person) = function() {
    return 'Hello ' + person.firstName + '!';
  }

}

Subclasses

Subclasses are created with the keyword extends. The format is similar to that of defining a class with the exception of the subclass name being followed by extends and the name of the parent or super class. In order to reference the parent class, JavaScript has also provided the super keyword.

The static methods from a parent class are also available to the subclass.

class Student extends Person {

  constructor (first, last, dob) {
    super(first, last, dob);
    classes = [];
  }

  addClass = function(class) {
    this.classes.push(class);
  }

}

Instantiation

In order to create an object from the class, the class constructor will be called with the new keyword.

let peep = new Person('John', 'Do', '12/31/1999');

let student = new Student('Jane', 'Do', '01/01/2005');

// Call static method
Person.greet(peep);  // 'Hello John!'

In the example, above there is also an example of calling a static method. The call is prefixed by the class itself and not the class instantiation. Calling peep.greet() or peep.greet(peep) is not possible. The correct invocation would be Person.greet(peep).

Conclusion

Even though the prior JavaScript instantiation patterns, provide much of the functionality of ES6 Pseudoclassical. The small differences and/or improvements in ES6 make it easier to learn JavaScript for all JavaScript newbies not just beginner programmers.

JavaScript Instantiation Patterns

Zeppa — Mon, 29 Jun 2020 13:36:30 +0000

Instantiation patterns in JavaScript provide a way to create instances of objects. These objects are further defined by their properties and methods.

So what is the difference between modeling an "object" with an instantiation pattern and JavaScript's native Object data type? The Object data type provides a very simple way to create an object. However, it is best for a single instance of an object. If multiple instances of the object were created with the built-in Object, there would be multiple copies of the same code for each instance. That is were instantiation patterns are more efficient: they provide reusable code for the object's implementation.

The four major instantiation patterns are:

Functional
Functional Shared
Prototypal
Pseudoclassical

Functional

The Functional pattern creates an object using JavaScript's Object data type, but the Object is encapsulated in a function.

First, the function is created. Inside the function, a variable is declared and assigned an empty object literal. Then, the object properties and methods are added to the function. The variable is returned just before the end of the function.

The person object below is implemented using Functional:

const Person = function(first, last, dob) {
  const person = {};

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  person.calculateAge = function () {
    return person.birthDate.getFullYear() - newDate().getFullYear();
  };

  return person;
};

let peep = Person('John', 'Do', '12/31/1999');

Functional Shared

The Functional Shared instantiation is similar to the Functional pattern, except the Functional Shared includes shareable properties and methods.

Just like the Functional instantiation, it starts with an function containing an empty object and it's properties. The methods are defined outside of the function in an object. The extend keyword is used to declare that the methods belong to the object. The extend statement is placed inside of the function before returning the object.

The person object below is implemented using Functional Shared:

const Person = function(first, last, dob) {
  const person = {};

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  extend(person, personMethods);

  return person;
};

const personMethods = {
  calculateAge:  function () {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  };
};

let peep = Person('John', 'Do', '12/31/1999');

Prototypal

The Prototypal pattern is similar to the implementation of JavaScript native data types, since they inherit properties and methods. This is known as prototypical inheritance.

Unlike Functional and Functional Shared, the Prototypal pattern does not use the empty object literal inside of the function declaration. Instead, it uses the Object.create method to create the object and to relate it to the methods declared outside of the function's scope. The Prototypal instantiation declares the methods in another object similar to Functional Shared.

The person object below is implemented using Prototypal:

const Person = function(first, last, dob) {
  const person = Object.create(person.Prototype);

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  return person;
};

Person.prototype.calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  };
};

let peep = Person('John', 'Do', '12/31/1999');

Pseudoclassical

The Pseudoclassical pattern is similar to the implementation of objects in an object-oriented language. This is accomplished with the introduction of the new keyword. A function called with the new keyword is called a constructor function.

Like Prototypal, Pseudoclassical uses the prototype chain. Instead of using the Object.create(), Pseudoclassical instantiation uses the this keyword to refer to the object, so all properties are prefixed with the word this followed by a period. Each object method has it's own function declaration. The object's method is prefixed with the object name followed by a period the word prototype and another period.

The person object below is implemented using Pseudoclassical:

const Person = function(first, last, dob) {
  this.firstName = name;
  this.lastName = last;
  this.birthDate = new Date(dob);
}

Person.prototype.calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
}

let peep = new Person('John', 'Do', '12/31/1999');

The basic structure of each pattern has been presented using the same person object. The similarities between each instantiation are not coincidental. They try to solve a problem or short-coming of the prior. As a result, each pattern has it's pros and cons, but that is a topic for another time.

DEV Community: Zeppa

Nuxt.js?

What is Nuxt.js?

Create a Nuxt App

Conclusion . . .

JavaScript vs Java

What is JavaScript?

What is Java?

What are the similarities?

What are the differences?

Applications of JavaScript

Applications of Java

Hello World!

. . . Which one is better?

JavaScript vs TypeScript

What is JavaScript?

What is TypeScript?

Advantages of JavaScript over TypeScript

Advantages of TypeScript over JavaScript

Conclusion

A Brief Intro to Vue . . .

What is Vue?

Why was Vue created?

Vue rendering

Hello World!

Vue components

Conclusion

React Hooks???

useState

useEffect

useContext

In Conclusion . . .

A Simple Intro to SQL

What is a Database?

What is a Database Management System?

What is SQL?

What is MySQL?

INSERT

SELECT

UPDATE

DELETE

CONCLUSION

Promises, Promises . . .

What is a Promise?

Why is a Promise Special?

The Promise Constructor

Here comes .then, .catch, and .finally

Promise Chaining

Conclusion

A ReactJS Introduction

ReactDOM

Components

Simple Components

Props

States

JSX

Higher-Order Components

Conclusion

JavaScript's ES6 Pseudoclassical Instantiation

Constructor

Methods

Static Methods

Subclasses

Instantiation

Conclusion

JavaScript Instantiation Patterns

Functional

Functional Shared

Prototypal

Pseudoclassical

Here comes `.then`, `.catch`, and `.finally`