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.
- Custom Elements: APIs for building your own HTML elements.
- 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
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:
- 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
- Support for IE9+ (support for IE8 ended with Bootstrap 3)
- Pre-styled, ready-to-use UI components
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
* * *
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.