Successfully reported this slideshow.

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - SpringOne 2GX 2015

103

Share

•
Sep. 17, 2015
• 103 likes • 68,489 views
Upcoming SlideShare
Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
Loading in …3
×
1 of 170
1 of 170

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - SpringOne 2GX 2015

Sep. 17, 2015
• 103 likes • 68,489 views

103

Share

Download to read offline

Description

JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard.

Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react

Transcript

  1. 1. Photos by Comparing Hot JavaScript Frameworks Matt Raible • http://raibledesigns.com
  2. 2. 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
  3. 3. 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?
  4. 4. So where’s the Spring MVC in all of this?
  5. 5. What’s the best framework in JavaScript Land?
  6. 6. Let’s look at the last time I talked about web frameworks… Feb 2014
  7. 7. Early 2013
  8. 8. Too many web frameworks?
  9. 9. Remember SOFEA?
  10. 10. SOFEA became a Reality
  11. 11. SOFEA Performance Issues
  12. 12. traditional web frameworks are still relevant
  13. 13. traditional web frameworks are still relevant
  14. 14. server-side rendering is still relevant
  15. 15. server-side rendering is still relevant
  16. 16. server-side rendering is still relevant
  17. 17. The Paradox of Choice
  18. 18. 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
  19. 19. Maximizer vs. Satisficer ‣ maximizer - tries to make best possible choice ‣ satisficer - tries to find first suitable choice (Photo: Tori Cat at Flickr)
  20. 20. There’s only three choices here!
  21. 21. The Real Problem
  22. 22. ‣ 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
  23. 23. 2015: Why would you limit your choices?
  24. 24. Learn as much as you can, everyday.
  25. 25. Why should you care?
  26. 26. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
  27. 27. “If I have seen further than others, it is by standing upon the shoulders of giants.”
 Sir Isaac Newton
  28. 28. www.hello-startup.net twitter.com/brikis98 Node vs. Play Framework
  29. 29. The Framework Scorecard Angular Ember React 1. Learn 2. Develop 3. Test 4. Secure 5. Build 6. Deploy 7. Debug 8. Scale 9. Maintain 10. Share
  30. 30. 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
  31. 31. The History of AngularJS Started 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
  32. 32. The History of Ember.js SproutCore 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
  33. 33. The History of React React 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
  34. 34. Angular Ember React 1. Learn 2. Develop 3. Test 4. Secure 5. Build
  35. 35. Angular: Hello World
  36. 36. Learning Angular: API Docs
  37. 37. Learning Angular: Videos
  38. 38. Learning Angular: Videos
  39. 39. Learning Angular: Books
  40. 40. Learning Angular: ng-book www.ng-book.com Book and source: $39 Book, source and videos: $79 Team License: $299
  41. 41. Learning Angular: Stack Overflow
  42. 42. Angular Ember React 1. Learn 10 2. Develop 3. Test 4. Secure 5. Build
  43. 43. Angular Ember React 1. Learn 10 2. Develop 3. Test 4. Secure 5. Build
  44. 44. 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
  45. 45. 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>
  46. 46. <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>
  47. 47. Learning Ember: API Docs
  48. 48. Learning Ember: Guides
  49. 49. Learning Ember: Videos No lessons on Egghead.io www.emberscreencasts.com emberwatch.com Talks, Screencasts, Podcasts, Tutorials, Books, Cookbook
  50. 50. Learning Ember: Books
  51. 51. Learning Ember: Stack Overflow
  52. 52. Angular Ember React 1. Learn 10 6 2. Develop 3. Test 4. Secure 5. Build
  53. 53. 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>
  54. 54. React: Hello World
  55. 55. React: Hello {name} without JSX
  56. 56. Learning React: API Docs
  57. 57. Learning React: Videos
  58. 58. Learning React: Videos
  59. 59. Learning React: Videos https://egghead.io/series/react-fundamentals
  60. 60. Learning React: Books
  61. 61. Learning React: Books (Coming Soon)
  62. 62. Learning React: Stack Overflow
  63. 63. Angular Ember React 1. Learn 10 6 8 2. Develop 3. Test 4. Secure 5. Build
  64. 64. Interesting: Stack Overflow Top Questions
  65. 65. Angular Ember React 1. Learn 10 6 8 2. Develop 3. Test 4. Secure 5. Build
  66. 66. Routing RESTful 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
  67. 67. Routing with ngRoute angular.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: '/' }); });
  68. 68. 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 })();
  69. 69. Routing with Director var 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() });
  70. 70. Templates HTML5 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
  71. 71. 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}">
  72. 72. 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}}
  73. 73. 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}}
  74. 74. Templates if (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> ); }
  75. 75. Templates if (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> );
  76. 76. i18n i18n/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
  77. 77. i18n i18n/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
  78. 78. Form Binding and Validation 2-way data-binding
 with 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
  79. 79. 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 -------------------------------------------------------------------------------
  80. 80. 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 -------------------------------------------------------------------------------
  81. 81. 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 -------------------------------------------------------------------------------
  82. 82. LOC in TodoMVC 0 12500 25000 37500 50000 Angular Ember React
  83. 83. Files in TodoMVC 0 4 7 11 14 Angular Ember React
  84. 84. Files in TodoMVC 0 4 7 11 14 Angular Ember React
  85. 85. Starter Kits 150K 77K 225K
  86. 86. Angular Ember React 1. Learn 10 6 8 2. Develop 9 6 5 3. Test 4. Secure 5. Build
  87. 87. Angular Ember React 1. Learn 10 6 8 2. Develop 10 8 9 3. Test 4. Secure 5. Build
  88. 88. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 4. Secure 5. Build -1 Experience Bias
  89. 89. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 4. Secure 5. Build
  90. 90. R.addons.TestUtils Jest Shallow Rendering Mocha + Chai + JSDOM react-testing Testing Karma Jasmine angular-mocks Protractor QUnit Testem ember test Acceptance Tests ember generate acceptance-test <name>
  91. 91. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 5. Build
  92. 92. What tool do you use to test JavaScript? http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results 0% 15% 30% 45% 60% Don'tuse one M ocha Jasm ine Q U nit Tape Jest Karm a Intern O ther 2%0.77%0.92%1.54%2.16%3.54% 15.56%16.64% 56.86%
  93. 93. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 5. Build
  94. 94. Security CSRF XSS CSP Auth Advisories
  95. 95. Security CSRF XSS CSP Auth Advisories
  96. 96. CSRF XSS CSP Auth Advisories Security
  97. 97. Node Advisories
  98. 98. 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
  99. 99. https://code.google.com/p/mustache-security/
  100. 100. 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
  101. 101. What task runner do you prefer using? http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results Other 4.00%NPM 3.50% Don't use one 16.20% Broccoli 0.60% Grunt 26.70% Gulp 49.00%
  102. 102. Building Grunt / Gulp Browserify Webpack Bower and NPM Ember CLI Broccoli-powered asset pipeline Addon System Bower and NPM React Starter Kit react-tools Browserify Webpack
  103. 103. Building Grunt / 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
  104. 104. 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
  105. 105. Angular Ember React 6. Deploy 7. Debug 8. Scale 9. Maintain 10. Share
  106. 106. Angular Ember React 6. Deploy 10 10 10 7. Debug 8. Scale 9. Maintain 10. Share
  107. 107. Angular Ember React 6. Deploy 10 10 10 7. Debug 8. Scale 9. Maintain 10. Share
  108. 108. Debugging Debug from the DOM $log service Chrome and debugger Angular Batarang LOG_TRANSITIONS LOG_* Handlebar Helpers Ember Inspector React Dev Tools Pretty Diff react-debug
  109. 109. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9. Maintain 10. Share
  110. 110. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9. Maintain 10. Share
  111. 111. TodoMVC Benchmark https://github.com/evancz/todomvc-perf-comparison/
  112. 112. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain 10. Share
  113. 113. apple.com/music
  114. 114. What about Isomorphic JavaScript?
  115. 115. What about Isomorphic JavaScript?
  116. 116. What about Universal JavaScript?
  117. 117. Server-Side Rendering Support
  118. 118. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain 10. Share
  119. 119. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9-1 7 9 9. Maintain 10. Share
  120. 120. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 7+1 9 9. Maintain 10. Share
  121. 121. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 9+2 9. Maintain 10. Share
  122. 122. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain 10. Share
  123. 123. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain 10. Share
  124. 124. 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
  125. 125. 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
  126. 126. JS Error Monitoring Track:js New Relic Browser Raygun Bugsnag JS Monitor Qbaka
  127. 127. 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
  128. 128. GitHub: ContributorsContributors 0 350 700 1050 1400 Angular Ember React September 9, 2015
  129. 129. GitHub: WatchersWatchers 0 1000 2000 3000 4000 Angular Ember React September 9, 2015
  130. 130. GitHub: StarsStars 0 12500 25000 37500 50000 Angular Ember React September 9, 2015
  131. 131. GitHub: ForksForks 0 5000 10000 15000 20000 Angular Ember React September 9, 2015
  132. 132. GitHub: Pull Requests PullRequests 0 100 200 300 400 Angular Ember React September 9, 2015
  133. 133. Stack Overflow 119K 16.5K 5K
  134. 134. Google Group: Members 18K 2K
  135. 135. Addons, according to npmjs.org 4085 52992249
  136. 136. Commercial Support
  137. 137. Who’s Using in Production madewithangular Google Trends and Analytics Amazon Forbes MSNBC builtwithember.io Apple Music emberjs.com/ember- users Yahoo Square
  138. 138. Candidates: LinkedIn 0 50000 100000 150000 200000 Angular Ember React
  139. 139. Jobs: LinkedIn 0 1000 2000 3000 4000 Angular Ember React
  140. 140. Jobs: Career Builder 0 150 300 450 600 Angular Ember React
  141. 141. Indeed Trends
  142. 142. 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
  143. 143. The Framework Scorecard 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 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
  144. 144. The Framework Scorecard 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 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
  145. 145. The Framework Scorecard 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 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
  146. 146. The Framework Scorecard 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 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
  147. 147. These are just my opinions!
  148. 148. And you know what they say about opinions!
  149. 149. Discuss: when should you use x?
  150. 150. Discuss: when should you not use x?
  151. 151. 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…
  152. 152. Contact Information http://raibledesigns.com @mraible Presentations http://slideshare.net/mraible Code http://github.com/mraible Questions?
