A Brief Overview of Popular JS Frameworks: React, Angular, Bootstrap, and Polymer

As the web progresses, websites are getting more and more complex. Gone are the days when some basic CSS skills and easy-to-learn knowledge of built-in HTML elements were enough to make a dynamic and attractive website. Users want powerful and quick web applications, smooth user interfaces, and one-click satisfaction these days. To solve these problems and make websites that are as sleek-looking as they are easy to interact with, there are now numerous front-end development frameworks. Some are more useful than others, and certainly, there are situations in which a particular framework may be better than the rest.

Here, in this article, we are going to take a look at a few popular frameworks including React, Angular, Bootstrap, and Polymer.

A Quick Note on Web Components

DOM and HTML have a new set of standards called Web Components being added by the W3C.

These standards can be categorized into four main features that can be used independently or all together when building a website. These features are intended to simplify web development by providing low-level APIs that allow developers to build highly complex web apps from HTML tags and elements that are custom made:

• HTML Imports: Make it easier to import HTML documents into other documents.
• HTML Templates: Allows you to create inert sections of the DOM within the tag.
• Shadow DOM: Provides encapsulation of JavaScript, CSS, and templating so that your web component code remains modular and separated from the rest of the DOM.
• Custom Elements: APIs for building your own HTML elements.

Polymer

Polymer is a new open source library made for using Web Components to build web applications. It is similar to React in that it is a library and not a complete framework. It approximates features like the Shadow DOM, Templates, and HTML imports via JavaScript libraries called polyfills so that you can start building custom elements today that will be forward compatible with Web Components in the future. As of version 10, Polymer has the following element lines:

• Google Web Components: Wrappers for Google’s extensive suite of apps, APIs, and services (i.e., Google Maps, YouTube, and Google Analytics)
• App Elements: Elements for building full web apps out of custom modular elements (i.e., app routing and storage)
• Iron Elements: Elements for building the core functionality and structural layout of a web app
• Paper Elements: Visual elements that build off of the support provided by iron elements and implement Google’s Responsive Material Design paradigm
• Gold Elements: Elements for adding e-commerce functionality to your website (i.e., checkout flows)
• Neon Elements: Elements for adding special effects (i.e., animations)
• Platinum Elements: Elements for more complex features like Bluetooth and push notifications
• Molecules: Wrappers for external JavaScript lib

Bootstrap

Bootstrap started at Twitter as an internal style guide. It is designed to get developers on pace with their new website as quickly and efficiently as possible. Here are some features provided by Bootstrap:

• Open-sourced full (HTML, CSS, and JavaScript) front-end framework
• CSS preprocessor: Sass (support for the Less preprocessor ended with Bootstrap 3)
• 12-column grid system
• “Mobile-first” responsive design
• Optional Flexible Box (or, flexbox) support, a CSS3 mode that arranges elements on a page dynamically so they stack or expand when viewed on different screen sizes
• ES6 JavaScript components and plugins
• Support for IE9+ (support for IE8 ended with Bootstrap 3)
• Pre-styled, ready-to-use UI components

Angular

Angular is an in-depth, comprehensive framework developed by Google that will give you everything you need to set up the front end side of a website. Angular manipulates DOM by extending HTML with directives. Anything that changes in the view also changes in the data, thanks to the two-way data binding.

• Dependency injection
• Two-way data binding
• A solid templating engine
• On-board form validation
• Angular directives

React

Let's call React what it is: an open-source library for rendering views with JavaScript. It stores two copies of a virtual DOM, including a second updated version that reflects changes fed in from the view. React is best when the developer has a good amount of dynamic content changing within the view, such as social media networks (obviously, because React was developed by Facebook). Perhaps this is why it is called 'React,' because the quick reaction to change can save even a half second of delay in rendering.

*    *    *

All four of these popular frameworks have their advantages. I recommend reading the articles listed in the references section here for more detailed information on each and more specific examples of when a developer will want to use one over the other.

Further reading:

https://www.upwork.com/hiring/development/angularjs-vs-react/