Comparing

Javascript

Frameworks

Chander Dhall

Twitter @csdhall

Me@ChanderDhall.com

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

About Me

• Microsoft MVP

• Tech Ed Speaker

• Asp.NET Insider

• Web API Advisor

• Pluralsight Author

• Dev Chair - Dev Connections

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

About Me

• Conference Organizer – MVPMIX.com

• Leader – Angularjs Meetup Austin

• Leader – Rockstar Developers Meetup

• Leader – iPhone Developers Meetup Dallas

• President – Chander Dhall, Inc.

• Chander Tech Podcast

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Questions

• Do you really need a Single Page App?

• Which is the best framework for your

company?

• What’s a futuristic strategy for Javascript?

• How does my company qualify for FREE one-

hour consulting?

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

What JS frameworks do you use?

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Demo

Javascript Fun

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Demo

How NOT to write Javascript code

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Demo Code

for

Angularjs

Angular

React

Aurelia

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Size Matters

Library/Framework Size

React/Redux 147kb/***

Angular 1 159k/235k

Polymer 222k/302k

Aurelia 287k/352k

Ember 433k

Angular 2 636k/1023k

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

React• View Library

• React Core Doesn’t have– Dependency Injection

– Router

– Http

– Animation System

– Flux/Redux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Why Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Flux

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Redux• Redux is a predictable state container for JavaScript apps.

• It helps you write applications that behave consistently, run

in different environments (client, server, and native), and

are easy to test.

• Great developer experience: Hot Reloading. Live code

editing combined with a time traveling debugger.

• Redux works with React, or with any other view library.

• It is tiny (2-3kB, including dependencies).

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Size Matters

Library/Framework Size

React/Redux 147kb/***

Angular 1 159k/235k

Polymer 222k/302k

Aurelia 287k/352k

Ember 433k

Angular 2 636k/1023k

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular 2

• 638kb

– Reactive Extensions

• 1023k

– Router, Http etc

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Others

• Dynamic UI composition: Ability to render

based on a Plain Old Object into

dynamically composed component at run

time

• CSS based Animation System (Aurelia,

Angular)

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Size Matters

Library/Framework Size

React/Redux 147kb/***

Angular 1 159k/235k

Polymer 222k/302k

Aurelia 287k/352k

Ember 433k

Angular 2 636k/1023k

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

DEMO: REPAINT PERFORMANCE

#devconnections

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Repaint Performance

• http://martingust.github.io/aurelia-

dbmonster/

• http://jdanyow.github.io/aurelia-dbmonster/

• http://mathieuancelin.github.io/js-repaint-

perfs/

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Repaint Performance

Library/Framework Paints/Second

Aurelia 90-107/172-186

Angular 2 90-100

Polymer 50-60

Angular 1 50-57

React 48-50

Ember *

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

DEMO: ANGULARJS (BAD

CODE SAMPLES)

#ChanderDhall.com

devconnections

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular vs Angular 2

• Component Based

• Controllers Not used

• $scope Not used

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular1

angular.module(‘example’)

.controller(‘ExampleCtrl’, function() {

});

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular2import {Component, View} from 'angular2/angular2';

@Component({

selector: 'example'

})

@View({

templateUrl: './components/example/example.html'

})

export class Example {}

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular 1

<input ng-model=”thing.item” type=”text”>

<button ng-click=”thing.submit(item)” type=”submit”>

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular 2

Uses Input with Event Syntax

<input #item type=”text”>

<button (click)=”submit(item)” type=”submit”>

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular 1

angular.module(‘example’)

.controller(‘ExampleCtrl’, function($scope) {

$scope.name = “John Smith”;

});

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Angular 2@Component({

selector: 'example'

})

@View({

templateUrl: './components/example/example.html'

})

export class Example {

constructor() {

this.name = “John Smith”;

}

}

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

ANGULAR VS ANGULARJS

DEMO

#ChanderDhall.com

devconnections

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Standards ComplianceLibrary/Framework Compliance Non-Compliance

Aurelia HTML, ES 2016, Web

Components

Polymer HTML, ES 2015, Web

Components

Ember HTML, ES 2015

Angular 2 ES 2016 (TS) NG2 Markup, Dart

Angular 1 HTML, ES5 Modules, DI

React ES 2015 JSX

Library/Framework Compliance Non-Compliance

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Separation of ConcernsRating Frameworks/Libraries

Excellent Aurelia, Ember

Moderate Angular 1

Poor Angular 2, Polymer

N/A React

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Ember: Separation of Concerns

• The router manages application state

• Models encapsulate the application’s data

• Controllers communicate between a model and a

template

• Templates define the html to render

• Views handle DOM interaction

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

ObtrusivenessRating Frameworks/Libraries

Obtrusive React, Angular 1,

Angular 2

Average Polymer, Ember

Unobtrusive Aurelia

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

InteroperabilityRating Frameworks/Libraries

Very Interoperable Aurelia, Ember

Average Angular 1, Polymer

High Friction Angular 2

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

CommunityGitHub Stars Contributors

Angular 50,577

Angular 2 13771 302

React 45,163 741

Ember 16,475 599

Aurelia 6,669 37

Polymer 15,426 84

Dated July 11, 2016

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Corporate SupportRating Frameworks/Libraries

Committed Aurelia, Ember, Angular

Not Committed Angular 1, Polymer,

React

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

LicensingMIT BSD

Angular 1, Angular 2,

Aurelia, Ember

Polymer, React *

Both have patent

clause

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Real Advice

(Not in the slide deck – Come see me ☺)

MV* FRAMEWORKS – WHAT’S THE FUTURE AND WHAT’S THE BEST FOR YOU?

Recap

• Do you really need a Single Page App?

• Which is the best framework for your

company?

• What’s a futuristic strategy for Javascript?

• How does my company qualify for FREE

consulting?