SlideShare a Scribd company logo
1 of 45
Building our Web Applications
Utilizing task runner to compile our code and thus
improving our development process & application
performance.
Brady Clifford
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.
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#/
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
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
• 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)
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 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
The ever evolving
JavaScript world
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.
POCs in production
Gulp Task Runner utilizing:
• concat
• minifi
• html2js
• ng-annotate
• sourcemap
• jshint
• karma
Gulp Compiled code
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
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.
ECMAScript 6 is at our doorstep
• New benefits, plugins and tools
• Developers workflow / process has evolved
• AngularJS 2 is being written in ECMAScript 6
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
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
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
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
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
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 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
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
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
Objective #3: versioned shared library packages
Issue: managing long ../../../ relative paths
Issue: karma.config Glof management nightmare
Issue: reference issues with shared html templates.
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
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.
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
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 current system
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
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
Objective #5 - Dependency Graph
Photomodal.js
--photo.modal.js
--photo.controller.js
--photo.directive.js
--......
From Peter Hunt’s talk…
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 milk go bad.
Maintain Glofs and Glogs in task
runner to produce intelligent
bundling.
Or
ES6 modules (AngularJs 2.0) +
gulp-webpack utilizing require()
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
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
Server Agnostic
Once our web application is server agnostic…
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+
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
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.

More Related Content

What's hot

Overview of Chef - Fundamentals Webinar Series Part 1
Overview of Chef - Fundamentals Webinar Series Part 1Overview of Chef - Fundamentals Webinar Series Part 1
Overview of Chef - Fundamentals Webinar Series Part 1Chef
 
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6Community Cookbooks & further resources - Fundamentals Webinar Series Part 6
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6Chef
 
Automating your infrastructure with Chef
Automating your infrastructure with ChefAutomating your infrastructure with Chef
Automating your infrastructure with ChefJohn Ewart
 
Configuration Management and Salt
Configuration Management and SaltConfiguration Management and Salt
Configuration Management and Salt55020
 
PageSpeed and SPDY
PageSpeed and SPDYPageSpeed and SPDY
PageSpeed and SPDYBlake Crosby
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it worksIlya Grigorik
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
Chef Fundamentals Training Series Module 2: Workstation Setup
Chef Fundamentals Training Series Module 2: Workstation SetupChef Fundamentals Training Series Module 2: Workstation Setup
Chef Fundamentals Training Series Module 2: Workstation SetupChef Software, Inc.
 
Introduction to Chef
Introduction to ChefIntroduction to Chef
Introduction to ChefKnoldus Inc.
 
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructuresMaster Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructuresFrançois Le Droff
 
Composer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptComposer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptPromet Source
 
AWS Meetup - Sydney - February
AWS Meetup - Sydney - February AWS Meetup - Sydney - February
AWS Meetup - Sydney - February markghiasy
 
Thoughts on building deployable and updatable share point solutions
Thoughts on building deployable and updatable share point solutionsThoughts on building deployable and updatable share point solutions
Thoughts on building deployable and updatable share point solutionsSerge van den Oever
 
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...Chef Software, Inc.
 
Chef, Devops, and You
Chef, Devops, and YouChef, Devops, and You
Chef, Devops, and YouBryan Berry
 
Make Your Build Great Again (DroidConSF 2017)
Make Your Build Great Again (DroidConSF 2017)Make Your Build Great Again (DroidConSF 2017)
Make Your Build Great Again (DroidConSF 2017)Jared Burrows
 
(Re)-Introduction to Maven
(Re)-Introduction to Maven(Re)-Introduction to Maven
(Re)-Introduction to MavenEric Wyles
 

What's hot (20)

The unintended benefits of Chef
The unintended benefits of ChefThe unintended benefits of Chef
The unintended benefits of Chef
 
Overview of Chef - Fundamentals Webinar Series Part 1
Overview of Chef - Fundamentals Webinar Series Part 1Overview of Chef - Fundamentals Webinar Series Part 1
Overview of Chef - Fundamentals Webinar Series Part 1
 
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6Community Cookbooks & further resources - Fundamentals Webinar Series Part 6
Community Cookbooks & further resources - Fundamentals Webinar Series Part 6
 
