Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building our Web Applications
Utilizing task runner to compile our code and thus
improving our development process & appli...
Main Objectives: building web code enables…
• Developers to mimic production on their own box.
• Automated versioning of s...
Definitions
• Spa: single page application
http://www.johnpapa.net/pageinspa/
• Task runner: grunt, gulp, npm
DevOps prefe...
Disclaimer
• This slide deck is not intended to determine which task runner we will use.
• Context of this discussion is c...
How we currently do it
Aptimize – the good, the bad
• Did what we needed it to do
• Now unsupported with extra $$ in hardware to fix it
• Benefit...
500+ Spas in our current web application
On initial load, download all binaries and assets
Akamai & Aptimize – Baking cookies
Chef
Browser
Walmart
Neighborhood Market
Akamai
Manufacturer
Web Web Web Web
F5 Load Ba...
The ever evolving
JavaScript world
The ever evolving JavaScript world
Peter Hunt – Instagram / Facebook Developer
https://youtu.be/VkTCL6Nqm6Y
• Spas are the...
POCs in production
Gulp Task Runner utilizing:
• concat
• minifi
• html2js
• ng-annotate
• sourcemap
• jshint
• karma
Gulp...
Folder Structure
• App: source code for the application
• Build: compiled code built using task runner
• node_modules: nod...
So many strange names and tools
As a developer, when I open up a project, I just have to run npm dev and it will download ...
ECMAScript 6 is at our doorstep
• New benefits, plugins and tools
• Developers workflow / process has evolved
• AngularJS ...
Additional task runner plugins
Used in development
• gulp-angular-filesort
• gulp-inject
More for production
• gulp-css-ba...
Objective #1: utilize build in dev. workflow
• gulp build
• gulp build –env=main
• gulp dev
• gulp dev-debug
• gulp none
•...
Task runner config is used in all environments
Issue: why is build on my dev. box different than what it is in our branch,...
Objective #2: utilize watch in dev. workflow
Issue: manual management of glofs within
index.html
Solution: utilize a watch...
Objective #2: utilize watch in dev. workflow
• Use gulp-watch and IIS referencing the build folder
or
• Use livereload, br...
Demo additional gulp
functionality
gulp tasks, gulp-watch & gulp-livereload
Objective #2: utilize watch in dev. workflow
Issue: building my app might slow down development process
Solution: reduce o...
Objective #2: utilize watch in dev. workflow
On initial load, only download core binaries and assets
Demographics
Collecti...
Objective #2: utilize watch in dev. workflow
Issue: building my app might slow down development process
Solution: reduce a...
Objective #3: versioned shared library packages
Issue: managing long ../../../ relative paths
Issue: karma.config Glof man...
Objective #3: versioned shared library packages
Demographics Spa
 app
 components/
 assets/
 states/ (routes)
 app.cs...
