Downloaded 14 times
Uploaded byLorenzo Sicilia
Javascript Worflow Evolution
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.
More Related Content
Similar to Javascript Worflow Evolution
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Javascript Worflow Evolution
- 1. Lorenzo Sicilia -@aboutlo javascript workflow evolution
- 2. Hi, I’m LorenzoSicilia Currently …
- 3.
- 4. the graphic recordingmarketplace - explainer videos, e-learning pills, micro-contents, presentations & more -
- 5.
- 6.
- 11.
- 12.
- 13. 13 Mainly JS asEnhancement
- 14. 14 Then JSConf on November8, 2009 by Ryan Dahl In 2011, a JS package manager
- 15.
- 17.
- 18. 18 Modules / bundler -commonjs, amd, es6 modules- SystemJS
- 19. 19 PIPELINE - manage complexity- GulpBroccoliGrunt NPM
- 20. 20 Scaffolding - easy bootstrap- Yeoman/ Grunt Slush / Gulp
- 21.
- 22.
- 23.
- 24.
- 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 dirtysecret
- 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 KIDon THE BLOCK
- 32. Isomorphic APP Javascript codethat 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.
- 36. 36 A JS BUILDshould 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 THECODE !!!
- 38. SPA ( voicemapplayer ) - grunt - aka configuration
- 39. https://github.com/aboutlo/gulp-starter-kit SPA - GULP - akaprogrammable pipeline / stream
- 40.
- 41. https://github.com/gpbl/isomorphic500 ISOMORPHIC APP - webpack+ react + flux -
- 42. TAKE AWAy WHAT I’musing + autoprefixer
- 43. TAKE AWAy WHAT I’mSTUDING + postcss
- 44. TAKE AWAy ARCHITECTURE • Nodeas presentation server • Invest on the build system • Isomorphic via React.renderToString
- 45. Lorenzo Sicilia -@aboutlo javascript workflow evolution