Download - Comparing Hot Javascript Frameworks
![Page 1: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/1.jpg)
Photos by
Comparing Hot JavaScript FrameworksMatt Raible • http://raibledesigns.com
![Page 2: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
Web Developer and UI Architect
Montanan, Father, Husband, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
![Page 3: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/3.jpg)
What about You?How long have you been programming in JavaScript?
Do you remember IE6?
Are you a Java Developer?
Do you run and test your apps in Chrome?
What JavaScript Frameworks do you use?
![Page 4: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/4.jpg)
So where’s the Spring MVC in all of this?
![Page 5: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/5.jpg)
What’s the best framework in JavaScript Land?
![Page 6: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/6.jpg)
Let’s look at the last time I talked about web frameworks… Feb 2014
![Page 7: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/7.jpg)
Early 2013
![Page 8: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/8.jpg)
![Page 9: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/9.jpg)
Too many web frameworks?
![Page 10: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/10.jpg)
Remember SOFEA?
![Page 11: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/11.jpg)
SOFEA became a Reality
![Page 12: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/12.jpg)
SOFEA Performance Issues
![Page 13: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/13.jpg)
traditional web frameworks are still relevant
![Page 14: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/14.jpg)
traditional web frameworks are still relevant
![Page 15: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/15.jpg)
server-side rendering is still relevant
![Page 16: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/16.jpg)
server-side rendering is still relevant
![Page 17: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/17.jpg)
server-side rendering is still relevant
![Page 18: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/18.jpg)
The Paradox of Choice
![Page 19: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/19.jpg)
Good Decisions Involve
1. Figure out your goal or goals 2. Evaluate the importance of each goal 3. Array the options 4. Evaluate how likely each of the options is to meet your goals 5. Pick the winning option 6. Modify goals
![Page 20: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/20.jpg)
Maximizer vs. Satisficer
‣ maximizer - tries to make best possible choice ‣ satisficer - tries to find first suitable choice
(Photo: Tori Cat at Flickr)
![Page 21: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/21.jpg)
There’s only three choices here!
![Page 22: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/22.jpg)
The Real Problem
![Page 23: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/23.jpg)
‣ 2006: Choose based on the type of app you’re developing ‣ 2010: Choose based on 20 different criteria (the Matrix) ‣ 2013: Narrowed it to 6
- Community / Support - HTML5 - REST - Mobile - Performance - Page Speed
How to Constrain Choices
![Page 24: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/24.jpg)
2015: Why would you limit your choices?
![Page 25: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/25.jpg)
Learn as much as you can, everyday.
![Page 26: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/26.jpg)
Why should you care?
![Page 27: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/27.jpg)
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
![Page 28: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/28.jpg)
![Page 29: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/29.jpg)
![Page 30: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/30.jpg)
“If I have seen further than others, it is by standing upon the
shoulders of giants.” Sir Isaac Newton
![Page 31: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/31.jpg)
www.hello-startup.nettwitter.com/brikis98
Node vs. Play Framework
![Page 32: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/32.jpg)
The Framework ScorecardAngular Ember React
1. Learn
2. Develop
3. Test
4. Secure
5. Build
6. Deploy
7. Debug
8. Scale
9. Maintain
10. Share
![Page 33: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/33.jpg)
For each feature, we’ll discuss…
1 Much worse than most frameworks
5 About the same as most frameworks
10 Much better than most frameworks
![Page 34: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/34.jpg)
The History of AngularJSStarted by Miško Hevery in 2009
GWT = 3 developers, 6 months
AngularJS = 1 developer, 3 weeks
Learn more:https://www.youtube.com/watch?v=X0VsStcCCM8
![Page 35: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/35.jpg)
![Page 36: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/36.jpg)
The History of Ember.jsSproutCore was initially created in 2007 by Sproutit
In June 2010, the creator of SproutCore, Charles Jolley, left Apple to start Strobe
Strobe acquired by Facebook in November 2011
In December 2011, the SproutCore 2.0 framework was renamed to Ember.js
Founded by Yehuda Katz
![Page 37: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/37.jpg)
The History of ReactReact was created by Jordan Walke
Inspired by XHP, an HTML components framework for PHP
Open sourced in May 2013
Within one year, had large sites
Khan Academy, New York Times, Airbnb
+ Facebook and Instagram
![Page 38: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/38.jpg)
![Page 39: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/39.jpg)
Angular Ember React
1. Learn
2. Develop
3. Test
4. Secure
5. Build
![Page 40: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/40.jpg)
Angular: Hello World
![Page 41: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/41.jpg)
![Page 42: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/42.jpg)
![Page 43: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/43.jpg)
![Page 44: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/44.jpg)
![Page 45: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/45.jpg)
![Page 46: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/46.jpg)
![Page 47: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/47.jpg)
Learning Angular: API Docs
![Page 48: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/48.jpg)
Learning Angular: Videos
![Page 49: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/49.jpg)
Learning Angular: Videos
![Page 50: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/50.jpg)
Learning Angular: Books
![Page 51: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/51.jpg)
Learning Angular: ng-bookwww.ng-book.com
Book and source: $39
Book, source and videos: $79
Team License: $299
![Page 52: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/52.jpg)
Learning Angular: Stack Overflow
![Page 53: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/53.jpg)
Angular Ember React
1. Learn 10 2. Develop
3. Test
4. Secure
5. Build
![Page 54: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/54.jpg)
Angular Ember React
1. Learn 10 2. Develop
3. Test
4. Secure
5. Build
![Page 55: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/55.jpg)
Ember: Hello World
http://guides.emberjs.com/v2.0.0/getting-started/
npm install -g ember-cli npm install -g phantomjs2 ember new my-new-app cd my-new-app ember server
![Page 56: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/56.jpg)
Ember: Hello World
http://gilesbowkett.blogspot.com/2013/04/a-hello-world-in-emberjs.html
<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.2/ember.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.0.2/ember-template-compiler.js"></script> <script> var App = Ember.Application.create(); </script> </head> <body> <script type="text/x-handlebars" data-template-name='index'> <p>Hello Ember!</p> </script> </body> </html>
![Page 57: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/57.jpg)
![Page 58: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/58.jpg)
<div> <label>Name:</label> {{input type="text" value=name placeholder="Enter your name"}} </div> <div class="text"> <h3>My name is {{name}} and I want to learn Ember!</h3> </div>
![Page 59: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/59.jpg)
![Page 60: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/60.jpg)
Learning Ember: API Docs
![Page 61: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/61.jpg)
Learning Ember: Guides
![Page 62: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/62.jpg)
Learning Ember: VideosNo lessons on Egghead.io
www.emberscreencasts.com
emberwatch.com
Talks, Screencasts, Podcasts,
Tutorials, Books, Cookbook
![Page 63: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/63.jpg)
Learning Ember: Books
![Page 64: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/64.jpg)
Learning Ember: Stack Overflow
![Page 65: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/65.jpg)
Angular Ember React
1. Learn 10 6 2. Develop
3. Test
4. Secure
5. Build
![Page 66: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/66.jpg)
React: Hello World<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
![Page 67: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/67.jpg)
React: Hello World
![Page 68: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/68.jpg)
React: Hello {name} without JSX
![Page 69: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/69.jpg)
![Page 70: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/70.jpg)
Learning React: API Docs
![Page 71: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/71.jpg)
Learning React: Videos
![Page 72: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/72.jpg)
Learning React: Videos
![Page 73: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/73.jpg)
Learning React: Videos
https://egghead.io/series/react-fundamentals
![Page 74: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/74.jpg)
Learning React: Books
![Page 75: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/75.jpg)
Learning React: Books (Coming Soon)
![Page 76: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/76.jpg)
Learning React: Stack Overflow
![Page 77: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/77.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop
3. Test
4. Secure
5. Build
![Page 78: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/78.jpg)
Interesting: Stack Overflow Top Questions
![Page 79: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/79.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop
3. Test
4. Secure
5. Build
![Page 80: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/80.jpg)
RoutingRESTful routing
Extracts query and path params
ngRoute by default
De-facto: ui-router
Nested Routes
RESTful routing
Extracts query and path params
Uses conventions
Nested routes
Wildcards
No routing, only V
Director used in TodoMVC example
React Router 2x more popular
Inspired by Ember
![Page 81: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/81.jpg)
Routing with ngRouteangular.module('todomvc', ['ngRoute']) .config(function ($routeProvider) { 'use strict';
var routeConfig = { controller: 'TodoCtrl', templateUrl: 'todomvc-index.html', resolve: { store: function (todoStorage) { // Get the correct module (API or localStorage) } } };
$routeProvider .when('/', routeConfig) .when('/:status', routeConfig) .otherwise({ redirectTo: '/' }); });
![Page 82: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/82.jpg)
Routing with Ember(function () { 'use strict';
Todos.Router.map(function () { this.resource('todos', { path: '/' }, function () { this.route('active'); this.route('completed'); }); });
Todos.TodosRoute = Ember.Route.extend({ model: function () { return this.store.find('todo'); } });
Todos.TodosIndexRoute = Todos.TodosRoute.extend({ templateName: 'todo-list', controllerName: 'todos-list' });
// Todos.TodosActiveRoute & Todos.TodosCompletedRoute })();
![Page 83: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/83.jpg)
Routing with Directorvar TodoApp = React.createClass({ getInitialState: function () { return { nowShowing: app.ALL_TODOS, editing: null }; },
componentDidMount: function () { var setState = this.setState; var router = Router({ '/': setState.bind(this, {nowShowing: app.ALL_TODOS}), '/active': setState.bind(this, {nowShowing: app.ACTIVE_TODOS}), '/completed': setState.bind(this, {nowShowing: app.COMPLETED_TODOS}) }); router.init('/'); },
// lots of event handlers and render() });
![Page 84: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/84.jpg)
TemplatesHTML5 Templates
Angular-specific elements and attributes
Directives, EL, filters and forms
Handlebars
HTML-like DSL
Defined in <script> tags
Helpers
JSX or JS
JSX: Similar to E4X
Namespaced Components
JavaScript Expressions
![Page 85: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/85.jpg)
Templates <body ng-app="todomvc"> <ng-view />
<script type="text/ng-template" id="todomvc-index.html"> <section id="todoapp"> <header id="header"> <h1>todos</h1> <form id="todo-form" ng-submit="addTodo()"> <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" ng-disabled="saving" autofocus> </form> </header> <section id="main" ng-show="todos.length" ng-cloak> <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
![Page 86: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/86.jpg)
Templates<script type="text/x-handlebars" data-template-name="todo-list"> {{#if length}} <section id="main"> {{#if canToggle}} {{input type="checkbox" id="toggle-all" checked=allTodos.allAreDone}} {{/if}} <ul id="todo-list"> {{#each}} <li {{bind-attr class="isCompleted:completed isEditing:editing"}}> {{#if isEditing}} {{todo-input type="text" class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}} {{else}} {{input type="checkbox" class="toggle" checked=isCompleted}} <label {{action "editTodo" on="doubleClick"}}>{{title}}</label> <button {{action "removeTodo"}} class="destroy"></button> {{/if}} </li> {{/each}}
![Page 87: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/87.jpg)
Templates<script type="text/x-handlebars" data-template-name="todo-list"> {{#if length}} <section id="main"> {{#if canToggle}} {{input type="checkbox" id="toggle-all" checked=allTodos.allAreDone}} {{/if}} <ul id="todo-list"> {{#each}} <li {{bind-attr class="isCompleted:completed isEditing:editing"}}> {{#if isEditing}} {{todo-input type="text" class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}} {{else}} {{input type="checkbox" class="toggle" checked=isCompleted}} <label {{action "editTodo" on="doubleClick"}}>{{title}}</label> <button {{action "removeTodo"}} class="destroy"></button> {{/if}} </li> {{/each}}
![Page 88: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/88.jpg)
Templatesif (todos.length) { main = ( <section className="main"> <input className="toggle-all" type="checkbox" onChange={this.toggleAll} checked={activeTodoCount === 0} /> <ul className="todo-list"> {todoItems} </ul> </section> ); }
![Page 89: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/89.jpg)
Templatesif (todos.length) { main = (...); }
return ( <div> <header className="header"> <h1>todos</h1> <input ref="newField" className="new-todo" placeholder="What needs to be done?" onKeyDown={this.handleNewTodoKeyDown} autoFocus={true} /> </header> {main} {footer} </div> );
![Page 90: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/90.jpg)
i18ni18n/l10n for date, number and currency filters
angular-translate
No built-in i18n
i18n-js
ember-i18n
No built-in i18n
react-intl
Format.js
Components, MixIns, Relative Times
![Page 91: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/91.jpg)
i18ni18n/l10n for date, number and currency filters
angular-translate
No built-in i18n
i18n-js
ember-i18n
ember-intl
No built-in i18n
react-intl
Format.js
Components, MixIns, Relative Times
![Page 92: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/92.jpg)
Form Binding and Validation2-way data-bindingwith ngModel
Validation services provided
CSS classes for invalid, required, touched, dirty, etc.
1 or 2-way binding
DS.Errors
No UI Validation
ember-validations
Ember EasyForm
Ember Forms
Form Components and Events
propTypes in dev
react-validation-mixin
formsy-react
![Page 93: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/93.jpg)
LOC in examples/angularjs
------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- Javascript 11 2715 15432 12005 CSS 2 75 5 439 HTML 1 1 0 74 JSON 1 0 0 16 ------------------------------------------------------------------------------- SUM: 15 2791 15437 12534 -------------------------------------------------------------------------------
![Page 94: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/94.jpg)
LOC in examples/emberjs
------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- Javascript 14 14574 26513 43031 CSS 2 75 5 439 HTML 1 0 0 88 JSON 1 0 0 11 ------------------------------------------------------------------------------- SUM: 18 14649 26518 43569 -------------------------------------------------------------------------------
![Page 95: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/95.jpg)
LOC in examples/react
------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- Javascript 6 4783 9359 24530 CSS 2 75 5 439 HTML 1 2 3 26 JSON 1 0 0 9 ------------------------------------------------------------------------------- SUM: 10 4860 9367 25004 -------------------------------------------------------------------------------
![Page 96: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/96.jpg)
LOC in TodoMVC
0
12500
25000
37500
50000
Angular Ember React
![Page 97: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/97.jpg)
Files in TodoMVC
0
4
7
11
14
Angular Ember React
![Page 98: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/98.jpg)
Files in TodoMVC
0
4
7
11
14
Angular Ember React
![Page 99: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/99.jpg)
Starter Kits
150K 77K 225K
![Page 100: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/100.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 6 5 3. Test
4. Secure
5. Build
![Page 101: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/101.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 10 8 9 3. Test
4. Secure
5. Build
![Page 102: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/102.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test
4. Secure
5. Build
-1Experience Bias
![Page 103: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/103.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test
4. Secure
5. Build
![Page 104: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/104.jpg)
R.addons.TestUtils
Jest
Shallow Rendering
Mocha + Chai + JSDOM
react-testing
TestingKarma
Jasmine
angular-mocks
Protractor
QUnit
Testem
ember test
Acceptance Tests
ember generate acceptance-test <name>
![Page 105: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/105.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure
5. Build
![Page 106: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/106.jpg)
What tool do you use to test JavaScript?
http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
0%
15%
30%
45%
60%
Don't u
se on
e
Mocha
Jasm
ineQUnit
Tape
Jest
Karma
Intern
Other
2%0.77%0.92%1.54%2.16%3.54%
15.56%16.64%
56.86%
![Page 107: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/107.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure
5. Build
![Page 108: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/108.jpg)
Security
CSRF
XSS
CSP
Auth
Advisories
![Page 109: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/109.jpg)
Security
CSRF
XSS
CSP
Auth
Advisories
![Page 110: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/110.jpg)
CSRF
XSS
CSP
Auth
Advisories
Security
![Page 111: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/111.jpg)
![Page 112: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/112.jpg)
Node Advisories
![Page 113: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/113.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 7 8 4 5. Build
![Page 115: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/115.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 7 8 4 5. Build
![Page 116: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/116.jpg)
What task runner do you prefer using?
http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
Other4.00%NPM
3.50%
Don't use one16.20%
Broccoli0.60%
Grunt26.70%
Gulp49.00%
![Page 117: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/117.jpg)
BuildingGrunt / Gulp
Browserify
Webpack
Bower and NPM
Ember CLI
Broccoli-powered asset pipeline
Addon System
Bower and NPM
React Starter Kit
react-tools
Browserify
Webpack
![Page 118: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/118.jpg)
BuildingGrunt / Gulp
Browserify
Webpack
Bower and NPM
Ember CLI
Broccoli-powered asset pipeline
Addon System
Bower and NPM
React Starter Kit
react-tools
Babel
Browserify
Webpack
![Page 119: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/119.jpg)
Angular Ember React
1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 7 8 4 5. Build 9 10 9
![Page 120: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/120.jpg)
Angular Ember React
6. Deploy
7. Debug
8. Scale
9. Maintain
10. Share
![Page 121: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/121.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug
8. Scale
9. Maintain
10. Share
![Page 122: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/122.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug
8. Scale
9. Maintain
10. Share
![Page 123: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/123.jpg)
DebuggingDebug from the DOM
$log service
Chrome and debugger
Angular Batarang
LOG_TRANSITIONS
LOG_*
Handlebar Helpers
Ember Inspector
React Dev Tools
Pretty Diff
react-debug
![Page 124: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/124.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale
9. Maintain
10. Share
![Page 125: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/125.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale
9. Maintain
10. Share
![Page 126: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/126.jpg)
TodoMVC Benchmark
https://github.com/evancz/todomvc-perf-comparison/
![Page 127: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/127.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain
10. Share
![Page 129: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/129.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 10 9. Maintain
10. Share
![Page 130: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/130.jpg)
What about Isomorphic JavaScript?
![Page 131: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/131.jpg)
What about Isomorphic JavaScript?
![Page 132: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/132.jpg)
What about Universal JavaScript?
![Page 133: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/133.jpg)
Server-Side Rendering Support
![Page 134: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/134.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain
10. Share
![Page 135: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/135.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9-1 7 9 9. Maintain
10. Share
![Page 136: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/136.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 7+1 9 9. Maintain
10. Share
![Page 137: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/137.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 9+2 9. Maintain
10. Share
![Page 138: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/138.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain
10. Share
![Page 139: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/139.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain
10. Share
![Page 140: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/140.jpg)
![Page 141: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/141.jpg)
var foo = ["10", "10", "10"]; foo.map(parseInt); // Returns [ 10, NaN, 2 ]
[] + [] // "" [] + {} // {} {} + [] // 0 {} + {} // NaN
var a = {}; a[[]] = 2; alert(a[""]); // alerts 2
alert(Array(16).join("wat" - 1) + " Batman!");
https://www.destroyallsoftware.com/talks/wat
![Page 142: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/142.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 10 9. Maintain 3 5 4 10. Share
![Page 143: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/143.jpg)
JS Error Monitoring
Track:js
New Relic Browser
Raygun
Bugsnag
JS Monitor
Qbaka
![Page 144: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/144.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 10 9. Maintain 3 5 4 10. Share
![Page 145: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/145.jpg)
GitHub: ContributorsC
ontri
buto
rs
0
350
700
1050
1400
Angular Ember React
September 9, 2015
![Page 146: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/146.jpg)
GitHub: WatchersW
atch
ers
0
1000
2000
3000
4000
Angular Ember React
September 9, 2015
![Page 147: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/147.jpg)
GitHub: StarsSt
ars
0
12500
25000
37500
50000
Angular Ember React
September 9, 2015
![Page 148: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/148.jpg)
GitHub: ForksFo
rks
0
5000
10000
15000
20000
Angular Ember React
September 9, 2015
![Page 149: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/149.jpg)
GitHub: Pull RequestsPu
ll Re
ques
ts
0
100
200
300
400
Angular Ember React
September 9, 2015
![Page 150: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/150.jpg)
Stack Overflow
119.5K 16.5K 5K
![Page 151: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/151.jpg)
Google Group: Members
18K 2K
![Page 153: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/153.jpg)
Commercial Support
![Page 154: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/154.jpg)
Who’s Using in Productionmadewithangular
Google Trends and Analytics
Amazon
Forbes
MSNBC
builtwithember.io
Apple Music
emberjs.com/ember-users
Yahoo
Square
![Page 155: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/155.jpg)
Candidates: LinkedIn
0
50000
100000
150000
200000
Angular Ember React
![Page 156: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/156.jpg)
Jobs: LinkedIn
0
1000
2000
3000
4000
Angular Ember React
![Page 157: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/157.jpg)
Jobs: Career Builder
0
150
300
450
600
Angular Ember React
![Page 158: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/158.jpg)
Indeed Trends
![Page 159: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/159.jpg)
Angular Ember React
6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 10 9. Maintain 3 5 4 10. Share 10 10 10
![Page 160: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/160.jpg)
The Framework ScorecardAngular Ember React
1. Learn 10 6 8
2. Develop 9 8 9
3. Test 8 9 8
4. Secure 7 8 4
5. Build 9 10 9
6. Deploy 10 10 10
7. Debug 7 10 7
8. Scale 9 7 10
9. Maintain 3 5 4
10. Share 10 10 10
![Page 161: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/161.jpg)
The Framework ScorecardAngular Ember React
1. Learn 10 6 8
2. Develop 9 8 9
3. Test 8 9 8
4. Secure 7 8 4
5. Build 9 10 9
6. Deploy 10 10 10
7. Debug 7 10 7
8. Scale 9 7 10
9. Maintain 3 5 4
10. Share 10 10 10
Total 82 83 79
![Page 162: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/162.jpg)
The Framework ScorecardAngular Ember React
1. Learn 10 6 8
2. Develop 9 8 9
3. Test 8 9 8
4. Secure 7 8 4
5. Build 9 10 9
6. Deploy 10 10 10
7. Debug 7 10 7
8. Scale 9 7 10
9. Maintain 3 5 4
10. Share 10 10 10
Total 82 10 79
![Page 163: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/163.jpg)
The Framework ScorecardAngular Ember React
1. Learn 10 6 8
2. Develop 9 8 9
3. Test 8 9 8
4. Secure 7 8 4
5. Build 9 10 9
6. Deploy 10 10 10
7. Debug 7 10 7
8. Scale 9 7 10
9. Maintain 3 5 4
10. Share 10 10 10
Total 82 10 79
![Page 164: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/164.jpg)
These are just my opinions!
![Page 165: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/165.jpg)
And you know what they say about opinions!
![Page 166: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/166.jpg)
Discuss: when should you use x?
![Page 167: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/167.jpg)
Discuss: when should you not use x?
![Page 170: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/170.jpg)
Action!Don’t be afraid to try new things
Learn JavaScript
Try one of these frameworks
Form your own opinions
Or just wait a few months…
![Page 171: Comparing Hot Javascript Frameworks](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5889e75d1a28ab32458b5391/html5/thumbnails/171.jpg)
Contact Informationhttp://raibledesigns.com
@mraible
Presentationshttp://slideshare.net/mraible
Codehttp://github.com/mraible
Questions?