Technology

Description

JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard.

Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react

Transcript

  1. 1. Photos by Comparing Hot JavaScript Frameworks Matt Raible • http://raibledesigns.com
  2. 2. 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
  3. 3. 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?
  4. 4. So where’s the Spring MVC in all of this?
  5. 5. What’s the best framework in JavaScript Land?
  6. 6. Let’s look at the last time I talked about web frameworks… Feb 2014
  7. 7. Early 2013
  8. 8. Too many web frameworks?
  9. 9. Remember SOFEA?
  10. 10. SOFEA became a Reality
  11. 11. SOFEA Performance Issues
  12. 12. traditional web frameworks are still relevant
  13. 13. traditional web frameworks are still relevant
  14. 14. server-side rendering is still relevant
  15. 15. server-side rendering is still relevant
  16. 16. server-side rendering is still relevant
  17. 17. The Paradox of Choice
  18. 18. 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
  19. 19. Maximizer vs. Satisficer ‣ maximizer - tries to make best possible choice ‣ satisficer - tries to find first suitable choice (Photo: Tori Cat at Flickr)
  20. 20. There’s only three choices here!
  21. 21. The Real Problem
  22. 22. ‣ 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
  23. 23. 2015: Why would you limit your choices?
  24. 24. Learn as much as you can, everyday.
  25. 25. Why should you care?
  26. 26. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
  27. 27. “If I have seen further than others, it is by standing upon the shoulders of giants.”
 Sir Isaac Newton
  28. 28. www.hello-startup.net twitter.com/brikis98 Node vs. Play Framework
  29. 29. The Framework Scorecard Angular Ember React 1. Learn 2. Develop 3. Test 4. Secure 5. Build 6. Deploy 7. Debug 8. Scale 9. Maintain 10. Share
  30. 30. 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
  31. 31. The History of AngularJS Started 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
  32. 32. The History of Ember.js SproutCore 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
  33. 33. The History of React React 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
  34. 34. Angular Ember React 1. Learn 2. Develop 3. Test 4. Secure 5. Build
  35. 35. Angular: Hello World
  36. 36. Learning Angular: API Docs
  37. 37. Learning Angular: Videos
  38. 38. Learning Angular: Videos
  39. 39. Learning Angular: Books
  40. 40. Learning Angular: ng-book www.ng-book.com Book and source: $39 Book, source and videos: $79 Team License: $299
  41. 41. Learning Angular: Stack Overflow
  42. 42. Angular Ember React 1. Learn 10 2. Develop 3. Test 4. Secure 5. Build
  43. 43. Angular Ember React 1. Learn 10 2. Develop 3. Test 4. Secure 5. Build
  44. 44. 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
  45. 45. 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>
  46. 46. <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>
  47. 47. Learning Ember: API Docs
  48. 48. Learning Ember: Guides
  49. 49. Learning Ember: Videos No lessons on Egghead.io www.emberscreencasts.com emberwatch.com Talks, Screencasts, Podcasts, Tutorials, Books, Cookbook
  50. 50. Learning Ember: Books
  51. 51. Learning Ember: Stack Overflow
  52. 52. Angular Ember React 1. Learn 10 6 2. Develop 3. Test 4. Secure 5. Build
  53. 53. 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>
  54. 54. React: Hello World
  55. 55. React: Hello {name} without JSX
  56. 56. Learning React: API Docs
  57. 57. Learning React: Videos
  58. 58. Learning React: Videos
  59. 59. Learning React: Videos https://egghead.io/series/react-fundamentals
  60. 60. Learning React: Books
  61. 61. Learning React: Books (Coming Soon)
  62. 62. Learning React: Stack Overflow
  63. 63. Angular Ember React 1. Learn 10 6 8 2. Develop 3. Test 4. Secure 5. Build
  64. 64. Interesting: Stack Overflow Top Questions
  65. 65. Angular Ember React 1. Learn 10 6 8 2. Develop 3. Test 4. Secure 5. Build
  66. 66. Routing RESTful 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
  67. 67. Routing with ngRoute angular.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: '/' }); });
  68. 68. 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 })();
  69. 69. Routing with Director var 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() });
  70. 70. Templates HTML5 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
  71. 71. 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}">
  72. 72. 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}}
  73. 73. 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}}
  74. 74. Templates if (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> ); }
  75. 75. Templates if (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> );
  76. 76. i18n i18n/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
  77. 77. i18n i18n/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
  78. 78. Form Binding and Validation 2-way data-binding
 with 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
  79. 79. 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 -------------------------------------------------------------------------------
  80. 80. 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 -------------------------------------------------------------------------------
  81. 81. 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 -------------------------------------------------------------------------------
  82. 82. LOC in TodoMVC 0 12500 25000 37500 50000 Angular Ember React
  83. 83. Files in TodoMVC 0 4 7 11 14 Angular Ember React
  84. 84. Files in TodoMVC 0 4 7 11 14 Angular Ember React
  85. 85. Starter Kits 150K 77K 225K
  86. 86. Angular Ember React 1. Learn 10 6 8 2. Develop 9 6 5 3. Test 4. Secure 5. Build
  87. 87. Angular Ember React 1. Learn 10 6 8 2. Develop 10 8 9 3. Test 4. Secure 5. Build
  88. 88. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 4. Secure 5. Build -1 Experience Bias
  89. 89. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 4. Secure 5. Build
  90. 90. R.addons.TestUtils Jest Shallow Rendering Mocha + Chai + JSDOM react-testing Testing Karma Jasmine angular-mocks Protractor QUnit Testem ember test Acceptance Tests ember generate acceptance-test <name>
  91. 91. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 5. Build
  92. 92. What tool do you use to test JavaScript? http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results 0% 15% 30% 45% 60% Don'tuse one M ocha Jasm ine Q U nit Tape Jest Karm a Intern O ther 2%0.77%0.92%1.54%2.16%3.54% 15.56%16.64% 56.86%
  93. 93. Angular Ember React 1. Learn 10 6 8 2. Develop 9 8 9 3. Test 8 9 8 4. Secure 5. Build
  94. 94. Security CSRF XSS CSP Auth Advisories
  95. 95. Security CSRF XSS CSP Auth Advisories
  96. 96. CSRF XSS CSP Auth Advisories Security
  97. 97. Node Advisories
  98. 98. 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
  99. 99. https://code.google.com/p/mustache-security/
  100. 100. 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
  101. 101. What task runner do you prefer using? http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results Other 4.00%NPM 3.50% Don't use one 16.20% Broccoli 0.60% Grunt 26.70% Gulp 49.00%
  102. 102. Building Grunt / Gulp Browserify Webpack Bower and NPM Ember CLI Broccoli-powered asset pipeline Addon System Bower and NPM React Starter Kit react-tools Browserify Webpack
  103. 103. Building Grunt / 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
  104. 104. 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
  105. 105. Angular Ember React 6. Deploy 7. Debug 8. Scale 9. Maintain 10. Share
  106. 106. Angular Ember React 6. Deploy 10 10 10 7. Debug 8. Scale 9. Maintain 10. Share
  107. 107. Angular Ember React 6. Deploy 10 10 10 7. Debug 8. Scale 9. Maintain 10. Share
  108. 108. Debugging Debug from the DOM $log service Chrome and debugger Angular Batarang LOG_TRANSITIONS LOG_* Handlebar Helpers Ember Inspector React Dev Tools Pretty Diff react-debug
  109. 109. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9. Maintain 10. Share
  110. 110. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9. Maintain 10. Share
  111. 111. TodoMVC Benchmark https://github.com/evancz/todomvc-perf-comparison/
  112. 112. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain 10. Share
  113. 113. apple.com/music
  114. 114. What about Isomorphic JavaScript?
  115. 115. What about Isomorphic JavaScript?
  116. 116. What about Universal JavaScript?
  117. 117. Server-Side Rendering Support
  118. 118. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9 7 9 9. Maintain 10. Share
  119. 119. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 9-1 7 9 9. Maintain 10. Share
  120. 120. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 7+1 9 9. Maintain 10. Share
  121. 121. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 9+2 9. Maintain 10. Share
  122. 122. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain 10. Share
  123. 123. Angular Ember React 6. Deploy 10 10 10 7. Debug 7 10 7 8. Scale 8 8 10 9. Maintain 10. Share
  124. 124. 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
  125. 125. 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
  126. 126. JS Error Monitoring Track:js New Relic Browser Raygun Bugsnag JS Monitor Qbaka
  127. 127. 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
  128. 128. GitHub: ContributorsContributors 0 350 700 1050 1400 Angular Ember React September 9, 2015
  129. 129. GitHub: WatchersWatchers 0 1000 2000 3000 4000 Angular Ember React September 9, 2015
  130. 130. GitHub: StarsStars 0 12500 25000 37500 50000 Angular Ember React September 9, 2015
  131. 131. GitHub: ForksForks 0 5000 10000 15000 20000 Angular Ember React September 9, 2015
  132. 132. GitHub: Pull Requests PullRequests 0 100 200 300 400 Angular Ember React September 9, 2015
  133. 133. Stack Overflow 119K 16.5K 5K
  134. 134. Google Group: Members 18K 2K
  135. 135. Addons, according to npmjs.org 4085 52992249
  136. 136. Commercial Support
  137. 137. Who’s Using in Production madewithangular Google Trends and Analytics Amazon Forbes MSNBC builtwithember.io Apple Music emberjs.com/ember- users Yahoo Square
  138. 138. Candidates: LinkedIn 0 50000 100000 150000 200000 Angular Ember React
  139. 139. Jobs: LinkedIn 0 1000 2000 3000 4000 Angular Ember React
  140. 140. Jobs: Career Builder 0 150 300 450 600 Angular Ember React
  141. 141. Indeed Trends
  142. 142. 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
  143. 143. The Framework Scorecard 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 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
  144. 144. The Framework Scorecard 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 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
  145. 145. The Framework Scorecard 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 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
  146. 146. The Framework Scorecard 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 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
  147. 147. These are just my opinions!
  148. 148. And you know what they say about opinions!
  149. 149. Discuss: when should you use x?
  150. 150. Discuss: when should you not use x?
  151. 151. 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…
  152. 152. Contact Information http://raibledesigns.com @mraible Presentations http://slideshare.net/mraible Code http://github.com/mraible Questions?
