Intro to modern JavaScript frameworks

What is a JavaScript framework?

Five most popular JavaScript frameworks and libraries being used today

React

1. Declarative programming paradigm: In React, declarative programming allows a developer to control the flow and state of a component by telling it what it should look like, rather than how it should do it.

if( user.likes() ) {
   if( hasBlue() ) {
       removeBlue();
       addGrey();
   } else {
       removeGrey();
       addBlue();
   }
}

if( this.state.liked ) {
   return <blueLike />;
} else {
   return <greyLike />;
}

1. Component-based architecture: In a component-based architecture pattern, the user interface is composed of smaller individual pieces or components that function independently.
2. React native as a custom renderer: When developing with React, users can develop a version of the app that supports one platform. Developers can then use custom renderers to add support for other platforms with little effort. One of these renderers is React Native, which is used on iOS and Android platforms.
3. A virtual DOM: React makes use of a virtual DOM that is updated whenever an application's UI is modified. When changes are made, a delta (difference) record is generated, where only the parts that have changed are re-rendered. As a result, UI updates with React are faster and more efficient than using traditional methods of updating the full DOM structure.
4. JSX Syntax: React also uses JSX syntax, an extension of JavaScript that allows developers to directly use HTML within JavaScript code.

Node.js

1. Open source: Node.js is maintained by the open source community. The Node.js community has developed and maintained a large number of packages, which are made available and hosted on the npm registry.
2. Single-threaded architecture: Node.js, like JavaScript, is single-threaded with code running on the main thread in tandem with an event loop and callback queue that respond to events that arise during execution.
3. Performant: Node.js runs on a single-thread event loop, and this may sound less performant than a multithreaded solution such as Java. The beauty of the event loop is not of running everything in a single thread, but that it’s available to put aside long time-consuming I/O operations to unblock the execution of other instructions.
4. Highly scalable: If you make use of the cluster Node.js module, you can distribute incoming connections using a round-robin strategy, making your app highly scalable.
5. Compatible with the Fauna Node.js driver: Fauna offers a JavaScript driver that is compatible with Node.js. The driver allows you to configure connections to your databases and execute queries.

> npm install --save faunadb

Angular

1. Easy development of progressive web apps: A progressive web application takes advantage of the latest technologies to combine the best of web and mobile apps. With progressive web applications, there is no need to download and install anything.
2. Code generation: Angular has a code generation service that generates Angular components based on user-provided metadata.
3. Code splitting: Angular uses code splitting to modularize a large monolith application into smaller bundles. Using optimizations such as lazy loading, these smaller bundles can be loaded or rendered on demand whenever they’re required.
4. Templates: Angular uses templates similar to HTML templates for rendering views. These templates, however, offer more functionality, such as data binding.
5. IDEs: With angular, modern IDEs offer features such as smart code completion when developing applications.
6. End-to-end testing: Angular applications can be end-to-end tested to emulate real world usage using testing frameworks such as Cypress.

Vue.js

1. Ease of use: Vue.js uses standard JavaScript which is easier to use as compared to other frameworks and libraries such as React that uses JSX.
2. Virtual DOM: Like React, Vue.js also uses the more efficient virtual DOM.
3. Data binding: Vue.js makes use of two-way data binding. Here, data is shared between a component class and its template. Changing data in one place will automatically reflect on the other end.
4. Easy implementation of CSS styles: CSS styles such as animations and transitions can be easily implemented in Vue.js using the v-bind directive.

<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

1. Provides HTML-based templates: Vue.js uses HTML based templating to which event-handlers and styles can be added through the use of directives.

Ember.js

1. HTML and CSS development: Ember.js focuses on the development of the HTML and CSS model at its core to enable developers to create more stylized applications.
2. Ember Inspector: Ember Inspector is a browser add-on that aids developers in understanding and debugging their web applications.
3. Templates: Ember uses HTML templates to drive its UIs. Each piece of the UI displayed to a user is defined by an HTML template.

Conclusion

1. Read the user documentation. Each of the frameworks and libraries discussed above contain links to their official documentation which are usually a very good resource for diving into them.
2. Try out the starter applications. Most of these frameworks have a starter application in their quick start guides, making it very quick and easy to set up.
3. Discover which frameworks are suitable for a given scenario. As you play around with these sample applications and frameworks, you can draw comparisons to the frameworks you already know about. Take note of the differences and benefits you see when using these frameworks.
4. Select a framework that meets your requirements. Once you’ve played around with a couple of frameworks, you may select one that is best suited for the needs of your application. You can then begin sketching out how it’ll be used on your codebase.
5. Leverage the features and the benefits of the community. You can now start implementing features and slowly build out your application. Most of these frameworks have large user-bases, making it very easy to reach out to the community for support when you run into trouble.