JavaScript frontend frameworks

Writing your frontend with pure JavaScript is possible, and it was the way websites were developed for many years. Over the years, several libraries have emerged incorporating different controls and allowing code reusability. As they have grown, some of these libraries have merged together to create a framework that helps developers to create complete websites from start to end, while also providing answers to many aspects required by modern websites, such as routing, authentication, data binding, state management, and so on.

In this book, we will concentrate on three of the most popular JavaScript frameworks today: Angular, React, and Vue.js.  

Angular

Angular (https://angular.io/) is an SPA frontend web application development platform developed by Google and the open source community. It is the successor of the popular AngularJS framework, which dominated the SPA platform world at the beginning of the decade.

Angular takes HTML, CSS, and JavaScript and puts them in the context of application development with modular, component-based architecture, conventions, and utilities. It consists of a few basic concepts:

• Modules: Containers of Angular code
• Data binding: A mechanism that automatically reflects changes in the code on the UI, and vice versa
• Components: An HTML template combined with JavaScript code that controls it
• Directives: Add behavior to HTML elements of Angular components
• Services: Units of work that are additional to UI development, such as data handling or logging

Angular is one of the most popular frameworks today for web application development, and even has frameworks built on top of it such as NativeScript, which enables native mobile development based on an Angular code.

React

React, released and managed by Facebook, is a JavaScript SPA framework focusing on components, serving the purpose of a view engine. Contrary to Angular, React is less opinionated on how you build an entire app and requires a milder learning curve, albeit it's just a view engine. React enables building encapsulated and reusable components using its notorious and controversial JSX, a domain-specific language (DSL) that allows you to write the view of the component in JavaScript alongside the component logical code.

 React was released to the public in 2013 and it has made a great impact in the field, introducing great concepts to web apps, such as JSX, Virtual DOM, unidirectional data flow and great performance.

Notably, React is not just for web apps. React follows the notion of Learn-Once-Write-Everywhere. Meaning, you can leverage React to write apps that target different platforms, for example using React Native for cross-platform native mobile apps and React360 for VR.

 Moreover, the innovation and collaboration around React is astonishing and its community is paramount. React is just a component library, thus enthusiast followers have created complementary libraries to provide other aspects related to app development, such as state management, routing, and isomorphic rendering. Some of which have too made a noticeable influence in the field as well, for example, Flux and Redux.

 Ever since its release, React has been gaining popularity at a steady pace, taking its place as the leading SPA framework for quite some time now.

Vue.js

Vue.js (https://vuejs.org/), commonly referred to as Vue and pronounced view, is a JavaScript framework that aims to be approachable, with a less steep learning curve than other frameworks. Vue is based on the Model–view–viewmodel (MVVM) (https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) UI architecture and is focused on the ViewModel layer. It connects the View and the Model via two-way data bindings. 

Vue consists of the following features and ideas:

• Data binding (reactiveness): A mechanism that automatically reflects changes in the code on the UI and vice versa
• Components: An HTML template combined with JavaScript code that controls it
• Directives: Prefixed HTML attributes that tell Vue.js to do something about a DOM element
• Filters: Functions used to process raw values before updating the view