Technology

Recommended

More Related Content

Slideshows for you

Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Matt Raible
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
jQuery Proven Performance Tips & Tricks
Addy Osmani
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
Choosing a Javascript Framework
All Things Open
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
The Modern Java Web Developer Bootcamp - Devoxx 2013
Matt Raible
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
GitBucket: The perfect Github clone by Scala
takezoe
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
How to make Ajax work for you
Simon Willison
Testing Angular 2 Applications - HTML5 Denver 2016
Matt Raible
Play vs Grails Smackdown - Devoxx France 2013
Matt Raible
React native
Mohammed El Rafie Tarabay
Web application development using Play Framework (with Java)
Saeed Zarinfam
CQ5 and Sling overview
Bertrand Delacretaz
React && React Native workshop
Stacy Goh

Viewers also liked

AngularJS + React
justvamp
Angular vs React: Building modern SharePoint interfaces with SPFx
Dimcho Tsanov
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
MarkupBox
Intake structures by RAHUL
Rahulpratap Singh
Disinfection
Anup Ghimire
Collection and Distribution of Water: Intakes
Divine Abaloyan
Sources of Water
Prashant Mahajan
Water sources
nazish66
Intake structures
Sachin PatiL
Filtration and disinfection of water
Vinod Kumar Nehta
Sources of water
CMA Himanshu Bahl
Disinfection of water
Ashwani Kumar
Water distribution system
Bibhabasu Mohanty
28737268 waste-water-treatment-ppt
abhiiii4558
Water presentation
melissa banguero
Collection and Conveyance of Water
GAURAV. H .TANDON
water treatment slides
Anand Keshri

