Here’s how we compared Javascript frameworks to pick the best

[Edit Notes: Late last year we relaunched the Freshworks’ help widget which sits on a website and helps support customers better. In this multi-part blog written by our engineering team, we talk about how we picked the components and technologies that went into it and the improvements we made to it. Part 1 and Part 2 of the series is here and here. ]

In the previous part of this series, we looked at the several parameters we used to compare various JavaScript frameworks. In this part, we will look at how each framework performed against these parameters. We will also detail the advantages and disadvantages of using each of the framework.

But before we dive in, a word to the wise: The JavaScript ecosystem and the frameworks are very dynamic. So the data and factual information below may be a little off by the time we publish this piece. We expect you, dear reader, to factor in that some of this information can be outdated or irrelevant. Before you make a decision for your development needs, make sure you run the comparison again.

Note that we’ve also mentioned the version of different frameworks we evaluated below.

Comparison of Javascript frameworks
A comparison of Javascript frameworks

The table lists the metrics in the order of priority that we evaluated. We were inclined towards React due to the widespread industry adoption and community support along with performance considerations. However, we also wanted to try out similar frameworks to validate our understanding. In the following sections, we have detailed what each framework offered and what are the must-have features for us.

React

React, developed by Facebook, is a declarative, efficient, and flexible JavaScript library to build user interfaces. It is one of the most popular JavaScript frameworks as of today.

Pros

Cons

  • JSX – Javascript within HTML
  • Declarative paradigm

React.js is used in production by some of the big companies to build single-page applications like Facebook, Instagram and more.

We described how to use Lighthouse to audit prototypes for performance in our previous post. Here’s a look at the Lighthouse Audit Report for the prototype widget application we built using React. All the audits were performed without device emulation and a simulated fast 3G network. We included the widget in an empty HTML page and performed the audit with the page load. Similarly you can find the audit reports for the other frameworks also in the below sections.

Lighthouse Performance Report for React widget

You can find the source code and demo can be found here and here.

Preact

Preact is a fast 3kB React alternative with the same modern API, components and virtual DOM. It also includes ES6 class components, higher-order components, stateless pure functional components, contexts, and refs.

Pros

  • Thinnest possible Virtual DOM abstraction
  • Small size
  • Great Performance
  • React like API
  • Portable and Embeddable
  • Instantly Productive
  • Ecosystem compatible

Cons

  • Proptype validation
  • Children
  • Synthetic events

Pro tip: there are some workarounds offered by the community to ensure that these won’t stop you from using the framework.

Several companies including Groupon, Uber, Lyft, and Treebo are now switching to Preact as a low-cost alternative to React.

Lighthouse performance report for Preact

Source code and demo here.

Glimmer

Glimmer is one of the fastest DOM rendering engines out there. It delivers outstanding performance for initial renders as well as updates. With an architecture similar to that of a virtual machine (VM), Glimmer quickly compiles templates into low-level code  without sacrificing ease of use. It gives us fast and light UI components for the web. Also, it gives attention to the details you’ve come to expect from Ember.

It has one of the best Command Line Interface (CLI) tools among JavaScript frameworks, so it is very easy to scaffold applications and components. To create components you just need to fire one command in the shell:

$ ember g glimmer-component WidgetHeader
$ ember g glimmer-helper eq

Since Glimmer is a complete rewrite of the Ember rendering engine, it lacks some of the features needed to work with components in Ember like the following:

contextual components
built-in template helpers
dynamic component invocation using the {{ component }} helper

Pros

  • Best-in-industry support CLI,
  • Conventions
  • Short Learning curve — compared to Ember
  • Low memory footprint
  • Performance
  • Developer Productivity
  • CSS Blocks — Promising, but not tested

Cons

  • Community Support
  • Project goals
  • Still in Alpha stage
  • Plugins / addons / packages
  • Typescript

As of writing this piece, no big company has bet on Glimmer apart from LinkedIn as it is their in-house framework.

Lighthouse Performance Report for Glimmer.js widget

