Using libraries like Angular, React and Vue

Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is a JavaScript open-source front-end web application framework.

Why is Angular a good choice ?

• Bidirectional data binding : changes in the DOM, such as user choices, are also reflected in your program data and vice-versa.
• Event Binding : update application data in response to user events
• Property Binding: bind values computed from application data to HTML.
• Cleaner code by using TypeScript.

Building blocks of Angular

• Modules – provide compilation context for components. Eg. NgModule. Organizing code into functional modules promote re-usability as well as lazy loading where modules are loaded just on demand, thus minimizing size of code loaded during application startup.
• Components – Every angular app has a root component that connects the component hierarchy with the page DOM.Each component is associated with an HTML template that defines a view to be displayed.Each component has a class containing the application data and logic. The @Component() decorator identifies the class.Components use services which provide specific function that can be injected into components as dependencies, making your code modular, reusable, and efficient
• Routing –  The angular router modules lets you define navigation path among different application states. It maps URL like paths to views. The router lazy loads a module on demand.We can associate navigation paths with our components
• Services – A service is a class containing any function, feature with a defined, and specific purpose. 
• Directives – Directives in angular, helps us to add dynamic content the DOM elements.
• Decorators – Decorators in angular are annotated with @, which helps to define metadata for any javascript classes like components, directives, services and modules etc.

Architecture – 

The following diagram shows how these basic pieces are related.

• Together, a component and template define an Angular view.
  • A decorator on a component class adds the metadata, including a pointer to the associated template.
  • Directives and binding markup in a component’s template modify views based on program data and logic.
• The dependency injector provides services to a component, such as the router service that lets you define navigation among views.

React JS

React is an open-source, front end, JavaScript library for building user interfaces or UI components. 

Why is React a good choice ?

• Easy to learn – Since it requires a minimal understanding of Javascript and HTML, the learning curve is low.
• Reusable Components –  If you’ve developed simple websites in HTML, there might’ve been times where you wanted to group a bunch of HTML elements and then save them into some sort of ‘variable’ so that it could be re-used later on. For a developer, this is a lifesaver. React has the ability to implement such a facility.
• Virtual Document Object Model – React creates an in-memory data structure cache which computes the changes made and then updates the browser. This allows a special feature that enables the programmer to code as if the whole page is rendered on each change whereas react library only renders components that actually change.
• Flexibility – Compared to other frontend frameworks, the React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves huge amount of time and cost to businesses.

Building blocks of React

• JSX – In React, we write HTML looking code which is not quite HTML but JSX, which stands for Javascript XML. instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.
• Components – Components are the backbones of react, which can be class components or functional components.Components is a concept that helps to enforce the single-responsibility principle in React. We should think of components as reusable pieces of our application, where each one performs (ideally) exactly one responsibility/task. In simple words, a component is a function that accepts data (props) and specifies how those data should appear in UI.
  • Class-based components – A class-based component is also known as a stateful component or container component 
  • They are called function-based because they are literally JavaScript functions. Also, these types of components are also referred as stateless or representational components (originally!) because they are best used to only display UI.
• State – State allows components to change the output when a user action has taken place.State properties are private and fully controlled by the component. Therefore, local and encapsulated within the component. When the state is changed in a component React triggers DOM render and updates the value in UI.

Vue JS

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Why use Vue Js ?

• Flexible and Scalable – In practice, this means that it can be used for a huge, modular SPA (Single Page Apps) as well as to construct small, interactive parts to be integrated using a different technology.In other words, it can be anything you need it to: just a library in your project or a full-featured framework used to build an entire product.
• Performant and size-efficient – Vue.js really makes the best out of whatever resources you devote to it. First, Vue apps are smaller in size (so they are quicker to load and use less bandwidth) and typically more performant than equivalent applications built in other frameworks. 
• Two-way binding – A reactive data binding is one of the most vital features for Vue. It keeps the information updated without manual interference. But the framework supports also two-way binding that provides not only for links between JS and the DOM but also vice versa. For this, users insert v-model and then can easily change info in the DOM.
• Virtual DOM – A Document Object Model (DOM) is something you’ll probably encounter when rendering web pages. A DOM is a representation of HTML pages with its styles, elements, and page content as objects. The objects stored as a tree structure are generated by a browser when loading a page.
• Component reusability – Encapsulated components are basically chunks of code that can be reused as templates for similar system elements.