Similar to Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - SpringOne 2GX 2015

Creating a full stack web app with python, npm, webpack and react
Angela Kristine Juvet Branaes
TechTalk #85 : Latest Frontend Technologies
bincangteknologi
Angular js workshop
Rolands Krumbergs
Intro to ReactJS
Harvard Web Working Group
The Ultimate Getting Started with Angular Workshop - Devoxx France 2017
Matt Raible
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
Getting Started With Angular
Stormpath
3 WAYS TO TEST YOUR COLDFUSION API -
Ortus Solutions, Corp
How do I write Testable Javascript
ColdFusionConference
Angular2 - In Action
Sebastian Pożoga
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
Crossing the Bridge: Connecting Rails and your Front-end Framework
Daniel Spector
Cross-Platform Mobile Development with Ionic Framework and Angular
Movel
Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)
MongoDB
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack
Love at first Vue
Dalibor Gogic
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
The Art of Angular in 2016 - vJUG24
Matt Raible
How to write Testable Javascript
ColdFusionConference
Intro to React | DreamLab Academy
DreamLab

More from Matt Raible

Reactive Java Microservices with Spring Boot and JHipster - Spring I/O 2022
Matt Raible
Comparing Native Java REST API Frameworks - Devoxx France 2022
Matt Raible
Lock That Sh*t Down! Auth Security Patterns for Apps, APIs, and Infra - Devne...
Matt Raible
Java REST API Framework Comparison - PWX 2021
Matt Raible
Web App Security for Java Developers - PWX 2021
Matt Raible
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Matt Raible
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Matt Raible
Web App Security for Java Developers - UberConf 2021
Matt Raible
Java REST API Framework Comparison - UberConf 2021
Matt Raible
Native Java with Spring Boot and JHipster - SF JUG 2021
Matt Raible
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Matt Raible
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Matt Raible
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Matt Raible
JHipster and Okta - JHipster Virtual Meetup December 2020
Matt Raible
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Matt Raible
Security Patterns for Microservice Architectures - SpringOne 2020
Matt Raible
Security Patterns for Microservice Architectures - ADTMag Microservices & API...
Matt Raible
Microservices for the Masses with Spring Boot, JHipster, and OAuth - South We...
Matt Raible
Security Patterns for Microservice Architectures - London Java Community 2020
Matt Raible
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
Matt Raible