Automating your infrastructure with Chef
Automating your infrastructure with ChefAutomating your infrastructure with Chef
Automating your infrastructure with Chef
 
Configuration Management and Salt
Configuration Management and SaltConfiguration Management and Salt
Configuration Management and Salt
 
PageSpeed and SPDY
PageSpeed and SPDYPageSpeed and SPDY
PageSpeed and SPDY
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Chef Fundamentals Training Series Module 2: Workstation Setup
Chef Fundamentals Training Series Module 2: Workstation SetupChef Fundamentals Training Series Module 2: Workstation Setup
Chef Fundamentals Training Series Module 2: Workstation Setup
 
Introduction to Chef
Introduction to ChefIntroduction to Chef
Introduction to Chef
 
Introduction to chef
Introduction to chefIntroduction to chef
Introduction to chef
 
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructuresMaster Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
Master Chef class: learn how to quickly cook delightful CQ/AEM infrastructures
 
Composer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.pptComposer tools and frameworks for drupal.ppt
Composer tools and frameworks for drupal.ppt
 
AWS Meetup - Sydney - February
AWS Meetup - Sydney - February AWS Meetup - Sydney - February
AWS Meetup - Sydney - February
 
Thoughts on building deployable and updatable share point solutions
Thoughts on building deployable and updatable share point solutionsThoughts on building deployable and updatable share point solutions
Thoughts on building deployable and updatable share point solutions
 
Rebooting a Cloud
Rebooting a CloudRebooting a Cloud
Rebooting a Cloud
 
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...
Chef Fundamentals Training Series Module 3: Setting up Nodes and Cookbook Aut...
 
Chef, Devops, and You
Chef, Devops, and YouChef, Devops, and You
Chef, Devops, and You
 
Make Your Build Great Again (DroidConSF 2017)
Make Your Build Great Again (DroidConSF 2017)Make Your Build Great Again (DroidConSF 2017)
Make Your Build Great Again (DroidConSF 2017)
 
(Re)-Introduction to Maven
(Re)-Introduction to Maven(Re)-Introduction to Maven
(Re)-Introduction to Maven
 

Similar to Building JavaScript

Continuous integration / continuous delivery
Continuous integration / continuous deliveryContinuous integration / continuous delivery
Continuous integration / continuous deliveryEatDog
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Evgeniy Kuzmin
 
Continuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsContinuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsEvgeniy Kuzmin
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance OptimizationChen-Tien Tsai
 
Deep dive into share point framework webparts
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webpartsPrabhu Nehru
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsDavid Amend
 
Era of server less computing final
Era of server less computing finalEra of server less computing final
Era of server less computing finalBaskar rao Dsn
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy
 
Rapid Application Development on Google App Engine for Java
Rapid Application Development on Google App Engine for JavaRapid Application Development on Google App Engine for Java
Rapid Application Development on Google App Engine for JavaKunal Dabir
 
Era of server less computing
Era of server less computingEra of server less computing
Era of server less computingBaskar rao Dsn
 
Azure Functions @ global azure day 2017
Azure Functions  @ global azure day 2017Azure Functions  @ global azure day 2017
Azure Functions @ global azure day 2017Sean Feldman
 
Custom Tile Generation in PCF
Custom Tile Generation in PCFCustom Tile Generation in PCF
Custom Tile Generation in PCFVMware Tanzu
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with WebpackJake Peyser
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...Paul Jensen
 
Play with azure functions
Play with azure functionsPlay with azure functions
Play with azure functionsBaskar rao Dsn
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopwareSander Mangel
 

Similar to Building JavaScript (20)

Continuous integration / continuous delivery
Continuous integration / continuous deliveryContinuous integration / continuous delivery
Continuous integration / continuous delivery
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
 
Webpack: from 0 to 2
Webpack: from 0 to 2Webpack: from 0 to 2
Webpack: from 0 to 2
 
Continuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsContinuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applications
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Deep dive into share point framework webparts
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webparts
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
 
Era of server less computing final
Era of server less computing finalEra of server less computing final
Era of server less computing final
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
 
