Community Post

React, Bootstrap, Polymer, and Angular- The Basics

TimW

Javascript is the standard practice for building web and mobile apps these days. But how does a developer know which framework(s) to use for their specific situation? Apps should be easy to interact with on both the front and back ends, and have an attractive interface. Users and clients want powerful and quick web applications with smooth user interfaces and one-click satisfaction. Some front-end development frameworks are more useful than others, but each have specific scenarios in which they excel. Popular frameworks include React, Angular, Bootstrap, and Polymer. We’ll go over each of these here. For your project, consider how the framework will play into Web Components: • 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

When to use Polymer • When you need to craft your own complete web elements into complex web apps that are scalable and easy to maintain/update. • When you need to extend an existing element into more powerful web components • When using heavy browser-based technologies like shadow DOM, template elements, and web animations.

Bootstrap Bootstrap was developed by Twitter 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

When to use Bootstrap: • When you need a large collection of ready-made components and resources or are short on time. • When you need a solid structure first and can add fonts, elements, styles later on.

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 (on AngularJS • A solid templating engine • On-board form validation • Angular directives

When to use Angular • When you need complete control of the framework and presentation and have plenty of time to work with it and design it exactly to your standards • You need support for server-side rendering (on Angular 2.0) • You want to incorporate use of a library such as React • You need to be backwards compatible with browsers older than IE8 • A library isn’t going to cut it for your project

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.

When to use React • Dynamic content changes frequently within the view, such as with social media networks. • You need to view the components of full frameworks. • You want the view to be simple and comforting for users

Conclusion React and Bootstrap are the easiest to learn and implement, which is a big reason for their popularity. Angular offers the most flexibility and overall control, but takes the most time and effort. Polymer is also simpler to learn than Angular, but from a Google has not caught on in the way that Angular did. Comparing libraries and full frameworks is a bit of a ridiculous argument but when it comes down to it, you need to ask yourself, ‘What is better for my specific situation?’

Further Reading: https://www.upwork.com/hiring/development/angularjs-vs-react/ https://www.upwork.com/hiring/development/polymer-vs-react/ [https://www.upwork.com/hiring/development/bootstrap-vs-foundation-which-framework-is-right-for-you/]