Featured

What to Upload to SlideShare
SlideShare
Be A Great Product Leader (Amplify, Oct 2019)
Adam Nash
Trillion Dollar Coach Book (Bill Campbell)
Eric Schmidt
APIdays Paris 2019 - Innovation @ scale, APIs as Digital Factories' New Machi...
apidays
A few thoughts on work life-balance
Wim Vanderbauwhede
Is vc still a thing final
Mark Suster
The GaryVee Content Model
Gary Vaynerchuk
Mammalian Brain Chemistry Explains Everything
Loretta Breuning, PhD
Blockchain + AI + Crypto Economics Are We Creating a Code Tsunami?
Dinis Guarda
The AI Rush
Jean-Baptiste Dumont
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
10 facts about jobs in the future
Pew Research Center's Internet & American Life Project
Harry Surden - Artificial Intelligence and Law Overview
Harry Surden
Inside Google's Numbers in 2017
Rand Fishkin
Pinot: Realtime Distributed OLAP datastore
Kishore Gopalakrishna
How to Become a Thought Leader in Your Niche
Leslie Samuel
Visual Design with Data
Seth Familian
Designing Teams for Emerging Challenges
Aaron Irizarry
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ned Potter
Winners and Losers - All the (Russian) President's Men
Ian Bremmer