Source code and demo are here and here.

Vue

Vue.js is a progressive, incrementally-adoptable JavaScript framework to build UI on the web. It outperforms other frameworks in many areas like popularity, community support and packs quite a punch when it comes to functionality. Suffice to say, we like Vue but there are some things we didn’t like about it.

Cons

  • Numerous abstractions
  • More than one way to build functionality
  • Single-file component
  • Directives  – and these  overrides HTML attributes, purpose, semantics
  • Component communication

The list of companies using Vue.js in production is a long one and this includes big companies like Facebook, Netflix, Adobe and Xiaomi.

Lighthouse Performance Report for Vue.js widget

Source code and Demo are here and here.

Svelte

Svelte.js, the magical disappearing UI framework, avoids the JavaScript bloat while giving us all the benefits of using a framework.
Svelte is a compile-time framework that compiles the application as small and standalone JavaScript modules instead of parsing and executing huge JavaScript bundles at the browser end of the user. In other words, by the time it gets to your users, it would have disappeared. It is based on familiar premises such as building apps out of composable, easy-to-write blocks using languages you already know. It is fast, rock-solid and owes its performance to compile-time static analysis, which ensures the browser does no more work than it needs to.

Pros

  • One of the fastest loading frameworks
  • Simple API
  • Single File component
  • State management
  • Server-side rendering
  • Static properties
  • Directives

Cons

  • Relatively new framework launched only in Nov 2016
  • Lacks community support and industry adoption

Lighthouse Performance Report for Svelte widget

Source code and Demo are here and here.

Web Components

Web components aka Custom Elements have made a comeback in 2019. It is built on specifications like custom elements, shadow DOM, templates and HTML imports. These are browser standard components with no frameworks.

Pros

  • No framework bloat
  • Plain Vanilla Javascript, HTML & CSS
  • Part of the specification
  • Browser support — Chrome, Safari, Opera, Firefox*
  • Shadow DOM — Best encapsulation for CSS
  • Long term maintenance and support
  • Accessibility & Semantics

Cons

  • Conventions
  • State management
  • IE and Edge support
  • Template interpolation
  • Spec is not a standard
  • Browser support (Polyfill?)

Lighthouse Performance Report for Web component widget

Source code and Demo are here and here.

Community Metrics

Besides looking at the technical aspects of these frameworks, we also wanted to capture the community and tooling support for the frameworks. This is to make sure that we keep up with the latest trends in the framework ecosystem and also to future proof our development practices and tools. We collected different statistics for the frameworks like Github stars, forks, bundlesize metrics and npm packages and those are shown below.

The graph below shows the number of Github stars for different frameworks. It is pretty obvious that Vue and React are the major winners in terms of framework popularity and appeals to most of the front-end developers.

We also looked at the number of forks for each of the frameworks so we have a more rounded view of them. This might give you the number of contributions to the frameworks from the public with pull requests and other modifications. Here, too, Vue and React have an upper hand.

Bundle Size (gzipped)

This graph captures the gzipped size (in KB) of the different frameworks, which might directly correlate with the initial load and application boot performance. These metrics are collected from BundlePhobia, a tool to obtain the cost of adding an npm package to your bundle.

npm packages

This graph gives us a clear picture of the community and tooling support in terms of addons, libraries and packages for the various frameworks from npm.

Why we picked React

After analyzing and evaluating each framework, we chose React. The main reasons were the productivity boost it offered along with the adoption numbers and community support in building applications of this scale. After prototyping the product in different frameworks that we talked about, React was the best-fit for our app. Also, the learning curve was smooth enough to on board new developers into the project.

Using React, we were able to prototype design quickly and efficiently. Thus, the design review process did not take too much of the design team’s time. It was also easy for developers to make visual and layout changes.

React enables us to pull a lot of community addons and libraries for our application, which was battle-tested and sufficiently documented.

References

Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)
JS web frameworks benchmark
BundlePhobia
13 Top Companies That Have Trusted Vue.js
A curated list of awesome things related to Vue.js