Rapid Application Development on Google App Engine for Java
Rapid Application Development on Google App Engine for JavaRapid Application Development on Google App Engine for Java
Rapid Application Development on Google App Engine for Java
 
Era of server less computing
Era of server less computingEra of server less computing
Era of server less computing
 
Azure Functions @ global azure day 2017
Azure Functions  @ global azure day 2017Azure Functions  @ global azure day 2017
Azure Functions @ global azure day 2017
 
Custom Tile Generation in PCF
Custom Tile Generation in PCFCustom Tile Generation in PCF
Custom Tile Generation in PCF
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
 
Play with azure functions
Play with azure functionsPlay with azure functions
Play with azure functions
 
Exploring pwa for shopware
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
 
Appengine json
Appengine jsonAppengine json
Appengine json
 

Recently uploaded

Max. shear stress theory-Maximum Shear Stress Theory ​ Maximum Distortional ...
Max. shear stress theory-Maximum Shear Stress Theory ​  Maximum Distortional ...Max. shear stress theory-Maximum Shear Stress Theory ​  Maximum Distortional ...
Max. shear stress theory-Maximum Shear Stress Theory ​ Maximum Distortional ...ronahami
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelDrAjayKumarYadav4
 
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsFilters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsMathias Magdowski
 
engineering chemistry power point presentation
engineering chemistry  power point presentationengineering chemistry  power point presentation
engineering chemistry power point presentationsj9399037128
 
Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Ramkumar k
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdfAlexander Litvinenko
 
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书c3384a92eb32
 
21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docxrahulmanepalli02
 
Databricks Generative AI Fundamentals .pdf
Databricks Generative AI Fundamentals  .pdfDatabricks Generative AI Fundamentals  .pdf
Databricks Generative AI Fundamentals .pdfVinayVadlagattu
 
DBMS-Report on Student management system.pptx
DBMS-Report on Student management system.pptxDBMS-Report on Student management system.pptx
DBMS-Report on Student management system.pptxrajjais1221
 
Presentation on Slab, Beam, Column, and Foundation/Footing
Presentation on Slab,  Beam, Column, and Foundation/FootingPresentation on Slab,  Beam, Column, and Foundation/Footing
Presentation on Slab, Beam, Column, and Foundation/FootingEr. Suman Jyoti
 
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...mikehavy0
 
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfInvolute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfJNTUA
 
Geometric constructions Engineering Drawing.pdf
Geometric constructions Engineering Drawing.pdfGeometric constructions Engineering Drawing.pdf
Geometric constructions Engineering Drawing.pdfJNTUA
 
5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...archanaece3
 
History of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationHistory of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationEmaan Sharma
 
UNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxUNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxkalpana413121
 
Working Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfWorking Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfSkNahidulIslamShrabo
 
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and ToolsMaximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Toolssoginsider
 

Recently uploaded (20)

Max. shear stress theory-Maximum Shear Stress Theory ​ Maximum Distortional ...
Max. shear stress theory-Maximum Shear Stress Theory ​  Maximum Distortional ...Max. shear stress theory-Maximum Shear Stress Theory ​  Maximum Distortional ...
Max. shear stress theory-Maximum Shear Stress Theory ​ Maximum Distortional ...
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata Model
 
Filters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility ApplicationsFilters for Electromagnetic Compatibility Applications
Filters for Electromagnetic Compatibility Applications
 
engineering chemistry power point presentation
engineering chemistry  power point presentationengineering chemistry  power point presentation
engineering chemistry power point presentation
 
Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)
 
Signal Processing and Linear System Analysis
Signal Processing and Linear System AnalysisSignal Processing and Linear System Analysis
Signal Processing and Linear System Analysis
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
 
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书
一比一原版(Griffith毕业证书)格里菲斯大学毕业证成绩单学位证书
 
21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx21P35A0312 Internship eccccccReport.docx
21P35A0312 Internship eccccccReport.docx
 
Databricks Generative AI Fundamentals .pdf
Databricks Generative AI Fundamentals  .pdfDatabricks Generative AI Fundamentals  .pdf
Databricks Generative AI Fundamentals .pdf
 