Related Books

Free with a 30 day trial from Scribd

See all
The Future Is Faster Than You Think: How Converging Technologies Are Transforming Business, Industries, and Our Lives Peter H. Diamandis
(4.5/5)
Free
From Gutenberg to Google: The History of Our Future Tom Wheeler
(3.5/5)
Free
SAM: One Robot, a Dozen Engineers, and the Race to Revolutionize the Way We Build Jonathan Waldman
(5/5)
Free
Talk to Me: How Voice Computing Will Transform the Way We Live, Work, and Think James Vlahos
(4/5)
Free
So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community That Will Listen Kristen Meinzer
(3.5/5)
Free
Bezonomics: How Amazon Is Changing Our Lives and What the World's Best Companies Are Learning from It Brian Dumaine
(4/5)
Free
No Filter: The Inside Story of Instagram Sarah Frier
(4.5/5)
Free
Autonomy: The Quest to Build the Driverless Car—And How It Will Reshape Our World Lawrence D. Burns
(5/5)
Free
Future Presence: How Virtual Reality Is Changing Human Connection, Intimacy, and the Limits of Ordinary Life Peter Rubin
(4/5)
Free
Live Work Work Work Die: A Journey into the Savage Heart of Silicon Valley Corey Pein
(4.5/5)
Free
Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Seth Stephens-Davidowitz
(4.5/5)
Free
Life After Google: The Fall of Big Data and the Rise of the Blockchain Economy George Gilder
(4/5)
Free
System Identification: Tutorials Presented at the 5th IFAC Symposium on Identification and System Parameter Estimation, F.R. Germany, September 1979 Elsevier Books Reference
(4/5)
Free
Energy Conservation in Buildings: The Achievement of 50% Energy Saving: An Environmental Challenge? Elsevier Books Reference
(4/5)
Free
Young Men and Fire: Twenty-fifth Anniversary Edition Norman Maclean
(4.5/5)
Free
The Victorian Internet: The Remarkable Story of the Telegraph and the Nineteenth Century's On-line Pioneers Tom Standage
(3.5/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
If Then: How the Simulmatics Corporation Invented the Future Jill Lepore
(4.5/5)
Free
A Brief History of Motion: From the Wheel, to the Car, to What Comes Next Tom Standage
(4.5/5)
Free
An Ugly Truth: Inside Facebook’s Battle for Domination Sheera Frenkel
(4.5/5)
Free
Spooked: The Trump Dossier, Black Cube, and the Rise of Private Spies Barry Meier
(4/5)
Free
Second Nature: Scenes from a World Remade Nathaniel Rich
(5/5)
Free
Test Gods: Virgin Galactic and the Making of a Modern Astronaut Nicholas Schmidle
(5/5)
Free
Driven: The Race to Create the Autonomous Car Alex Davies
(4.5/5)
Free
Dignity in a Digital Age: Making Tech Work for All of Us Ro Khanna
(4/5)
Free
Einstein's Fridge: How the Difference Between Hot and Cold Explains the Universe Paul Sen
(4.5/5)
Free
After Steve: How Apple Became a Trillion-Dollar Company and Lost its Soul Tripp Mickle
(4.5/5)
Free
User Friendly: How the Hidden Rules of Design Are Changing the Way We Live, Work, and Play Cliff Kuang
(4/5)
Free
Uncanny Valley: A Memoir Anna Wiener
(4/5)
Free
Blockchain: The Next Everything Stephen P. Williams
(4/5)
Free
Lean Out: The Truth About Women, Power, and the Workplace Marissa Orr
(4.5/5)
Free
A World Without Work: Technology, Automation, and How We Should Respond Daniel Susskind
(4.5/5)
Free
Bitcoin Billionaires: A True Story of Genius, Betrayal, and Redemption Ben Mezrich
(4.5/5)
Free

×