Make JavaScript Lean, Mean, and Clean

transcript

Robert Winterbottom @RWinter85

Aamir Suleman @iSpatial

Slides: http://bit.ly/1Fb5ZHk

Mesquite C

March 11th , 2:30pm

Overview

• Gulp

• RequireJS Optimizer

• Other considerations

• Task Automation

• Simple and Efficient

Gulp – Common Uses

1. JSLint

2. Code Minification

3. Image Optimization

4. FTP

5. Watch files

Gulp – What is needed?

• Install NodeJS

• Install Gulp

• Get the Ingredients

gulp-* plugins

• Make the Recipe

gulpfile.js

Gulp - Plugin

Gulp – More Plugins

• gulp-concat

• gulp-autoprefixer

• gulp-minify-html

• gulp-imagemin

• gulp-uglify

• http://gulpjs.com/plugins/

Gulp - Chaining

development workflow

• Jade HTML

• Stylus CSS on edit

• JavaScript JSLint on edit

• Minify

• Port only require files (no jade, stylus, etc)

• FTP the build

build workflow

Demo : GulpJS

Build Option 2

• Concatenate JS files to a single file using

RequireJS Optimizer

• Simple to use !!!

• Open source

• Optimize your AMD

modules

• Works easily with your

favorite task runner or

directly in node.js

What can the optimizer do for you?

• Make your app load faster

• require your css and have it

inlined into the bundle.

• Generate multiple bundles, or

layers, for single or multi page

applications, including shared

bundles.

• Minimize the number of http

requests made when your app

loads.

src version

version

src folder build folder

~ 20 items

~ 100 KB

~ 3 items

~ 44 KB

Getting Started

• Grunt

• npm install grunt-contrib-requirejs --save

• Gulp

• npm install gulp-requirejs --save

• Node.js

• npm install requirejs --save

Installation

Dependencies• node.js

• or Java (although I have not used this approach)

• or Browser (new way to generate bundles)

Simple example with Grunt

Simple example with Gulp

Build Profile

Build Profile Explained

• baseUrl - base directory for the project

• paths - these are the packages you configured in

dojoConfig or require config

• empty: - special reserved word for empty or CDN

modules, such as esri, dijit, dojo, etc.

• name - name of your entry file (minus the .js extension), this

is where the optimizer will start looking for dependencies

• out - Where to put the bundled file

Gotchas• plugins

• dojo/text!myTemplate.html

• CDN or empty resources

• must be specified as empty: in the build

profile

• Aliases

• full path specified in build profile, not

relative to packages.

• Example:

'MainModel': 'app/js/models/Main'

as opposed to:

'MainModel': 'models/Main'source: http://i.verylol.com/

Additional Considerations

• Gzip

• CloudFront, CloudFlare

• AppCache – several gotchas!

• Service Workers – coming soon…

Resources

• https://developers.arcgis.com/javascript/

• https://github.com/requirejs/example-multipage/

• http://requirejs.org

• https://github.com/requirejs/

• http://gruntjs.com/

• http://gulpjs.com/

Questions

Github Code example

http://bit.ly/1A6JXzR

http://bit.ly/1Fb5ZHk

• @RWinter85

• @iSpatial

Make JavaScript Lean, Mean, and Clean

Technology