Javascript Worflow Evolution
2 likes608 views
Lorenzo Sicilia discusses the evolution of JavaScript workflows, covering tools and practices from the early days of JavaScript to modern frameworks. Key topics include package managers, module bundlers, testing services, and the architecture of single-page and isomorphic applications. The document emphasizes the importance of build systems and performance optimizations for maintaining effective JavaScript applications.
Javascript Worflow Evolution
- 1. Lorenzo Sicilia - @aboutlo javascript workflow evolution
- 2. Hi, I’m Lorenzo Sicilia Currently …
- 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
- 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
- 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
- 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