Jul 26 2018

Choosing The Best JavaScript Framework or Library for Your Project: React, Angular, Vue.js or Polymer?

by David Gunter

The technology industry is hugely competitive. Time-to-market is everything. First one out the gate doesn't always win if a better solution follows, but having a head start gives a product and company a huge advantage.

Picking the right framework or library can give a development team the edge it needs to build an application fast. Because it provides a foundation that supports the fundamentals common to all applications, using a package lets the team focus on building the application's functionality and saves the time and effort that would be spent designing, implementing, and testing core components. Libraries let you separate front end work from back end concerns, letting you work on both simultaneously without causing integration problems.

There are lots of JavaScript libraries out there. Four of the most popular today are React, Polymer, Angular, and Vue. There are a lot of similarities among them; all are based on components that get an input and return a user interface element.

How do you decide which one to use? Your pick should be based partly on how much you want to rely on a framework versus how much flexibility you need, how big and supportive the user community is, and how hard it will be to get started. Here's the info you need to back up your decision.

React

React was developed at Facebook and first released in 2013; it's widely used at Facebook and other major companies like Airbnb, PayPal, and Walmart. It is a library rather than a framework, and gives its users lots of flexibility. Because it isn't a complete solution, you can choose to build your own solution for functions like routing and state management; many users rely on libraries like Redux.

Everything in React is JavaScript, with JSX used to express HTML. A major advantage of using React is that it lets developers use the React codebase they use on the web to quickly generate/build native applications for iOS/Android. That way they have a shared codebase for UX/UI between the web an the mobile apps. With React Native, your components can generate native-rendered mobile apps for both Android and iOS.

There is a fairly steep learning curve for React, partly because of needing to learn JSX and partly because using it means identifying and learning other packages that provide the functionality React lacks. In particular, using Redux can add complexity. React is fairly easy to debug, as it uses one-way bindings that make data flows easier to understand. Although performance with React is generally good, a newer version called React Fiber offers enhanced rendering to improve perceived performance.

Polymer

Like React, Polymer was developed by a major web company (Google). It also is a library, not a framework, and is focused on making Web Components easier to use. Web Components are basically custom tags that a browser treats as if they're standard. Polymer relies on browser capabilities or a polyfills package to provide functionality that isn't natively available. Performance may be degraded due to the use of the polyfills. Because not all browsers support HTML Imports, you may need to package Polymer code specially for the browser to load it, also affecting performance.

Because Polymer focuses specifically on supporting Web Component development, it's a good choice for teams that are committed to that technology and want support specifically for that.

Angular

Like Polymer, Angular comes from Google. It is the "version 2" of the popular AngularJS framework. As a framework, it provides scaffolding that determines how your application is structured. It provides a full set of the functionality needed to develop a web application.

Because Angular provides so much functionality, there is a steep learning curve. Learning Angular requires learning TypeScript, which extends JavaScript and provides static types. Despite the additional learning curve, TypeScript and its static types can actually make Angular easier to learn for developers who already know Java or C#. Unlike React, which uses one-way binding, Angular uses two-way binding. This can make some coding easier for developers.

Angular also has very good testing libraries and strong community support. It's a good choice when your application requires complex workflows. Angular’s large feature set and rigid structure also make it well suited for larger teams that want a predefined set of standards to build upon.

Vue

Vue is a relatively new framework, having been first released in 2014. Its creator intended it to be a kind of lightweight version of Angular, keeping the data binding and DOM functionality without dictating how your application is structured. Vue's core focuses on an application's view and can be integrated with other libraries to build complex applications. Unlike React, those libraries for routing and state management are officially supported, rather than being community add-ons.

Templates in Vue are based on HTML, making templates easy to read and write and making it easy to migrate applications to Vue. It also makes the learning curve to get started relatively short; the Vue team states it takes less than a day to learn enough to build a non-trivial application. That makes it a great choice for a team that's new to building these sophisticated web apps.

Choose the Right JavaScript Framework or Library for Your Project

All of these JS frameworks and libraries provide functionality that will help your team deliver a solid application; the choice ultimately comes down to whether your business wants a full-fledged framework that augments your backend API to build complex frontend experiences or just a library to enhance UX/UI that relies entirely on the backend API for any real functionality. The ease of hiring developers with knowledge of these frameworks and how much community support there is are also big factors to consider.

In a 2017 survey by Stackoverflow, AngularJS and React are in the top-5 most commonly used frameworks and libraries. React and AngularJS both show up on all three Loved, Hated, and Wanted lists, with React the most Loved of all frameworks and libraries in the survey. Neither Polymer nor Vue shows up on any of the results.

Tivix currently has projects using three of these four packages: Angular is used on several projects where there's a lot of business logic that needs to be handled. Quite a few projects use React as well, and one project is using Polymer based on client request. Ultimately, with a good team, you can use any of these libraries to build a solid, successful application.

Want more? Head back to the Tivix blog