Javascript Worflow Evolution

Lorenzo Sicilia - @aboutlo

javascript workflow

evolution

Hi, I’m Lorenzo SiciliaCurrently …

as co-founder

the graphic recording marketplace - explainer videos, e-learning pills, micro-contents, presentations & more -

as dev

London

Milan

PREVIOUSLY ( < 2009 )

12

TOOLS

13

Mainly JS as Enhancement

14

Then

JSConf on November 8, 2009 by Ryan Dahl

In 2011, a JS package manager

15

EVOLUTION of the web

17

package Managers

BowerNPM jspm

18

Modules / bundler- commonjs, amd, es6 modules-

SystemJS

19

PIPELINE - manage complexity-

Gulp BroccoliGrunt NPM

20

Scaffolding - easy bootstrap-

Yeoman / Grunt Slush / Gulp

21

TRANSPILERS

ES5

ES7

TODAY

NEXT

22

SYNTAX Checkers

New

Old

23

Pre-processor (css)

postcss

24

TEsting

Services

Tools

Karma Selenium

Rainforest

jest

frameworks

jasmine

25

DEPLOY • source mapping (css, js) • local testing

DEVelopmeNt

Testing

STAGING / PRODUCTION

• source mapping (css, js) • CI testing

• gzip • uglify • css minifier • image compression • asset revisioning

a js dirty secret

27

SINGLE PAGE APP - as first citizen in JS Community -

28

SPA - FACTS checking-

CONS

PROS

• More complexity (ie. memory leak, ) • Javascript MUST be enabled • Linking becomes an issue • Analytics aren't trivial • SEO implications

• Once loaded faster • Better UX • Strict separation of concerns (API)

29

MULTIMPLE PAGE APP - as so boring citizen in JS community-

30

CONS

PROS

• two languages ( client / server ) • two business logic

• Content is the king • Simpler • SEO friendly • URL friendly

MPA - FACTS checking-

The NEW KID on THE BLOCK

Isomorphic APPJavascript code that run on both client and server

34

Isomorphic APP

CONS

PROS• Performance (initial page-load speed) • Maintainability (promote sharing code client / server ) • Progressive enhancements easier (JS not mandatory ) • SEO friendly

• Complex :) • A lot of moving parts

35

Isomorphic ARCHITECTURE

36

A JS BUILD should Handles:• runtime dependencies • build dependencies • bundle JS (uglify) • bundle CSS (minification) • modules loading • testing • multi env client deploy • multi env server deploy ( isomorphic only ) • env settings • image optimization • prepare fonts / icons

SHOW ME THE CODE !!!

SPA ( voicemap player ) - grunt -

aka configuration

https://github.com/aboutlo/gulp-starter-kit

SPA - GULP -

aka programmable pipeline / stream

https://github.com/aboutlo/reactic-hoover

SPA EXPERIMENT - webpack + react + flux -

https://github.com/gpbl/isomorphic500

ISOMORPHIC APP - webpack + react + flux -

TAKE AWAyWHAT I’m using

+

autoprefixer

TAKE AWAyWHAT I’m STUDING

+

postcss

TAKE AWAyARCHITECTURE

• Node as presentation server • Invest on the build system • Isomorphic via React.renderToString

Lorenzo Sicilia - @aboutlo

javascript workflow

evolution