DBMS-Report on Student management system.pptx
DBMS-Report on Student management system.pptxDBMS-Report on Student management system.pptx
DBMS-Report on Student management system.pptx
 
Presentation on Slab, Beam, Column, and Foundation/Footing
Presentation on Slab,  Beam, Column, and Foundation/FootingPresentation on Slab,  Beam, Column, and Foundation/Footing
Presentation on Slab, Beam, Column, and Foundation/Footing
 
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...
☎️Looking for Abortion Pills? Contact +27791653574.. 💊💊Available in Gaborone ...
 
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdfInvolute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
Involute of a circle,Square, pentagon,HexagonInvolute_Engineering Drawing.pdf
 
Geometric constructions Engineering Drawing.pdf
Geometric constructions Engineering Drawing.pdfGeometric constructions Engineering Drawing.pdf
Geometric constructions Engineering Drawing.pdf
 
5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...5G and 6G refer to generations of mobile network technology, each representin...
5G and 6G refer to generations of mobile network technology, each representin...
 
History of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationHistory of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & Modernization
 
UNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxUNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptx
 
Working Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfWorking Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdf
 
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and ToolsMaximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
Maximizing Incident Investigation Efficacy in Oil & Gas: Techniques and Tools
 

Building JavaScript

  • 1. Building our Web Applications Utilizing task runner to compile our code and thus improving our development process & application performance. Brady Clifford
  • 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. 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. 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
  • 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. 500+ Spas in our current web application On initial load, download all binaries and assets
  • 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
  • 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. POCs in production Gulp Task Runner utilizing: • concat • minifi • html2js • ng-annotate • sourcemap • jshint • karma Gulp Compiled code
  • 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. 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. 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. 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. 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. 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. 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. 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. Demo additional gulp functionality gulp tasks, gulp-watch & gulp-livereload
  • 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. 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. 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. 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. 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. 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. 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. Lets evolve even further Improve our Spa experience by reducing our initial load
  • 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. First load is a killer From Peter Hunt’s talk…
  • 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. Objective #5 - Dependency Graph Photomodal.js --photo.modal.js --photo.controller.js --photo.directive.js --...... From Peter Hunt’s talk…
  • 33. Objective #5 - Dependency Graph From Peter Hunt’s talk…
  • 34. Objective #5 - Dependency Graph - Bundle Assets From Peter Hunt’s talk…
  • 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. 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. 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. Server Agnostic Once our web application is server agnostic…
  • 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. 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. Bringing it all together Then and now… Gulp- watcher Optimized bundling Akami NetStorage 1 2 3
  • 43. First load is a killer From Peter Hunt’s talk…
  • 44. SPA has the best user experience From Peter Hunt’s talk…
  • 45. Implementing a Task Runner Replacing local bundle links with CDN bundle links.

