Choosing a JavaScript Framework in 2020
Choosing a JavaScript Framework: A look at 6 popular options
Around the time I first published this I started assessing this myself. It is never an easy decision because there is so much to consider.
Rob Eisenberg is a JavaScript framework expert. He is the main man behind Caliburn.Micro, Durandal and Aurelia, and has also worked on the Angular 2.0 and Angular Material teams. So his advice is well worth a listen, and a watch.
This article was originally written as a summary of Rob’s excellent talk. I still believe it is well worth spending a full hour to watch the whole talk yourself, however as time passes on there are things moving on from the point when he gave the talk in June 2016.
I am gradually updating this article and extending this article to contain more information about other libraries and frameworks that I consider to be worthy alternatives to the shortlist that Rob selected. I also welcome you to submit your own suggestions and I will try to accommodate them if I can.
The NDC Oslo Talk
Rob introduces himself and says due to time constraints he’ll be presenting a “hello world” like example of each framework. Each app is a web component which simply shows First Name, Last Name and a computed Full Name.
First he asks you to bear in mind that:
- He’s obviously biased, especially against Angular 2 (also bear in mind that this summary could potentially contain some other bias)
- Don’t be swayed or swept up by hype. Be professional and choose what meets the needs of your business.
As bias is a theme here, it is only fair to discuss any possible biases I might have.
My brother is a React JS developer. I am also a guest blogger on Outlier Developer, which is run by the same guy behind React JS Consultancy.
I am not paid to write for Outlier Developer or have any financial interests in any particular framework. Most recently I have been using Vue JS, which was not included in Eisenberg’s talk but is a very elegant framework.
Any personal commentary on the talk is (italicized and in round brackets).
Rob believes our tendency to jump to technology choices too quickly is a systemic problem in our industry.
The frameworks under the spotlight are:
- Angular JS (1.x)
- Angular (I will also be covering versions through to 8 in this article)
- Aurelia
- Ember
- Polymer
- React
Rob says he’s trying to be as unbiased as he can be, and will cover the frameworks in alphabetical order.
He points out that they aren’t all frameworks in the same category, or even all frameworks.
Angular JS (a.k.a Angular 1.x) is an all-in-one framework. Rob says it is
pretty much deprecated, there’s literally a fixed number of months left on the lifetime of that framework
and
it’s probably fair to say that you shouldn’t start a new project in Angular JS right now, and you should be thinking about how you might migrate any existing code bases.
(When I first wrote this article, but I defended Angular 1.x here, but in 2019 it is now absolutely right that you can dismiss Angular 1.x. The Ionic Framework now uses the newer Angular and Angular v8 is far better than the old v1.)
Rob describes Angular 2, Aurelia, Ember and Polymer as also All-in-one frameworks, but modern ones.
React is not a framework, per se. It’s a view rendering engine or a component model.
Rob says that although the demo is extremely simple, it shows the different approaches that each framework takes.
Rob recommends Visual Studio Code and is using it on his Mac. I’ve since heard Mark Rendle and others agree with this point. I have found WebStorm is well worth the license fee but if you want a free solution Visual Studio Code works pretty well.
(For brevity, I’ll be referring to lines of code. Some lines of code can be much longer or shorter or more or less readable than others so to get the full picture you’ll need to watch the video for yourself. Rob has a style of leaving a blank line at the end of each file. I will discount those. The line count stats do not attempt to keep up to date with any newer versions released, only the versions at the time of the recording.)
Angular 1.x
index.html is 13 lines of code
We see the ng-controller and ng-model directives.
app.js is 8 lines of code. Rob describes this as a throwback to the previous generation of frameworks: Angular specific modules rather than ES2015 modules. He describes the Angular 1 two way data-binding model.
(As of Angular 1.5 we have Angular Components as a superior alternative to using controllers and directives. See Scott Allen’s Building Components with Angular 1.5 for more.)
Angular (2+)
Rob says Angular 2 really focuses on TypeScript, and
it is much more difficult to use plain JavaScript so most people are going to be kind of pushed down the TypeScript road necessarily with Angular 2
(The equivalent documentation is available for TypeScript, JavaScript and Dart. Judge for yourself how much more difficult it is to use with plain JavaScript)
index.html is 32 lines of code
(I could not believe that there isn’t a simpler way to write this in Angular 2. Rob has found some Angular 2 documentation that pulls in a whole load of modules. For the purposes of developing a hello world type app, Rob is pulling in the following modules:
- es6-shim
- system-polyfills.js
- shims for IE.js
- angular2-polyfills.js (no longer part of the Angular2 RC)
- system.src.js
- Rx.js
- angular.dev.js
There is also a bunch of code for here configuring a System JS module loader. System JS is written by Guy Bedford and Max Norlund and has nothing to do with Angular 2
Update: I have found this code is very similar to the Bill Stavroulakis “Hello Component” demo which you can find on Plnkr. Bill describes it as “a very simple Angular 2 setup”. I was very surprised to find that this simple demo won’t work at all without Rx.js. You can create “Angular 2 components” easily, but using the Web Components standard with Angular 2 appears to be a lot harder. Fortunately this situation has improved considerably in Angular 8 and up.
Bill is a fan of Polymer JS and has created several Hello Component demos available at HelloComponent.com
Please let me know if there’s an easier way to achieve this.)
main.ts — 4 lines
app.component.ts — 20 lines
Rob explains the Angular2 decorator. He uses an inline template rather than using a template URL. He also explains two-way data-binding in Angular2, and points out that Google have deviated from the HTML specification by using mixed casing.
Aurelia
index.html — 10 lines. This imports System JS and uses it to import the Aurelia bootstrapper.
app.js — 8 lines
app.html — a template with 5 lines of code. Rob explains the two way data binding mechanism used here.
Ember
index.html — 16 lines. Imports jquery, handlebars, ember and app.js
app.js — 23 lines. Rob says Ember is a very strict MVC paradigm and requires a router even for Hello World.
Polymer
index.html — 10 lines.
my-app.html — 22 lines including template, a script block and 4 blank lines.
Rob says the web components centric philosophy concerns him because
…it doesn’t make sense to do everything in HTML but there it is, that’s my opinion
(Rob could have easily put the JavaScript in a JavaScript file. Polymer doesn’t stop you from using JavaScript at all, it just provides some short-hands that can reduce the amount of JavaScript that you need to write.)
Rob likens Polymer to the long forgotten Microsoft Acropolis project from 2008 which tried to do everything in XAML.
React
index.html — 13 lines, importing es5-shim, es5-sham and console-polyfill
(Again, some totally unnecessary imports doing nothing except adding ridiculous complexity to a hello world app.)
app.js — 39 lines.
At 28 mins in we’re wrapped up with the hello world examples and go into the slides.
Technical
Size (minified, not gzipped)
- React+Redux — 156k or 167k with plugins
- Angular 1 – 158k minimum, 240k with router, HTTP and animation system
- Polymer — 222k minimum, 302k (spec compliant)
- Aurelia — 252k minimum, 302k with standard plugin
- Ember — 435k including router
- Angular 2 — 698k minimum, 919k with RxJS, 1023k with RxJS and router and HTTP client
(Not that Redux is in any way large, but it is unfair to add Redux to the file size for React only. Redux happens to be more commonly used by React users, but it is an optional extra regardless of which framework you choose.)
Rob mentions that the Angular team are using tree shaking to reduce the file size. The Angular tooling has improved a lot over the past 3 years but the 1MB Angular “Hello World” app is still sort of a running joke.
Repaint Performance
This test uses DB Monster Repaint. Numbers are frames per second.
Aurelia — 90–105/130–150 (with optimisation plugins)
Angular 2 — 80–90/110–130 (with optimisation plugins)
Polymer — 50–60
Angular 1–50–55
React — 45–50
Ember — ???
Rob says that to be honest all of these frameworks are very fast because 50 frames per second is faster than what we can usually see.
(This tool was popularised by Ryan Florence (from Facebook) in his talk at Conf 2015 showing React was faster than Angular JS and much faster than Ember at the time it was recorded.
You can see Matthieu Ancelin’s dbmon repaint rate challenge which tests a much wider choice of frameworks. After a long time with Aurelia as a “TODO” implementation at the moment, the Aurelia optimised test is available, and its fast.
Latest Performance Developments (updated 20th Oct 2018)
A Run all button has recently been added to dbmon making it easy to compare all the featured library and frameworks against each other. Try it yourself: open it in a new tab, click run all and come back to see the results after you’ve finished reading this article.
The dbmon test was updated in 2017 with adjustable mutations percentages. I have used 50% mutations, because below that the tests give fps rates well above what the human eye can detect (over 100 fps). As a developer, your aim should be just to keep the frame rates consistent at about 30 fps and optimize for the scenarios where the frame rate is at its worst.
I ran the optimized tests for Rob’s selected frameworks on my laptop on Chrome 67 for Windows and got these results:
Aurelia — 60 to 90 fps when run in 2017. Test did not work when run Jun 2018.
Angular — 75 to 95 fps
React — 60 to 80fps
Angular 2– 49 to 52fps when run in 2017. Test did not work when run Jun 2018.
Only naive implementations for Polymer and Ember are currently available. Results are the average frame rates.
Polymer 1.8–70 fps
Polymer 2.0 –53 fps
Ember — 60 fps
Some other selected framework/technology results:
Vue — 70 fps
Vue 2 — 57 fps
Elm — 79 fps
Inferno — 71 fps
Vanilla JS — 104 fps
I also ran these tests on Firefox and Edge. Frame-rates are significantly slower in both of these browsers. I found Angular 1 outperformed Polymer on Edge. Ember performance is massively improved with the latest version and there is an optimized version here which is insanely quick!
Many other fast frameworks are tested here as well. Angular Light and Motorcycle score well, although not as fast as Inferno. At the end of the talk Rob recommends Riot as an alternative to React. I found Riot scored 48 fps at 50% mutations. Also see more benchmarks from auth0
It is interesting that Rob downplays the significance of leading performance here because — giving the Aurelia team the benefit of the doubt — in the past other frameworks have easily generated a lot of interest just by being very vocal about their superior benchmark results. It is a crown which is never held for very long however.)
Standards Compliance
Aurelia: HTML, ES 2016, Web Components (including the Shadow DOM)
Polymer: HTML, ES 2015, Web Components
Ember: HTML, ES 2015
Angular 2: ES 2016 (TypeScript). Non Compliant: NG2 Markup and Dart
Angular 1: HTML, ES5. Non Compliant: Modules, Dependency Injection
React: ES 2015. Non Compliant: JSX
(Web Components is still not yet a proper standard. It reached “V1” a couple of years ago. — See Taylor Savage’s article on V1 support in Chrome 53/54+.
Web Components Shadow DOM is currently a Working Draft
Web Components Custom Elements is a discontinued Working Draft
For latest information see https://github.com/w3c/webcomponents/
TypeScript is not a standard, and ES 2016 is a standard.
The latest ES standard is ES 2019)
Separated Presentation
Excellent: Aurelia and Ember
Moderate: Angular JS
Poor: Angular 2 and Polymer
N/A: React
Rob says Separated Presentation is less of a technical issue than a people issue.
Obtrusiveness
Unobtrusive: Aurelia
Average: Ember
Obtrusive: Angular 1, Angular 2, React
Rob provides some commentary for the purpose of justifying these claims.
(These are opinions not measurements)
Interoperability
Very Interoperable: Aurelia, Ember, Polymer
Average: Angular 2
High Friction: Angular 1, React
That concludes the technical comparison. At 43 minutes in Rob moves on to discussing the project and the team.
Project and Team
The table is very useful but has too much information to recreate here, so see the video at (43:30) for that.
Rob says although Angular 2 is claimed to be at Release Candidate Status, there are still breaking changes being made and
it’s not really a release candidate if you look at what’s really happening there.
(In my opinion this is no longer relevant as Angular is far more mature now.)
Rob says there is a patent clause in the React license, which prohibits you from using it to compete with Facebook, or if you have an intellectual property dispute with another company using React.
He says this is why Google and Microsoft employees don’t use React.
Latest Version Information (updated 26th Jan 2020)
React
You can find React’s Patent clause here.
Robert Pierce of El Camino Legal LLP has written this article criticizing Facebook’s patent clause and arguing it is not open source software. Hacker News comments here.
And Dennis Walsh makes the case that React’s Patent clause is much ado about nothing.
The latest version of React is v16.12.0 which was released November 2019.
React v16.9 and the Roadmap Update
React v16.5 added many improvements to React DOM.
Aurelia
It’s now more than 3 years since Aurelia reached v1.0. Sadly over the last year it hasn’t had much in the way of updates. The last release v1.31 was done a year ago. Rob Eisenberg now works full time at Microsoft.
Check out the new features in the Oct 2018 release.
Aurelia CLI reached version 1.0 in June 2019.
Several other great new Aurelia features:
- New Chrome Debugger
- Webpack v2 support
- CLI enhancements
- Hot module reload
- VS Code plugin enhancements
- HTML Template Validation
For more details see the Aurelia blog.
Angular (2+)
You can expect Angular 9 to be released within the next few days!
Angular 8 came out in May 2019 and offers smaller bundles, CLI APIs and alignment with the ecosystem.
Angular 7 was released in 2018 and added CLI Prompts, Virtual Scroll and Drag and Drop.
Angular 6 came out in May 2018, and it focused on improving the toolchain and on making it easier to develop quickly with Angular.
Since v2 was released, the Google team has met its own proposed schedule on releasing new versions
Angular 4 — March 2017
Angular 5 — Sept/Oct 2017
Angular 6 — May 2018
Angular 7 — Oct 2018
Angular 8 — May 2019
Angular 9 — Jan/Feb 2020
The Google Team have agreed to release new patch versions every week, a new minor version every month and a major version every 6 months.
By new major version we mean new features and potential breaking changes since the last release. So we should not necessarily get overexcited about new major versions, or conflate higher major numbers with very much higher quality.
For full details see Igor Minar’s blog post and opening keynote. Igor makes many interesting points in the keynote.
Google always use the latest version of AngularJS for their own applications. He also mentions TypeScript.
Some of the new Angular features delivered were:
- Better Compiler Errors
- Faster
- Smaller
Angular 4 is backwards compatible with Angular 2 (but not Angular 1) so Angular 2+ is a much better bet for new applications that you will need to maintain and improve over a long lifetime.
The Google team recommends we use the latest version.
Asked about using Angular with a module loader Igor said
“This will probably change in 6 months…it seems that webpack is a better option from the developer ergonomics.”
he goes on to explain where Rollup or SystemJS may be better.
Google’s Green Tea app was rewritten big-bang for Angular 2.
Angular on Pluralsight
I am currently doing reviews of all courses on the Angular learning path.
The Pluralsight Angular Fundamentals course is a huge 10 hour course.
There is also a Play by Play course by John Papa and Dan Wahlin.
I’ve also written reviews of first look and getting started. Deborah Kurata’s getting started course has been updated for the RTM version of Angular 2 and contains more than an hour of additional content than her original course.
There are other courses: Mark Zamoya’s Angular 2 Forms, John Papa and Ward Bell’s Play by Play: Angular 2 Quick Start, and Deploying an Angular 2 to Azure with Git by John Papa and Shayne Bower.
Polymer
Polymer v3.3.1 has been released. To learn about v3 see here.
If you haven’t currently invested in Polymer 1.x or 2.x, I recommend using v3.x.
A series of videos from Polymer Summit 2016 are available on YouTube and Polymer Summit 2017 is here. There was no summit in 2018 or 2019 :-(
For v1.x users, to learn about the upgrade path to Polymer 2.0 watch Polymer 2.0 in 2.0 seconds. To understand how it works see Polymer 2.0: Under the Hood. Rob Dodson describes Polymer as an opinionated usage of Web Components.
Another good watch is What’s New in Polymer Tools.
And if you want to move your website from jQuery to Polymer, check out Craig Shoemaker’s HTML5 Web Components course.
Ember
Ember v3.15.0 is out now and v3.16.0 is in Beta.
Noel Peden has produced the Pluralsight course Getting Started with Ember 2
For a history of the evolution of Ember.js see the EmberConf 2017 keynote — Yehuda Katz and Tom Dale address the common perception that Ember is an outdated framework with too much baggage 21 minutes in. They are continually working to modernize the framework in a way that doesn’t alienate the existing user base.)
Core Team
Another detailed table at 48 mins in. Rob claims that the Angular teams don’t use their own frameworks, and that only the Aurelia and Ember teams are available to provide training.
(If you need React JS Training it is provided by Ryan Florence and Michael Jackson from Facebook)
Community and Communication
Another table of information and commentary on how strong each community is and how well the teams communicate with those communities.
Learning Materials
All frameworks score well on this.
Business
Another table of information at 54 mins giving details on:
- Corporate Buy-in
- Commercial Support
- Consulting
- Customer Relations
- Official Relations
- Official Partners
- Motivation
- Brand Recognition
Rob says Angular 1, Angular 2 and Polymer are not Google products. They are open source side projects from teams inside of Google.
(For detail’s on Google’s CRM system greentea, and it’s relationship with Angular, see How Google Uses Angular 2 with Dart. Google has also rewritten Google Adwords using Angular 2, and this is millions of lines of code.)
Rob’s Recommendations
Yes: Aurelia and Ember
Maybe: Polymer (or web components JS) and React (or Riot to avoid the patent problem and smaller size)
Rob says React is much better for read only apps and a lot more work for input intensive apps.
No: Angular 1 and Angular 2
Rob finishes the talk by re-iterating that he is biased, but hoping that the talk included useful information.
(I definitely feel that this talk has been useful to me. When doing your own assessment don’t forget there’s also Elm, Meteor, Cycle, Marionette, Inferno, Sails, Vue and many others worth considering. Vue JS is especially popular in 2020 but the most popular frameworks of all are React and Angular.
Agree with Rob’s opinions? Disagree? Please leave your comments to discuss.
My Recommendations
There is no one framework that is objectively “best”. Every option has its own strengths and weaknesses as we have seen. Your choice should depend on your own circumstances. A few guidelines:
Do not bother using Angular 1 anymore
Strongly consider Angular 8/9 if:
- You are a fan of TypeScript or have developers with TypeScript experience
- You want to write large, very high performance applications
- You are not very purist about the JavaScript language — you do not mind learning proprietary directives and other Angular concepts
- You don’t mind taking a bit more time to learn an advanced framework
- You don’t mind your users downloading a larger than average file (though this situation is improving with newer Angular releases)
- You do not want to fall behind the technology curve (it is being regularly updated in a way that makes it easy to stay current)
Strongly consider React if:
- You are writing a medium or large scale app and are concerned about maintainability
- You prefer to make your own specialized decisions on how your software works — you enjoy investigating and evaluating new technologies
- If you write a bug you prefer to fail fast and early
- You do not mind writing a bit more code as long as it clear and understandable
- You are not religious about web components, as React’s virtual DOM does the job well enough
- You are not frightened by the patent clause
Strongly consider Ember if:
- You are not particularly interested in chasing the latest shiny things; you just want something that is proven and reliable
- You don’t want to waste time being overwhelmed by the number of possible solutions to a problem — you want an opinionated framework that gives you standardized and high quality solutions to the common problems
Strongly consider Polymer if:
- You love Web Components
- You love minimalism
- Your users, or most of them, are using very modern browsers
- You want the minimum “startup tax” on your users — the Polymer file size is tiny
Strongly consider Aurelia if:
- You want a framework that doesn’t get in your way too much
- You are a fan of Web Components
- You appreciate a clean syntax
- You consider standards compliance an important consideration
- You only hire good developers, so you are confident they will be able to learn the framework quickly enough
- You are happy with Aurelia as it already is, because it is no longer seeing frequent major updates
Further Reading
Choosing a JavaScript Framework — Rob Eisenberg at NDC Oslo 2016
Fun Fun Function: Too many tools and frameworks! (how to deal with it)
Tessa Thronton: How to learn web frameworks
Review of Brian Noyes’ Aurelia Fundamentals course
Rob Eisenberg on Aurelia and how it stacks up against Angular 2 and React
Todo MVC examples in many, many frameworks
Front End Masters: Brian Holt’s JavaScript Framework Showdown (Angular 1/Ember/Backbone/React)
React.js Conf 2015 — The complementarity of React and Web Components by Andrew Rota
Stickfigure compares Angular, React and Aurelia
Daniel Steigerwald medium posts:
What’s wrong with Angular 1?
What would I recommend instead of Angular?
