Building our Web ApplicationsUtilizing 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, npmDevOps 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 Glofshttp://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

ChefBrowser

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 Developerhttps://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 approach2.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 ES5Solution: run the gulp build

Issue: Identify Aptimize issues post check-inSolution: 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-debugexample 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 functionalitygulp 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-debugexample 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-debugexample 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

Intra-Component/Solution (high – level)

\Front End

\components

\foo-ui

\foo-css

\foo-toast

\foo-…

\foo-search

\foo-rpc

DEV BRANCH

TFS-Build Server

Gated CheckinsAuto-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 furtherImprove 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

ChefBrowser

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 AgnosticOnce our web application is server agnostic…

Objective #6: Front-End Server Agnostic

KitchenBrowser

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 callsPackages 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 togetherThen 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.