Editor's Notes

  1. Influence comes from conversations with lead web architects in our local area: Brad Rodgers – Lead developer over Adobe Analytics front end management portal Dave Smith – HireVue Engineering Director Nick Seegmiller – Lead developer over mobile and web applications at Vivent Rich Snapp – Needle Developer ADP Dealer Services (actually not in our area) Ryan Day – AnglarJs contractor
  2. Elevator Speech Mimic Production: Developers are able to identify concatenation and minification issues before code is checked in. The build config is shared amongst all environments Prepares us for AngularJs 2 and ES6 Released, versioned library packages: Treat our shared libriaries like 3rd parties On check-in, build, package and version shared libraries deploying to local package repository like git. This speeds up the build process for the Spa and also removes versioning within TFS. Part of the build process can also incorporate the automation of generating documentation and demos. See how AngularStrap and UI-Boostrap and achieving this from their source code. Utilize bower package manager to keep dependencies current from a local artifact repository: DevOps team is working on a local artifact repository that will house third party libraries and in-house libraries. Reduce Spa loading time: Use a module system and an intelligent dependency map bundling tool, like webpack. Making our Web Application Server Agnostic and run on Akamai NetStorage: Instead of loading 100+ servers with our web application files, we can upload them to one location Avoids the second hop to our F5 and web farm in our current architecture Brings us closer to a true micro services SOA architecture; separating the front end from the middle tier. Allows us to use redirection only for api calls. Don’t have to perform a browser redirect during login.
  3. Akamai NetStorage is a managed product that provides petabytes of storage space in our data centers all over the world. Automatic content replication and enhanced delivery performance. Customers upload content to the closest NetStorage data center using any of the supported methods: FTP, SFTP, FTPS, SCP, RSYNC, RSYNC over SSH, WGET, NetStorage HTTP API, File Manager (web UI available on the Akamai Luna Control Center), Aspera Upload Acceleration, CMS shell, etc. NetStorage automatically replicates content to the other geographically distributed data centers configured to host that content. Content is delivered to end users worldwide with the best performance thanks to the Global Akamai Intelligent Platform http://www.akamai.com/html/solutions/netstorage.html http://www.akamai.com/dl/product_briefs/product-brief-netstorage.pdf
  4. Some of these concepts can be applied to our old PM and EHR but don’t let their current structure effect or restrict what can be done in the new PM front end web application. AngularJS 2.0 has just moved from Alpha to Developer Preview (04/05/2015) You can also use a pollyfill to run AngularJs 2 code if you want to write it in ES5. Some of the items I am going to review have already been addressed with the UX Steering Committee. The rest have been added to the UX Steering Committee discussion list and haven’t been addressed yet. One of the items that are currently in discussion is weather we should use Gulp, Grunt or Npm. The current verdict is Gulp. This slide deck is not intended to determine which task runner we should be using, but rather how the task runner should be utilized. Visual Studios 2015 will be replacing most of Web Essentials functionality with Gulp and Grunt integration. Visual Studios 2013 Web Essentials already supports Gulp and Grunt integration.
  5. Lets take a look at our current developer processes and deployment.
  6. Aptimize did the job. It was a quick way to increase our performance without having to make much changes in our code base. But the JavaScript world has evolved and moved on.
  7. In our current PM, we have 500+ spas. Each popup acts like its own Spa. Each downloads its one waxed.js and one waxed.css file. Even if the previous spa had most of the same code, it is downloaded again.
  8. We have all seen the video Sheridan Richey did on Akamai and Aptimize. https://youtu.be/VLrGWpQd8yc I would like to re-evaluate the concept when it comes to baking cookies and the management and distribution of the ingredients. Yes we are baking the cookies at the client end using the browser, but I would argue that instead of using ingredients locally, we are delivering to the user the pre-packaged Nestle cookie mix. We just have to add water on the client end and we have bake the cookies. The problem with this scenario is the Nestle cookie mix has an expiration date. The chocolate chips within the mix can last for a year, but the eggs can only last for a couple weeks. When the eggs expire, we have to discard the entire bag and go back to the supermarket to get a new Nestle cookie mix bag. If the supermarket is out, because they have also expired, we have to wait for the manufacturer to mix up the ingredients again and package up the bags and ship a new crate to the market.
  9. Lets now take what we have learned and take the next step.
  10. Disclaimer: This slide deck is not intended to determine which task runner we will use. Webpack can be used as a task runner, but it can also be used it as a plugin within gulp, grunt, npm at this current state in time. The UX Steering Committee is leaning toward using gulp for its task runner, but hasn’t yet considered webpack as its bundler. To better set the context on how the front end world has evolved over the past 5 years, please watch the video below.  Peter talks about the pros and con of a SPA and the solutions Instagram implemented to mitigate that con. Talks about the pros and cons of a SPA: https://youtu.be/VkTCL6Nqm6Y?t=7m56s Why bundling everything into one file is not the best approach: https://youtu.be/VkTCL6Nqm6Y?t=9m39s Instagram solution - webpack: https://youtu.be/VkTCL6Nqm6Y?t=25m43s Webpack takes modules with dependencies and generates static assets representing those modules. http://webpack.github.io/docs/what-is-webpack.html Since Peter’s talk back in July 2014, Gulp and Grunt have integrated webpack plugins for the bundling process.  This allows you to use the task runner like Gulp or Grunt and still use the intelligent dependency mapping of webpack. A 2.5MB gzip bundled file is too big. It causes issues with mobile devices.
  11. The WebClinical EHR currently is building AngularJS code into a packaged build. It is waxing its bundled files using Asp.Net’s built in versioning. David Neilson has already created a AngluarJs seed with integrated gulp tasks. This gulp task is similar to what Milos has implemented in his Benchmark AngularJs app. gulp-html2js: converts AngularJS templates to JavaScript Both of these examples are statically bundling the js and css into a vendor bundle, a shared bundle and a app bundle.
  12. Each project contains these files and structures. Not everything is checked into TFS.
  13. It is time that we allow the evolution of our dev. process when it comes to front end development. Note that evolution isn’t immediate…
  14. gulp-angular-filesort: organizes your modules in the correct order gulp-inject: a javascript, stylesheet and webcomponent injection; i.e. inject file references into your index.html gulp-css-base64: transform all resources found in a CSS (those within a url( ... ) declaration) into base64-encoded data URI strings gulp-uncss: remove unused css selectors gulp-webpack: takes modules with dependencies and generates static assets representing those modules gulp-cachebust: generates checksums and renames references to files gulp-cache-bust: append a query string to your assets to bust that cache gulp-newer / gulp-changed: pass through newer source files only. This addresses the current workflow we use were we only patch out files that have changed. Granted we will be patching out bundles instead of individual files, but it does reduce the amount of files modified in production.
  15. It would be very beneficial to catch minification, concatenation and other build hiccups prior to a developer checking in that code into TFS. Different gulp tasks can be defined with arguments. gulp build runs all subtasks including minification, concatination, linting, unit tests, etc. gulp build –env=main deploys the build with custom tasks specific to main; i.e. distribution folder location and revs the package. when deployed to production, also can disable certain debugging tools built into AngularJs. gulp dev runs all tasks including gulp-watch or gulp-live-reload which rebuilds on any changes to files; could omit sourcemaps. gulp dev-debug runs only the critical tasks like injecting the <script> tags in the index.html; used for fast builds for iterative code changes. gulp dev –minify=false omits the minification step
  16. There is on gulpfile.js per project. The gulpfile.js is checked into TFS. It contains tasks that can be altered by parameters allow for environment specific operations. This gives the power back to the dev. to make sure that the code is built properly and unit tested in each environment. The build config is also used when building the library out to a local repository like Artifactory.
  17. Why manually managing glofs and glogs is bad: Easy to break your app through manual dependency management. It's difficult to integrate tools like traceur or babel. Managing <script> tags manually is painful and error prone. See Dave Smith’s (HireVue lead developer) presentation on this very topic: http://slides.com/djsmith/how-we-made-a-mess-of-our-angular-app#/17/1 Gulp bundling and gulp-inject solve this problem gulp-webpack goes a step further and creates an intelligent dependency map using require() Implementing a watch providers other benefits: Automatically runs the build after a file is changed Runs karma unit test automatically Can alert the developer of lint issues
  18. Utilize gulp-watch / gulp-livereload / BrowserSync in the developers workflow on his / her workstation. Takes over process of running Karma in a separate console and jshint. Replicate production build environment Forces running unit tests and linting because the developer can’t view the web page without running the build. Integrates with Visual Studios and Webstorm gulp-watch: https://www.npmjs.com/package/gulp-watch gulp-livereload: https://www.npmjs.com/package/gulp-livereload BrowserLink: http://vswebessentials.com/features/browserlink BrowserSync: http://www.browsersync.io
  19. For demos, please get with Brady Clifford… These have not been checked in.
  20. By omitting certain gulp processes, like minification, sourcemaps, etc., the build process will increase tremendously. Utilizing multiple Spas allows us to modularize the code base so we are only developing and running builds under feature based domains. Instead of a 1000+ files Spa, we can reduce that down to 100+. Each Spa would share packaged bundles but would also contain its own app bundles. If a developer wants to make changes and test multiple spas at once, they can utilize the gulp-environment and karma-environment plugins that allow for multi-spa development. Adobe Analytics has over 200+ files and 15+ routes in each of their Spas. They utilize a watch and have the build time down to 200 ms. Email from my friend, Brad Rodgers (lead developer for their front end web applications): Hey Brady,   We have a watch script that watches for any changes and then automatically re-compiles our JavaScript bundles. It’s actually surprisingly fast! Whenever I make a change a file is automatically uploaded to the server and then recompiles my concatenated files in about 100-200 milliseconds. It takes longer to switch to the browser and refresh then it does to recompile the file. We have implemented livereload and use it but made it so it's optional. Personally, I find it easier to just refresh on my own so that I don’t lose something I was working on before.    And just so that you know we have more than one SPA because we have a HUGE application with a ton of code. So we have tried to organize our SPA’s into logical building blocks that work together. But just know that our SPA’s are not small. Some have up to 10 routes within them and they still compile in about 200 milliseconds. I don’t think you have anything to worry about using gulp/npm/livereload. From my experience it’s amazing! They are still thinking about dotNet/Java land which takes a lot longer to recompile and refresh.    NOTE: Our watch script does not minify our files because that process takes a lot longer. We have another gulp process that minifies, internationalizes, and any other heavier process for our production environment. Also make sure you use gulp or node watch instead of grunt because grunt is super slow and not optimized.    Hope that helps, Brad
  21. Disclaimer: The ng360 team has not yet finalized how we will be architecting the multi-spa concept. The second step in optimizing the build process is to separate your code out into domains, multiple Spas. This really moves us more toward the micro services architecture. We could start partitioning out these Spas by mimic the Com+ components in our middle tier. By isolating each feature into its own domain, this reduces the amount of code that needs to be built for each gulp build process; thus reducing the cycles. In the multi-spa modal, each spa depends on core binaries and assets. This would include: foo-ui styling foo-core services menu, tab and toolbar components master layout html partials 3rd party package libraries Building on top of that are additional packaged libraries that are downloaded when needed. An example is Claim Status in the Coding Spa. The js, css and html is not downloaded from the server until the user access that route. This is done using either CommonJs, RequireJs or webpack.
  22. The last item to address to reduce our build times: Pre-building our shared JavaScript and css libraries will reduce the amount cycles for a task runner.
  23. Version & Package in-house shared components Released, versioned library packages become statically housed and served into the build process from an artifact repository tool. Treat these shared libraries like a vender; 3rd party library. Vendor Folder: Each Spa has its on localized vendor folder. The vendor folder is not checked into TFS. A bower.json file contains a list of all needed dependencies for the project. The packages do not contain versions. Versions are controlled instead by the bower.json file. During build after a checking, task runner “compiles” the assets and revs it and uploads it to our local build repository (like Git or Artifactory). Developers do not reference the raw TFS code, but rather the local build repository using a package manager like Nuget, npm or bower. Eliminates the need to manage html template relativity (html2js) For larger components, give them their own package. Like foo-grid, etc.
  24. Issue: managing long ../../../ relative paths Issue: karma.config Glof management nightmare Solution: all vendor libraries are downloaded to the local project using a package manager like Bower and Nuget. Issue: reference issues with shared html templates. Solution: since the library has already been built, html is already converted to JavaScript and injected into the directive code.
  25. Get with Russell Webster and DevOps for more details on the implementation and usage of the local package repository. Note that it will be used not only for front end pacakges but also backend; i.e. NuGet packages. Main takeaways: Versioning is managed in the package.json for each project. The version is rev. for each checking, built and saved in the repository The developer will reference the local repository instead of TFS for shared and 3rd party libraries. Packaged libraries can contain multiple components or just a single component. Depends on its rev iteration and complexity. See UI-Bootstrap and AngularStrap source code for examples on building up a library package of n number of components. Issue: how do I test and QA a shared library component when it doesn’t have a place to call home? Solution: following the UI-Bootstrap and AnglarStrap solutions, demos are created for both documentation purposes and QA. Issue: what if I want to work on both the shared library component and a web application? Solution: you can build the shared library component locally on your box and temporarily point your web application to the local packaged. gulp-environment plugin has the ability to build and watch multiple projects. Issue: what if there is a bug in an older version. How do we fix that version and redeploy? Solution: from the rev. in TFS, a branch is made to fix the issue in the older version and it is than built, deployed to repository and the branch is than merged.
  26. After implementing a task runner in our development process, we can start to take advantage of the more advanced tools. Disclaimer: evolution takes time
  27. Our Spas will by nature have more binaries to download. We are taking 500+ Spas down to 10+. The code has to go somewhere…
  28. For the one Spa, we have a full course meal to serve instead of just baking cookies. Instead of our web farm being a manufacture, it becomes a distribution center. The manufacturing happens before the web application is pushed to production. By intelligently bundling our packages, we can take more advantage of caching on the browser and only make trips to the supermarket when certain ingredients expires. By passing bundled ingredients, we can actual do more than just add water. By intelligently bundling, we can first serve the appetizer, reducing the time it takes to serve up the Spa. After the appetizer is served, comes the main course, downloading Bundle A only when it is needed. Finally, if you want dessert, you can request a cookie. If you don’t want dessert, Bundle B is not downloaded. This “Code Splitting” or lazy loading of binaries can be done using RequireJs, Webpack or other tools. I recommend webpack. See later slides for more details.
  29. CSS and other assets are also part of the dependency graph.
  30. By implementing a task runner and taking some steps short-term, we can ease into a module system where we bundle and lazy load our dependencies to reduce the unnecessary trips to the family market. We are already utilizing a module system with AngluarJS. Lets go a step further and bundle not in one giant file, but optimize our bundles. We can manly maintain a dependency graph using a Glof and Glog within our task runner, or we can adopt an automated dependency mapper like gulp-webpack.
  31. gulp-webpack is used as a plugin within build process. It creates the dependency graph using the require() within each JavaScript file. It optimizes the bundles into modularized packages contain similar dependencies. It is ran with the other gulp tasks and plugins. You can also use webpack as a task runner. What is webpack: http://webpack.github.io/docs/what-is-webpack.html When implemented into the developers workflow, it is usually not ran as a gulp dev task; when the developer is developing. It is instead ran in environment builds and when the developer wants to make sure his changes will work in production but test it on his own box. Why webpack is awesome: https://github.com/petehunt/webpack-howto https://medium.com/@tomchentw/why-webpack-is-awesome-9691044b6b8e
  32. For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”. http://webpack.github.io/docs/code-splitting.html It’s an opt-in feature. You can define split points in your code base. webpack takes care of the dependencies, output files and runtime stuff. To clarify a common misunderstanding: Code Splitting is not just about extracting common code into a shared chunk. The more notable feature is that Code Splitting can be used to split code into an on demand loaded chunk. This can keep the initial download small and downloads code on demand when requested by the application. Another common library that allows for lazy loading of binaries is RequireJs. 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 https://www.youtube.com/watch?v=U4LYo0SiJJw Other Resources: https://github.com/snapwich/lazy-angular-demo https://github.com/snapwich/lazy-angular https://github.com/ocombe/ocLazyLoad
  33. Once we have shifted our build process for our web applications sooner in our development process, we can make our front-end server agnostic and decouple it from our middle tier servers. Disclaimer: evolution takes time
  34. If our front-end can be server agnostic, it can be served by IIS, node.js, Apache and even Akamai NetStorage. Serving our static front end content from Akamai NetStorage would give us the following benefits: Take the 2 hope process of getting updated cached files from our web farm down to 1 hope. Akamai to the client. Take the 100+ IIS servers that host our web applications down to 1. Reducing issues with synchronization and deployment times. Decouples the front end from the middle teir allowing for a more natural micro services architecture Provides a door for Pops to move their middle tier com+ components to the cloud; AWS or Azure, leaving the SQL servers in our current data center. Redirection at login no longer has to take place in the browser; currently a headache in multiple levels. Instead, the redirection only occurs with Ajax calls back to processrequest.asp. The API reports back to the first call informing the client where to place all future requests.
  35. Overall, I would like to see us first modify our development workflow / process and implement a gulp-watcher on our development machines. Second, improve our bundling by implementing gulp-webpack And finally, go server agnostic with our front-end web application with Akami NetStorage.
  36. If we ever want to use our Akami NetStorage as a CDN for individual packages, we could utilize the gulp-cdn plugin that allows up to change <script> and <stylesheet> tags dependent upon environments.