Frameworks in 2015

Andrey Listochkin

@listochkingithub.com/listochkingithub.com/dev-ua

Frameworks in 2015

@listochkinfrontendua.im

2015

AngularEmberReact

MVC

MV*

*V*

***

Architecture

BIG Apps

GMail ~2007 800k

Your App Today ~1.5m

Frameworks Matter

bootstrapserverDOMdata

3rd-party...

Write It By Hand

Ecosystems

Ember Ember Data Ember CLI Ember Inspector Ember Deploy LiquidFire EmberFire Ember Paper

Embervs

React

Ember Ecosystemvs

React Ecosystem

Missing Piece?

Abandon

Wait

Implement

and Share

Dynamics of Ecosystems

Dynamics ofOpen Source

Done == Dead

jQuery

Backbone

It Works!

All Bugs Fixed

No one wants it :(

Reinvent

Refactor

Bikeshed

Change!

Abandon

Batman JSSpine

KnockoutCan JS

DurandalJavaScript MVC

Wait

Ember FastBoot

Angular 2

Mixins in React

Implement

Builds

Ember CLI

Grunt vs Gulp

Browserify vs Webpack

Test’em vs Karma

Selenium vs Protractor

and Share

Gold Rush

Young Ecosystems

React Flux

493 results for 'flux'

https://www.npmjs.com/search?q=flux

We've found 1,276 repository results

https://github.com/search?q=flux&l=JavaScript&type=Repositorie

s

Facebook Flux Reflux Fluxxor Fluxible by Yahoo Alt Flummox Marty.js McFly Lux Fynx Fluxy

Rivalry

AngularStrapvs

UI Bootstrap

Unification

Ember CLI Deploy

3 projects

merged into one

6 core contributors

925 packageshttp://www.emberaddons.com/

Open Sourceis HARD

Github starsGreen BadgesGreat Docs

Big Early AdoptersAPI compatibilityIssues Triaging

Dynamics

forced to change

missing pieces

great artists stealSteve Jobs

Pablo PicassoIgor StravinskyWilliam Faulkner

T. S. EliotW. H. Davenport Adams

common future

Predictto

Future-proof

framework-agnosticarchitecture

since summer 2013

architecture=

decisions

code

tools

dependencies

code

spacial

components

YUI 2007

Widgets

Angular Directive

2009

custom elements

Twitter FlightJanuary 31, 2013

Modern Components

data downevents up

React sans vDOM

PolymerMay 16, 2013

<stock-badge ticket=”msft” range=”yoy” chart=”linear”>

ReactMay 29, 2013

Ember 1.0 rc8Aug 29, 2013

Ember Components

Rethinking Best Practices

video Oct 30, 2013

components

dumb vs smart

dumbUI-only

No dependenciesNo domain state

dumb is good

double wrap

smart wraps dumb

higher-order components

Route-driven Views

Nested UI

global UI statevs

local UI state

Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'

Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'

Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'

Router.map -> @route 'talk/new', path: 'talks/new' @route 'schedule', { path: 'talks' }, -> @route 'talk', path: ':talk_id'

{{outlet}}

components =

tags

outlets =

iframes

shallow hierarchies

UI-only components

livereloadability

share

Router +

Components

Route Handlerloads data

handles actions

Componentshows DOM

DOM events => actionsmanages children

Router + Components

got a form?write a

component!even when you don’t reuse

Ember

controllersviews

components++

Angular

smallest controllers possible

directives++

angular 1.4 router

UI router

React

react-router

depth

MVC

“easy”

Backbone

ModelsSync

Data binding

better

Identity

Unidirectional Data flow

immutability+FP

CQRS

Operation Transforms

Offline Mode

distributed systems

Battlefield

flux

flux in any framework

Monadic DataDependenciesDeclaration

GraphQL

Write-Only DOM

Ember Glimmer

JSX as a Data Structure

future

ES6

ES.Next + addons

@Decoratorsasync

type annotationsJSX

@Stateful({ initialize (props) { return { count: 0 }; }, reducers: { increment (props, state) { return { count: state.count + 1 }; } }})class Counter { static propTypes = { count: PropTypes.number.isRequired, increment: PropTypes.func.isRequired }; render () { const { count, increment } = this.props; return ( <button onClick={increment}> Pressed {count} times. </button> ) }}

class MyComponent extends HTMLElement { ...}

AureliaAngular 2.0

ReactEmber

tools

Ember CLI

BuildTest RunnerDependenciesDev ServerGenerators

Addons

generators

tool enforces conventions

AngularReact

ReactHot Loader

live reload++

Ember Inspector

Render TreeRouting

Data ExplorerDI ContainerDeprecations

PromisesPerformance

ChromeFirefox

IESafari

dependencies

ember install:addon liquid-fire

componentlibrary

build steptool...

testing

UI tests

visit('talks/new');fillIn('input.title', 'My Cool Talk');click('button.submit');andThen(() => { equal( find('ul.talks li:last').text(), 'My Cool Talk');});

Selenium

“Native”

pluggablerenderers

jQueryvs

Zepto

DOMvs

Cocoa, QT

Native UIJS for App and

Network

Rolling Releases

challenges

Angular 2 React EmberRouter y y y

Components y y y

ES.next y y y

vDOM w y w

FP+immutable n w w

monadic declarations n w n

Data n w y

Asset Pipeline n n y

Addons n n y

UI testing n n y

Browser Tools n n y

Hot Reload n y n

Isomorphic w y w

Native n y n

Rolling Releases n n y

Ember Productivity

ReactInnovation

AngularPopularity

you don’t have to be productive, innovative, or popular to be successful

@listochkinfrontendua.im