Javascript Workflow Evolution

Slide 1

Slide 1 text

Lorenzo Sicilia - @aboutlo javascript  workflow evolution

Slide 2

Slide 2 text

Hi, I’m Lorenzo Sicilia  Currently …

Slide 3

Slide 3 text

as co-founder

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

as dev

Slide 6

Slide 6 text

London Milan

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

PREVIOUSLY ( < 2009 )

Slide 12

Slide 12 text

12 TOOLS

Slide 13

Slide 13 text

13 Mainly JS as Enhancement

Slide 14

Slide 14 text

14 Then JSConf on November 8, 2009 by Ryan Dahl In 2011, a JS package manager

Slide 15

Slide 15 text

15 EVOLUTION of the web

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

17 package Managers Bower NPM jspm

Slide 18

Slide 18 text

18 Modules / bundler  - commonjs, amd, es6 modules- SystemJS

Slide 19

Slide 19 text

19 PIPELINE - manage complexity- Gulp Broccoli Grunt NPM

Slide 20

Slide 20 text

20 Scaffolding - easy bootstrap- Yeoman / Grunt Slush / Gulp

Slide 21

Slide 21 text

21 TRANSPILERS ES5 ES7 TODAY NEXT

Slide 22

Slide 22 text

22 SYNTAX Checkers New Old

Slide 23

Slide 23 text

23 Pre-processor (css) postcss

Slide 24

Slide 24 text

24 TEsting Services Tools Karma Selenium Rainforest jest frameworks jasmine

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

a js dirty secret

Slide 27

Slide 27 text

27 SINGLE PAGE APP - as first citizen in JS Community -

Slide 28

Slide 28 text

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)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 CONS PROS • two languages ( client / server ) • two business logic • Content is the king • Simpler • SEO friendly • URL friendly MPA - FACTS checking-

Slide 31

Slide 31 text

The NEW KID on THE BLOCK

Slide 32

Slide 32 text

Isomorphic APP Javascript code that run on both client and server

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35 Isomorphic ARCHITECTURE

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

SHOW ME THE CODE !!!

Slide 38

Slide 38 text

SPA ( voicemap player ) - grunt - aka configuration

Slide 39

Slide 39 text

https://github.com/aboutlo/gulp-starter-kit SPA - GULP - aka programmable pipeline / stream

Slide 40

Slide 40 text

https://github.com/aboutlo/reactic-hoover SPA EXPERIMENT - webpack + react + flux -

Slide 41

Slide 41 text

https://github.com/gpbl/isomorphic500 ISOMORPHIC APP - webpack + react + flux -

Slide 42

Slide 42 text

TAKE AWAy WHAT I’m using + autoprefixer

Slide 43

Slide 43 text

TAKE AWAy WHAT I’m STUDING + postcss

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Lorenzo Sicilia - @aboutlo javascript  workflow evolution