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