Objective #3: versioned shared library packages
Solution: karma.config is reduced to
a one line ./vendor/*.js
Solution: ht...
Objective #3: versioned shared library packages
Front End
components
foo-ui
foo-css
foo-toast
foo-…
foo-search
foo-rpc
DEV...
Lets evolve even further
Improve our Spa experience by reducing our initial load
First load is a killer
From Peter Hunt’s talk…
Issue: our 10+ Spas will have bigger binaries than our 500+ Spas in our cur...
First load is a killer
From Peter Hunt’s talk…
Akamai & Aptimize – catering service
Chef
Browser
Walmart
Neighborhood Market
Akamai
Distribution Center
Web Web Web Web
F...
Objective #5 - Dependency Graph
Photomodal.js
--photo.modal.js
--photo.controller.js
--photo.directive.js
--......
From Pe...
Objective #5 - Dependency Graph
From Peter Hunt’s talk…
Objective #5 - Dependency Graph - Bundle Assets
From Peter Hunt’s talk…
Objective #5 – Dependency Graph – Optimized Bundles
Reduce the unnecessary trips to the family
market when your eggs and m...
Webpack workflow
npm gulpbower karma
node_modules local repository
run tasks
runs unit tests
gulp-webpack
gulp-webpack is ...
Webpack and lazy loading binaries
Webpack supports AMD and CommonJs module styles including ES6 modules
(AngularJS 2) simi...
Server Agnostic
Once our web application is server agnostic…
Objective #6: Front-End Server Agnostic
Kitchen
Browser
Walmart
Neighborhood Market
Akamai NetStorage
Library / Data Cente...
Why change developers workflow & utilize a task runner?
• Prepares us for Angular 2 and ES6
• Prepares us for module syste...
Bringing it all together
Then and now…
Gulp-
watcher
Optimized
bundling
Akami
NetStorage
1
2
3
Appendix
First load is a killer
From Peter Hunt’s talk…
SPA has the best user experience
From Peter Hunt’s talk…
Implementing a Task Runner
Replacing local bundle links with CDN bundle links.
Upcoming SlideShare
Loading in …5
×

Building JavaScript

726 views

Published on

Building our Web Applications Utilizing task runner to compile our code and thus improving our development process & application performance.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Building JavaScript

  1. 1. Building our Web Applications Utilizing task runner to compile our code and thus improving our development process & application performance. Brady Clifford
  2. 2. Main Objectives: building web code enables… • Developers to mimic production on their own box. • Automated versioning of shared packaged libraries. • Utilize a package manager and a local artifact repository. • Automated builds of documentation and shared component demos. • Reduction and even elimination of Glofs and Glogs. • Reduce initial Spa loading time through intelligent bundling. • Architecting our web application code so it is web server agnostic allowing us to use Akamai NetStorage.
  3. 3. Definitions • Spa: single page application http://www.johnpapa.net/pageinspa/ • Task runner: grunt, gulp, npm DevOps prefers “Build and Packaging tool” • Package Manager: nuget, bower, npm • Akamai NetStorage: centralized storage - automatic content replication • Glof: giant list of files | Glog: giant list of Glofs http://slides.com/djsmith/how-we-made-a-mess-of-our-angular-app#/
  4. 4. Disclaimer • This slide deck is not intended to determine which task runner we will use. • Context of this discussion is centered around the new AngularJS application. • AngularJS 2 is written in ECMAScript 6 and will require a compiler back to ECMAScript 5 for modern browsers. • Gulp vs grunt vs npm. UX Steering committee is leaning toward Gulp. • Visual Studios 2015 will be replacing most of Web Essentials functionality with Gulp and Grunt integration
  5. 5. How we currently do it
  6. 6. Aptimize – the good, the bad • Did what we needed it to do • Now unsupported with extra $$ in hardware to fix it • Benefits • Minifies • Waxes • Bundles • base64 • Disadvantages • Can’t bring down to dev. machines for testing • Specific AngularJs processes cannot be performed • Configuration variances between our 100+ web servers (mitigated with hardware upgrade)
  7. 7. 500+ Spas in our current web application On initial load, download all binaries and assets
  8. 8. Akamai & Aptimize – Baking cookies Chef Browser Walmart Neighborhood Market Akamai Manufacturer Web Web Web Web F5 Load Balancer Salt Eggs Flour Baking Soda Honey Milk Chocolate Chips Oil Sugar + H2O = one big wax.js one big wax.css Ajax Calls to processrequest.asp
  9. 9. The ever evolving JavaScript world
  10. 10. The ever evolving JavaScript world Peter Hunt – Instagram / Facebook Developer https://youtu.be/VkTCL6Nqm6Y • Spas are the best UX experience • Con is that the initial load takes too long • Instagram has 10 SPAs in their architecture • Reduce amount of HTTP requests & bytes downloaded • Bundling everything into one file is not the best approach 2.5MB gzip bundled file is too big. • Utilize a module system to intelligently bundle your packages with a dynamic dependency map.
  11. 11. POCs in production Gulp Task Runner utilizing: • concat • minifi • html2js • ng-annotate • sourcemap • jshint • karma Gulp Compiled code
  12. 12. Folder Structure • App: source code for the application • Build: compiled code built using task runner • node_modules: node.js modules (not checked in) • Vendor: pre-built libraries. 3rd party and shared • Bower.json: contains dependency list of vendor pre-built libraries • Gulpfile.js: built tasks • Package.json: project version, description and node.js dependencies
  13. 13. So many strange names and tools As a developer, when I open up a project, I just have to run npm dev and it will download my node.js dependencies like gulp, spin up bower, download my JavaScript dependencies, compile my project and run my unit tests. Does the developer have to run all of these tools independently? No. npm gulpbower karma node_modules Downloads node.js dependencies like karma, gulp, bower, etc. local repository Downloads 3rd party and shared complied libraries like angularjs.js, bootstrap.css, foo-ui, etc. run tasks runs unit tests If in dev mode, runs the unit tests and other tasks. Run build tasks like gulp- concat, gulp-minify, gulp- webpack, etc.
  14. 14. ECMAScript 6 is at our doorstep • New benefits, plugins and tools • Developers workflow / process has evolved • AngularJS 2 is being written in ECMAScript 6
  15. 15. Additional task runner plugins Used in development • gulp-angular-filesort • gulp-inject More for production • gulp-css-base64 • gulp-uncss • gulp-webpack • gulp-cachebust • gulp-newer • gulp-babel / gulp-tracer: ES6 -> ES5 Issue: if we don’t use Aptamize, how do we wax our files Solution: gulp-cachebust Issue: we only want to package out changed files Solution: gulp-newer
  16. 16. Objective #1: utilize build in dev. workflow • gulp build • gulp build –env=main • gulp dev • gulp dev-debug • gulp none • gulp dev –minify=false Provider developer workflow flexibility through gulp tasks: Issue: AngularJS 2 needs to compile ES6 to ES5 Solution: run the gulp build Issue: Identify Aptimize issues post check-in Solution: don’t use Aptimize, instead run the gulp build
  17. 17. Task runner config is used in all environments Issue: why is build on my dev. box different than what it is in our branch, in main, stage and production? Solution: one gulpfile.js config file rules them all Developers Box DevXX Main Stage Production gulpfile.js gulpfile.js gulpfile.js gulpfile.js gulpfile.js
  18. 18. Objective #2: utilize watch in dev. workflow Issue: manual management of glofs within index.html Solution: utilize a watch <script> and <link> tags are injected automatically by the build process into the spa html file. gulp dev-debug example of gulp task used that doesn’t minify nor concatenate for fast debugging
  19. 19. Objective #2: utilize watch in dev. workflow • Use gulp-watch and IIS referencing the build folder or • Use livereload, browserSync or Visual Studios’s BrowserLink to refresh and host the Spa
  20. 20. Demo additional gulp functionality gulp tasks, gulp-watch & gulp-livereload
  21. 21. Objective #2: utilize watch in dev. workflow Issue: building my app might slow down development process Solution: reduce operations performed during a dev. build: • Utilize Gulp tasks that omit processes to increase speed • Utilize multiple Spas architecture • Pre-built shared libraries *Adobe Analytics has over 300+ files and 15+ routes in each of their Spas. They utilize a watch and have the build time down to 200 ms. gulp dev-debug example of gulp task used that doesn’t minify nor concatenate for fast debugging
  22. 22. Objective #2: utilize watch in dev. workflow On initial load, only download core binaries and assets Demographics Collections Login Reporting Coding Payment Process Transaction Entry Dashboard Administration Each Spa shares: • foo-ui styling • foo-core services • menu, tab & toolbar components • master layout html partials • 3rd party package libraries Potential Multi-Spa Architecture
  23. 23. Objective #2: utilize watch in dev. workflow Issue: building my app might slow down development process Solution: reduce amount tasks performed during a dev. build: • Utilize Gulp tasks that omit processes to increase speed • Utilize multiple Spas architecture • Pre-built shared libraries *Adobe Analytics has over 300+ files and 15+ routes in each of their Spas. They utilize a watch and have the build time down to 200 ms. gulp dev-debug example of gulp task used that doesn’t minify nor concatenate for fast debugging
  24. 24. Objective #3: versioned shared library packages Issue: managing long ../../../ relative paths Issue: karma.config Glof management nightmare Issue: reference issues with shared html templates.
  25. 25. Objective #3: versioned shared library packages Demographics Spa  app  components/  assets/  states/ (routes)  app.css  app.js  vendor (not checked into TFS)  foo-ui/  foo-ui.js  foo-ui.css  foo-core.js  foo-authenticate/  foo-authenticate.js  foo-authenticate.css  ui-bootstrap/  angularjs/  ui-grid/ Collections Spa  app  components/  assets/  states/ (routes)  app.css  app.js  vendor (not checked into TFS)  foo-ui/  foo-core.js  foo-authenticate/  foo-billing/  foo-billing.js  foo-billing.css  ui-bootstrap/  angularjs/  ui-grid/ Example within a Single Page Application
  26. 26. Objective #3: versioned shared library packages Solution: karma.config is reduced to a one line ./vendor/*.js Solution: html is converted to JavaScript and injected into the directive during library build way before it is included in the web application.
  27. 27. Objective #3: versioned shared library packages Front End components foo-ui foo-css foo-toast foo-… foo-search foo-rpc DEV BRANCH Gated Checkins Auto-Deployment of binaries foo-ui (1.0.0.001) foo-search (2.1.0.044) foo-rpc (3.2.1.0232) Spa Package Manager
  28. 28. Lets evolve even further Improve our Spa experience by reducing our initial load
  29. 29. First load is a killer From Peter Hunt’s talk… Issue: our 10+ Spas will have bigger binaries than our 500+ Spas in our current system
  30. 30. First load is a killer From Peter Hunt’s talk…
  31. 31. Akamai & Aptimize – catering service Chef Browser Walmart Neighborhood Market Akamai Distribution Center Web Web Web Web F5 Load Balancer Bundle Vendors Salt Baking Soda Honey = Bundle B Potatoes Squash Bundle A Eggs Milk Cheese Apples Bundle C foo-core Flour Chocolate Chips Sugar Powder Sugar Bundle B Bundle A Bundle C Bundle Vendors Bundle B Bundle A Bundle C Bundle Vendors Bundle Vendors =Bundle C Bundle Vendors ?=Bundle C Ajax Calls to processrequest.asp webpack lazy loading
  32. 32. Objective #5 - Dependency Graph Photomodal.js --photo.modal.js --photo.controller.js --photo.directive.js --...... From Peter Hunt’s talk…
  33. 33. Objective #5 - Dependency Graph From Peter Hunt’s talk…
  34. 34. Objective #5 - Dependency Graph - Bundle Assets From Peter Hunt’s talk…
  35. 35. Objective #5 – Dependency Graph – Optimized Bundles Reduce the unnecessary trips to the family market when your eggs and milk go bad. Maintain Glofs and Glogs in task runner to produce intelligent bundling. Or ES6 modules (AngularJs 2.0) + gulp-webpack utilizing require()
  36. 36. Webpack workflow npm gulpbower karma node_modules local repository run tasks runs unit tests gulp-webpack gulp-webpack is used as a plugin within build process. It creates the dependency graph using the require() within each JavaScript file optimizing the bundles. other tasks
  37. 37. Webpack and lazy loading binaries Webpack supports AMD and CommonJs module styles including ES6 modules (AngularJS 2) similar to RequireJs. It utilizes a term known as “Code Splitting”. The require() method is used within your JavaScript code to define sync and async downloads of dependencies. Note: this lazy loading can be implemented later in our road map. Richard Snap with Needle gave a presentation at the AngularJs meet up back in January demonstrating these concepts: http://www.slideshare.net/rsnapp/lazy-angular-w-webpack
  38. 38. Server Agnostic Once our web application is server agnostic…
  39. 39. Objective #6: Front-End Server Agnostic Kitchen Browser Walmart Neighborhood Market Akamai NetStorage Library / Data Center Security Com+ Com+ F5 Load Balancer Bundle B Bundle A Bundle C Bundle Vendors Ajax Calls to processrequest.asp Redirection happens only with Ajax calls Packages are deployed to one place Demographics Com+ Com+ Com+ Com+ Collections Com+ Com+ Com+ Com+ Com+ Com+ Claims Com+
  40. 40. Why change developers workflow & utilize a task runner? • Prepares us for Angular 2 and ES6 • Prepares us for module system (dependency map generation) • More realistic developer debugging • Provides engineering ability to define the build config in all environments
  41. 41. Bringing it all together Then and now… Gulp- watcher Optimized bundling Akami NetStorage 1 2 3
  42. 42. Appendix
  43. 43. First load is a killer From Peter Hunt’s talk…
  44. 44. SPA has the best user experience From Peter Hunt’s talk…
  45. 45. Implementing a Task Runner Replacing local bundle links with CDN bundle links.

×