SPA frameworks
SPA JS FRAMEWORK ROUNDUP
SPA frameworks
Flux
SPA frameworks
CONTENT
๏ How to choose
๏ Overview
๏ Under microscope
๏ What to choose
๏ Technologies on the horizon
How to Choose
HOW TO CHOOSE
How to Choose
SPA FRAMEWORKS
๏ App vs Site
๏ Framework vs toolset
๏ Project context
How to Choose
CRITERIA๏ Aims& Philosophies
๏ Abstractions
๏ Learning curve
๏ Build& Dev tools
๏ Testability
๏ Performance
๏ Implementations of modules
๏ models
๏ controllers
๏ views
๏ routes
๏ template
๏ components
Overview
OVERVIEW
Overview
IN COMMON
๏ Open-sourced
๏ MIT licensed
๏ Mature and widely used
๏ Strong community support
๏ Big player backed
Overview
STATS
Metric AngularJSBackbone.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
Overview
PHILOSOPHIES: ANGULAR
Angular is not a framework, it’s an HTML compiler - Misko Hevery, creator of Angular
AngularJS is a toolset for building the framework most suited to your application development -AngularJS Homepage
Overview
PHILOSOPHIES: ANGULAR
๏ Provide low level primitives
๏ data-binding on POJO
๏ dependency injection
๏ Declarative HTML
๏ Leave high level abstraction to devs
Overview
PHILOSOPHIES: EMBER
Ember.js is a framework for creating ambitious web application - Ember.js Homepage
Overview
PHILOSOPHIES: EMBER
๏ Embrace high level abstractions
๏ Framework encapsulation
๏ Conventions over configurations
๏ Framework classes over vanilla primitives
Overview
PHILOSOPHIES: BACKBONE
Backbone is an attempt to discover the minimal set of data-structuring and user interface primitives…and a tool that gives you the freedom to design the full experience of your web application.
- Backbone.js Homepage
Overview
PHILOSOPHIES: BACKBONE
๏ Toolset than Full-stack Framework
๏ Minimalism
๏ DIY& BYO
Overview
PHILOSOPHIES: REACT + FLUX
We built React to solve one problem: building large applications with data that changes over time. -React.js Homepage
Flux is a system architecture that promotes single directional data flow through an application. - Tom Occhino, Engineering Manager at Facebook
Overview
PHILOSOPHIES: REACT
๏ UI Responsiveness
๏ Performant rendering
๏ Reusable components
๏ Immutable data
Overview
PHILOSOPHIES: FLUX
๏ Unidirectional data flow
๏ feature development scalability
Overview
ARCHITECTURE:MVC/ MV*
Overview
ARCHITECTURE:FLUX
Under Microscope
UNDER MICROSCOPE
SPA frameworks
Flux
ANGULAR VS EMBER: TO POJO OR NOT TO
POJO
Under Microscope
ANGULAR VS EMBER: TO POJO OR NOT TO
POJO
Under Microscope
ANGULAR VS EMBER: TO POJO OR NOT TO
POJO
Under Microscope
PROS& CONS OF POJO
Under Microscope
๏ Gentler Learning curve at start
๏ Shallower stack trace
๏ Dirty check for data-binding work for all POJO
PROS& CONS OF POJO
Under Microscope
๏ Solid skills on JS, familiar with native gotchas
๏ Dirty check performance on massive list
๏ Steeper learning curve afterward
PROS& CONS OF ENHANCED CLASS
Under Microscope
๏ OO pattern
๏ Uniform Access Principle with accessor
๏ accessor enable proxy pattern
Under Microscope
๏ Steeper Learning curve at start
๏ Big Framework code base
๏ Extra stack trace
PROS& CONS OF ENHANCED CLASS
LEARNING CURVE MATTERS
Under Microscope
ANGULAR VS EMBER:DOM MANIPULATION
Under Microscope
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
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
ANGULAR VS EMBER: ROUTING
Under Microscope
Under Microscope
๏ Transitions between different states in the app.
๏ Finite state machines & hierarchical state machines
ANGULAR VS EMBER: ROUTING
Under Microscope
ANGULAR VS EMBER: ROUTING
Under Microscope
ANGULAR VS EMBER: ROUTING
Under Microscope
ANGULAR VS EMBER: ROUTING
ANGULAR VS EMBER: TEMPLATING
Under Microscope
Under Microscope
ANGULAR VS EMBER: TEMPLATING
๏ Declarative HTML
๏ Directives
๏ Expressions
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>
WITH GREAT POWER COMES GREAT
RESPONSIBILITY.
Under Microscope
ANGULAR VS EMBER: TESTABILITY
Under Microscope
Under Microscope
ANGULAR VS EMBER: TESTABILITY
Under Microscope
ANGULAR VS EMBER: TESTABILITY
ANGULAR VS EMBER: PERFORMANCE
Under Microscope
Under Microscope
ANGULAR VS EMBER: PERFORMANCE
๏ minified gzipped js asset
๏ Bootstrapping and overhead
๏ List rendering
๏ Dirty check on massive POJO
Under Microscope
BACKBONE.JS๏ Minimal
Toolset
๏ Underscore.js & jQuery
๏ Modules
๏ events
๏ models
๏ collections
๏ router
๏ views
Under Microscope
Under Microscope
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
REACT.JS
๏ Separate state change and immutable data
๏ Re-render the whole component when state changes
Under Microscope
HOW RE-RENDERING EVERYTHING CAN BE
PERFORMANT?
Under Microscope
VIRTUAL DOM TO RESCUE.
Under Microscope
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
Under Microscope
Flux
FLUX: 2-WAY BINDING IS EVIL
๏ Cascading updates
๏ Unpredictable view presentations
Under Microscope
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
FLUX: UNIDIRECTIONAL
DATA FLOW
Under Microscope
FLUX: DISPATCHER
๏ Action receiver
๏ Traffic control
๏ Store registries
๏ Store dependencies
Under Microscope
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
FLUX: VIEWS
๏ Hierarchical structure
๏ Data flow down the chain
๏ Trigger actions from user interaction
Under Microscope
WHAT TO CHOOSE
What to Choose
๏ Mature dev team with solid skill
๏ Build your own framework
๏ Abstractions on domain
๏ Vanilla primitive lover
๏ Gentler learning curve at start
What to Choose
๏ Best practice& conventions
๏ Enhanced classes
๏ Steeper learning curve at start
๏ Familiar with Rails conventions
๏ Restful backend API (e.g. Rails)
What to Choose
๏ Understand the project growth boundary
๏ DIY for fun, BYO from scratch
๏ Learn from backbone + underscore codebase
What to Choose
๏ React for high performant component
๏ Flux for sophisticated presentation logic
๏ Devs live on the edge
What to Choose
Flux
ON THE HORIZON
On the Horizon
WEB COMPONENT๏ Composability Encapsulation
Reusability
๏ Techniques:
๏ Custom Elements
๏ HTML Templates
๏ Shadow DOM
๏ HTML import
On the Horizon
VIRTUAL DOM
๏ Implementations inspired by React
๏ Ember employs simple-dom for `FastBoot`
On the Horizon
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
ES6 PROMISE๏ Represents the result of an async
operation.
๏ Pending/ Fulfilled/ Rejected/ Settled
On the Horizon
ES6 PROMISE
On the Horizon
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
ES7 OBJECT.OBSERVE()
On the Horizon
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
Q& A
SPA frameworks
THANKS!
SPA frameworks
Top Related