Which JavaScript is It?

A recent survey indicated that Node.js is downloaded more often than Angular.js, and Angular is downloaded more often than React.js. Knowing a little about each one increases understanding of the worldwide JavaScript ecosystem.

JavaScript

JavaScript is a programming, or scripting, language that focuses on formatting interactive client-side Web pages. It is mostly abbreviated as JS. This high-level programming language uses the concept of Object-oriented-programming (OOP), but it is based on prototype inheritance.

Node.js

Node.js is not a programming language. Node.js is a cross-platform, open-source JavaScript environment that asynchronously runs JavaScript on the server-side. This fast, lightweight runtime allows JavaScript code to run outside the browser. It can generate dynamic page content and collect form data, in addition to manipulating server files. It can also add, delete, and modify database data. The Node.js package ecosystem is the largest set of open source libraries in the world.

Libraries contain modules, which are blocks of code that are related by their functionality. They communicate with applications in the same manner as any other object-oriented code. Applications can be a single file or a collection of files and folders. Node.js includes three types of modules:  core, local, and third-party.

• Core Modules
  Core modules include the minimum functionalities into your app. Node.js core or NPM modules are imported by the require() function. For example, the following code allows your program to use the http server.
  
  var http = require('http');
  
  
• Local Modules
  Local modules are created locally in your Node.js application. They organize the functionalities of your application into separate files and folders.
  
  
• Third Party Modules
  These modules are packaged and distributed via the Node Package Manager (NPM), for the Node.js community. Modules can be installed in the project folder or globally. Some of the popular third-party modules are mongoose, express, angular, and react.

Angular.js

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. Angular has no keywords of its own, because it is entirely based on HTML and JavaScript. Instead, it has directives that extend HTML by binding to data with expressions that are enclosed in double curly brackets. Angular supports separation of concerns by using the Model-View-Controller (MVC) design pattern.

• Model
  The model is wherever your data is stored, in general. The Angular model is not the data, but the object tree that is built from that data.
• View
  The view is the HTML template for every component. It is the outcome of the component, not a “thing” with which the component interacts.
• Controller
  The controller is the component that contains the logic for each part of the app.
  

In other words, the controller operates on the model to create and/or display the view, although Angular only has the controller and the model.

For example, the body of the following HTML page is an Angular application. It uses a model, but is not complex enough to require a controller.

React.js

React is a frontend framework that creates and manipulates a virtual DOM in memory, previous to making the changes in the browser DOM. The two primary pieces that are imported to use it are the following.

• React -  the JavaScript library that is used to define and create the elements in a React application.
• ReactDOM - the JavaScript library that allows React to interact with the DOM.
  
  

React code can be initially authored directly in HTML, but a React environment must be created for production environments. This environment is primarily npm and Node.js, and the command line will generate an empty application in the specified directory. When you use the command npm start, an example React app will display in the browser. Then, you can modify files in the app directory to build the Web page.

React.js uses components, functions, and hooks.

• Components
  Components are independent, reusable bits of code that are used like JavaScript functions.
  
  
• Functions
  Functions are written and behave like normal JavaScript functions. Their value is returned by name for use in the DOM.
  
  
• Hooks
  Hooks allow function components to access state and other React features. Although Hooks are intended to replace class components, there are no plans to remove classes and class components from React.
  
  

The following is sample code that uses the ReactDOM component to display information that is generated in a function in a React app.

Summary

A familiarity with JavaScript makes it easy to learn the other environments and frameworks. Object-oriented development techniques help Web developers learn and use Node.js. A little more study will allow you to master Angular.js. React has a different  orientation because of its reliance on the Document Object Model, but it still allows you to make robust Web sites. In a short time, you will be able to author JavaScript functions in any of these frameworks, and use the Angular directives as if they were JavaScript functions from any library.

References

JavaScript Comparison File Size: 2015 kb File Type: ppsx Download File

Some presentations include images that were included with purchased software.