Single Page Application JS Framework Round up
•Download as PPTX, PDF•
1 like•703 views
This document provides an overview and comparison of single-page application (SPA) frameworks including Angular, Ember, Backbone, and React. It discusses how to choose a framework based on factors like aims, philosophies, learning curve, and implementations of modules. Key differences between frameworks are examined like their approaches to data binding, routing, templating, testability and performance. Emerging technologies on the horizon that may impact frameworks are also covered such as web components, virtual DOM, and ES7 Object.observe().
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Single Page Application JS Framework Round up
Similar to Single Page Application JS Framework Round up (20)
Recently uploaded
Recently uploaded (20)
Single Page Application JS Framework Round up
- 3. SPA frameworks CONTENT ๏ How to choose ๏ Overview ๏ Under microscope ๏ What to choose ๏ Technologies on the horizon
- 4. How to Choose HOW TO CHOOSE
- 5. How to Choose SPA FRAMEWORKS ๏ App vs Site ๏ Framework vs toolset ๏ Project context
- 6. How to Choose CRITERIA ๏ Aims& Philosophies ๏ Abstractions ๏ Learning curve ๏ Build& Dev tools ๏ Testability ๏ Performance ๏ Implementations of modules ๏ models ๏ controllers ๏ views ๏ routes ๏ template ๏ components
- 8. Overview IN COMMON ๏ Open-sourced ๏ MIT licensed ๏ Mature and widely used ๏ Strong community support ๏ Big player backed
- 9. Overview STATS Metric AngularJS Backbone.js Ember.js React.js Stars on Github 38k 21k 14k 21k Third-Party Modules 1384 modules 249 backplugs 947 addons ~100 StackOverflow Questions 110k 20k 22k 6k GitHub Contributors 1232 256 479 394
- 10. Overview PHILOSOPHIES: ANGULAR Angular is not a framework, it’s an HTML compiler - Misko Hevery, creator of Angular ding the framework most suited to your application develo
- 11. Overview PHILOSOPHIES: ANGULAR ๏ Provide low level primitives ๏ data-binding on POJO ๏ dependency injection ๏ Declarative HTML ๏ Leave high level abstraction to devs
- 12. Overview PHILOSOPHIES: EMBER ramework for creating ambitious web application - Ember
- 13. Overview PHILOSOPHIES: EMBER ๏ Embrace high level abstractions ๏ Framework encapsulation ๏ Conventions over configurations ๏ Framework classes over vanilla primitives
- 14. Overview PHILOSOPHIES: BACKBONE pt to discover the minimal set of data-structuring and user ves you the freedom to design the full experience of your - Backbone.js Homepage
- 15. Overview PHILOSOPHIES: BACKBONE ๏ Toolset than Full-stack Framework ๏ Minimalism ๏ DIY& BYO
- 16. Overview PHILOSOPHIES: REACT + FLUX oblem: building large applications with data that changes o single directional data flow through an application. - Tom
- 17. Overview PHILOSOPHIES: REACT ๏ UI Responsiveness ๏ Performant rendering ๏ Reusable components ๏ Immutable data
- 18. Overview PHILOSOPHIES: FLUX ๏ Unidirectional data flow ๏ feature development scalability
- 23. ANGULAR VS EMBER: TO POJO OR NOT TO POJO Under Microscope
- 24. ANGULAR VS EMBER: TO POJO OR NOT TO POJO Under Microscope
- 25. ANGULAR VS EMBER: TO POJO OR NOT TO POJO Under Microscope
- 26. PROS& CONS OF POJO Under Microscope ๏ Gentler Learning curve at start ๏ Shallower stack trace ๏ Dirty check for data-binding work for all POJO
- 27. PROS& CONS OF POJO Under Microscope ๏ Solid skills on JS, familiar with native gotchas ๏ Dirty check performance on massive list ๏ Steeper learning curve afterward
- 28. PROS& CONS OF ENHANCED CLASS Under Microscope ๏ OO pattern ๏ Uniform Access Principle with accessor ๏ accessor enable proxy pattern
- 29. Under Microscope ๏ Steeper Learning curve at start ๏ Big Framework code base ๏ Extra stack trace PROS& CONS OF ENHANCED CLASS
- 31. ANGULAR VS EMBER: DOM MANIPULATION Under Microscope
- 32. Under Microscope ๏ Angular directive gives you maximal, granular control over behavioural configuration of DOM manipulation. ๏ {restrict: ‘E/A’ , replace: true, scope: {foo: ‘bar’}} ng-transclustion ๏ http://jsfiddle.net/qy7Bt/247/ ANGULAR VS EMBER: DOM MANIPULATION
- 33. Under Microscope ๏ Ember components, Ember.Component is an element-restricted, isolate-scoped, transcluded directive. ๏ A component is a subclass of view for composability, share ability, reusability ๏ http://jsbin.com/dotowereda/2/edit?html, js,output ANGULAR VS EMBER: DOM MANIPULATION
- 34. ANGULAR VS EMBER: ROUTING Under Microscope
- 35. Under Microscope ๏ Transitions between different states in the app. ๏ Finite state machines & hierarchical state machines ANGULAR VS EMBER: ROUTING
- 36. Under Microscope ANGULAR VS EMBER: ROUTING
- 37. Under Microscope ANGULAR VS EMBER: ROUTING
- 38. Under Microscope ANGULAR VS EMBER: ROUTING
- 39. ANGULAR VS EMBER: TEMPLATING Under Microscope
- 40. Under Microscope ANGULAR VS EMBER: TEMPLATING ๏ Declarative HTML ๏ Directives ๏ Expressions
- 41. Under Microscope ANGULAR VS EMBER: TEMPLATING ๏ Handlebar template ๏ Helper ๏ No expression in template {{highlight name}} // this helper generates the following <span class=“highlight">Peter</span>
- 42. WITH GREAT POWER COMES GREAT RESPONSIBILITY. Under Microscope
- 43. ANGULAR VS EMBER: TESTABILITY Under Microscope
- 44. Under Microscope ANGULAR VS EMBER: TESTABILITY
- 45. Under Microscope ANGULAR VS EMBER: TESTABILITY
- 46. ANGULAR VS EMBER: PERFORMANCE Under Microscope
- 47. Under Microscope ANGULAR VS EMBER: PERFORMANCE ๏ minified gzipped js asset ๏ Bootstrapping and overhead ๏ List rendering ๏ Dirty check on massive POJO
- 48. Under Microscope
- 49. BACKBONE.JS ๏ Minimal Toolset ๏ Underscore.js & jQuery ๏ Modules ๏ events ๏ models ๏ collections ๏ router ๏ views Under Microscope
- 50. Under Microscope
- 51. REACT.JS ๏ DOM rendering performance ๏ Reusable component ๏ re-thinking on web presentation ๏ State management is hard ๏ Data changing over time is the root of all evil Under Microscope
- 52. REACT.JS ๏ Separate state change and immutable data ๏ Re-render the whole component when state changes Under Microscope
- 53. HOW RE-RENDERING EVERYTHING CAN BE PERFORMANT? Under Microscope
- 54. VIRTUAL DOM TO RESCUE. Under Microscope
- 55. REACT.JS ๏ Javascript is Fast, native DOM is slow ๏ Construct virtual DOMs and diff ๏ Perform minimal changes on native DOM ๏ Beyond HTML DOM Under Microscope
- 57. FLUX: 2-WAY BINDING IS EVIL ๏ Cascading updates ๏ Unpredictable view presentations Under Microscope
- 58. FLUX: UNIDIRECTIONAL DATA FLOW ๏ Use explicit data instead of derived data ๏ Separate data from view state ๏ Avoid cascading effects by preventing nested updates Under Microscope
- 60. FLUX: DISPATCHER ๏ Action receiver ๏ Traffic control ๏ Store registries ๏ Store dependencies Under Microscope
- 61. FLUX: STORES ๏ Manage states of a particular domain ๏ state of a domain, not of one model or collection ๏ Broadcast state changes ๏ Provide view explicit data Under Microscope
- 62. FLUX: VIEWS ๏ Hierarchical structure ๏ Data flow down the chain ๏ Trigger actions from user interaction Under Microscope
- 63. WHAT TO CHOOSE What to Choose
- 64. ๏ Mature dev team with solid skill ๏ Build your own framework ๏ Abstractions on domain ๏ Vanilla primitive lover ๏ Gentler learning curve at start What to Choose
- 65. ๏ Best practice& conventions ๏ Enhanced classes ๏ Steeper learning curve at start ๏ Familiar with Rails conventions ๏ Restful backend API (e.g. Rails) What to Choose
- 66. ๏ Understand the project growth boundary ๏ DIY for fun, BYO from scratch ๏ Learn from backbone + underscore codebase What to Choose
- 67. ๏ React for high performant component ๏ Flux for sophisticated presentation logic ๏ Devs live on the edge What to Choose Flux
- 68. ON THE HORIZON On the Horizon
- 69. WEB COMPONENT ๏ Composability Encapsulation Reusability ๏ Techniques: ๏ Custom Elements ๏ HTML Templates ๏ Shadow DOM ๏ HTML import On the Horizon
- 70. VIRTUAL DOM ๏ Implementations inspired by React ๏ Ember employs simple-dom for `FastBoot` On the Horizon
- 71. SERVER-SIDE RENDERING ๏ Overhead for large app ๏ Render depends on devises ๏ Render for crawler, cURL, or non-JS env ๏ Virtual DOM requires no Browser Runtime ๏ Browser runtime in Node.js On the Horizon
- 72. ES6 PROMISE ๏ Represents the result of an async operation. ๏ Pending/ Fulfilled/ Rejected/ Settled On the Horizon
- 73. ES6 PROMISE On the Horizon
- 74. ES6 PROMISE ๏ Ember’s RSVP.js is an implementation of Promise ๏ Angular’s $q conform to Promise spec ๏ Flux encourage use Promise On the Horizon
- 76. ES7 OBJECT.OBSERVE() ๏ No drity checking for data-binding ๏ Performance guaranteed by Native runtime ๏ Angular receives a great performance boost ๏ Ember& Backbone can utilise native support On the Horizon