DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Difference Between Bootstrap and AngularJS in 2022
  • AngularJS Vs. ReactJS Vs. VueJS: A Detailed Comparison
  • Achieving Micro-frontend Architecture Using Angular Elements
  • 5 User Interface Frameworks in AngularJS for Web App Development

Trending

  • Is Agile Right for Every Project? When To Use It and When To Avoid It
  • The 4 R’s of Pipeline Reliability: Designing Data Systems That Last
  • AI's Dilemma: When to Retrain and When to Unlearn?
  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  1. DZone
  2. Coding
  3. Frameworks
  4. A Brief Overview of Popular JS Frameworks: React, Angular, Bootstrap, and Polymer

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

There are multiple front-end development frameworks out there... so, what are some of the basic differences between them? Author Tim Wenger briefly dips into four of the most popular ones currently out there to provide us with a basic understanding of each.

By 
Tim Wenger user avatar
Tim Wenger
·
Updated Aug. 30, 16 · Opinion
Likes (19)
Comment
Save
Tweet
Share
84.4K Views

Join the DZone community and get the full member experience.

Join For Free

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/

Framework React (JavaScript library) Bootstrap (front-end framework) AngularJS Element Polymer (library) Web Service Open source app HTML

Opinions expressed by DZone contributors are their own.

Related

  • Difference Between Bootstrap and AngularJS in 2022
  • AngularJS Vs. ReactJS Vs. VueJS: A Detailed Comparison
  • Achieving Micro-frontend Architecture Using Angular Elements
  • 5 User Interface Frameworks in AngularJS for Web App Development

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!