Javascript Workflow Evolution

Since 2009 the javascript workflow is changed a lot and more things are going to change soon. In this presentation I went through the available options to build SPA (Single Page App), MPA (Multiple Page App) and Universal / Isomorphic app using grunt, gulp, and webpack. Examples and take away in ;)

Transcript

1. Lorenzo Sicilia - @aboutlo javascript
 workflow evolution
2. Hi, I’m Lorenzo Sicilia
 Currently …
3. as co-founder
4. the graphic recording marketplace - explainer videos, e-learning pills, micro-contents, presentations & more -
5. as dev
6. London Milan
11. PREVIOUSLY ( < 2009 )
12. 12 TOOLS
13. 13 Mainly JS as Enhancement
14. 14 Then JSConf on November 8, 2009 by Ryan Dahl In 2011, a JS package manager
15. 15 EVOLUTION of the web
17. 17 package Managers Bower NPM jspm
18. 18 Modules / bundler
 - commonjs, amd, es6 modules- SystemJS
19. 19 PIPELINE - manage complexity- Gulp Broccoli Grunt NPM
20. 20 Scaffolding - easy bootstrap- Yeoman / Grunt Slush / Gulp
21. 21 TRANSPILERS ES5 ES7 TODAY NEXT
22. 22 SYNTAX Checkers New Old
23. 23 Pre-processor (css) postcss
24. 24 TEsting Services Tools Karma Selenium Rainforest jest frameworks jasmine
25. 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
26. a js dirty secret
27. 27 SINGLE PAGE APP - as first citizen in JS Community -
28. 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. 29 MULTIMPLE PAGE APP - as so boring citizen in JS community-
30. 30 CONS PROS • two languages ( client / server ) • two business logic • Content is the king • Simpler • SEO friendly • URL friendly MPA - FACTS checking-
31. The NEW KID on THE BLOCK
32. Isomorphic APP Javascript code that run on both client and server
34. 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. 35 Isomorphic ARCHITECTURE
36. 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
37. SHOW ME THE CODE !!!
38. SPA ( voicemap player ) - grunt - aka configuration
39. https://github.com/aboutlo/gulp-starter-kit SPA - GULP - aka programmable pipeline / stream
40. https://github.com/aboutlo/reactic-hoover SPA EXPERIMENT - webpack + react + flux -
41. https://github.com/gpbl/isomorphic500 ISOMORPHIC APP - webpack + react + flux -
42. TAKE AWAy WHAT I’m using + autoprefixer
43. TAKE AWAy WHAT I’m STUDING + postcss
44. TAKE AWAy ARCHITECTURE • Node as presentation server • Invest on the build system • Isomorphic via React.renderToString
45. Lorenzo Sicilia - @aboutlo javascript
 workflow evolution