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 isomorphic app using grunt, gulp, and webpack. At the some examples and take away.

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
BowerNPM jspm

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

19. 19
PIPELINE
- manage complexity-
Gulp BroccoliGrunt 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