Comparing Javascript Frameworks Chander Dhall Twitter @csdhall [email protected] 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? Angular2 import {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? @Component({ Angular 2 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 Compliance Library/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 Concerns Rating 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? Obtrusiveness Rating 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? Interoperability Rating 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? Community GitHub 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 Support Rating 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? Licensing MIT BSD Angular 1, Angular 2, Polymer, React * Aurelia, Ember 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? .