Choosing a JavaScript Framework

Choosing a JavaScript Framework has been never an easy decision because there is so much to consider.

Rob Eisenberg is a JavaScript framework expert. He is the mechanic behind Caliburn.Micro, Durandal and Aurelia, and has also worked on the Angular 2.0 and Angular Material teams. This post was originally written as a summary of Rob’s talk. 

The frameworks under the spotlight are:

Angular 1.x
Angular 2 (Angular 2+)
Aurelia
Ember
Polymer
React

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.

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 recommends Visual Studio Code and is using it on his Mac. 

For a very simple Hello World application, we will compare these frameworks:

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

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)
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 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
app.js — 39 lines.

Copyright © All Rights Reserved - C# Learners