Thanks to Pavneet Singh Saund for telling me about Rob Eisenberg’s recent NDC Oslo talk

Note: A more up to date version of this article is available on Medium

Choosing a JavaScript Framework: A look at 6 popular options

I have recently started assessing this myself. It is not 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.

If you don’t have a spare hour to watch the whole talk yourself, I’ve written a summary of it for you with commentary.

Rob introduces himself and says due to time constraints he’ll be presenting a “hello world” like example of each framework. Each app simply shows First Name, Last Name and a computed Full Name.

First he asks you to bare in mind that:

1. He’s obviously biased, especially against Angular 2 (also bare in mind that this summary could potentially contain some other bias)
2. 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 do not currently use React JS or any of the other featured frameworks professionally.

I currently use only jQuery and Bootstrap, plus a few libraries, which in my opinion is all you need for small projects. However I am currently working on a big project, so I need to get agreement on a suitable framework quite soon.

I am not paid to write for Outlier Developer or have any financial interests in any particular 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 systemic problem in our industry.

The frameworks under the spotlight are:

• Angular 1.x
• Angular 2
• 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 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.”

(I’ve never been much of a Angular 1.x fan, but I feel it is only fair to point out that Angular 1.x is currently actively supported, and every framework has a number of months left in its lifetime, whatever that means.

If you are interested in using the Ionic Framework then you need to adopt Angular 1.x as well. To dismiss Angular 1.x is also to dismiss the Ionic Framework. Ionic v2 will use Angular 2 but it is currently quite far away from RTM.)

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.

(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.)

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.

Angular 2

Rob says it 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 find this is disrespectful to the intelligence of Javascript developers, as if we are mere code monkeys who cannot think. Any mediocre developer could write this a lot better and Rob is certainly smart enough to write a better far better Angular 2 implementation than this. 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)

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 date 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 Microsoft Acropolis project from 2008 which tried to do everything in XAML.

React

index.html – 13 lines, importing es5-shim, es5-sham, 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

Rob mentions that the Angular team are using tree shaking to reduce the file size.

Repaint Performance

This test uses DB Monster Repaint.

• 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 1 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, however Aurelia is a “TODO” implementation at the moment)

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

(ES 2016 is not currently a standard.
It may become a standard in the future, but we have seen with ES 4, App Cache and other, that things don’t always work out so rosy.

Web Components is not yet a standard either.
Web Components Shadow DOM is currently a Working Draft
Web Components Custom Elements is a Working Draft

TypeScript is not a standard.

ES 2015 is a standard.)

Separated Presentation

Excellent: Aurelia and Ember

Moderate: Angular 1

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 say 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”.

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.

(You can find React’s Patent clause here)

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.)

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 and there were a number of good points that I will bare in mind during my assessment.)

Agree with Rob’s opinions? Disagree? Please leave a comment to discuss.

Further Reading

Rob Eisenberg on Aurelia and how it stacks up against Angular 2 and React