Scaling to 1 Billion Hits A

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

• 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

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