What i learned from the tooling tutorials

Building, modularising and debugging JavaScript

Your Host

Ben Paddock (@_pads)
Software developer
BT Osmosoft

Taken From

The Tooling Tutorials

http://2012.full-frontal.org/workshop/tooling

Remy Sharp (JS Bin, Full Frontal etc...)
Rebecca Murphey (jQuery)
Jake Archibald - (Google, Lanyrd)

We'll Cover...

  • Grunt - building projects

  • RequireJS - modular JavaScript

  • A bit of debugging in Chrome

Grunt

  • Task automation for front-end projects

  • Allows you to choose the tools you need 
    - Or write your own
  • Based on Node and works with NPM

  • Going through a heavy rewrite (0.3 -> 0.4)
    - We'll be looking at 0.3

Grunt Built-in Tasks

  • init: bootstrapping
  • lint: code quality checks
  • concat: combine files into one
  • min: Minify source code
  • qunit: Run tests
  • server: Host your files

Getting Started

Given a valid Node installation
npm init
name: (my-amazing-app) 
version: (1.0.0) 
license: (BSD) 
About to write to /home/user/my-amazing-app/package.json:
npm install -g grunt
grunt init:gruntfile
Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n) 
[?] Will files be concatenated or minified? (Y/n) 
[?] Will you have a package.json file? (Y/n) 
[?] Do you need to make any changes to the above before continuing? (y/N)

Shall We Look At Some Code?

cut to demo

What's changing in 0.4

  • https://github.com/gruntjs/grunt/wiki/Upgrading-from-0.3-to-0.4

RequireJS

  • A way to write and consume modular JavaScript

  • JavaScript's answer to "import"
    - dependency management but not obtainment

  • Helps reduce global pollution (window.myThing = ...)

  • Uses an AMD (Asynchronous Module Definition) API

  • Optimised down to one or more files (configurable)


But Wait, There's More!

  • You only need to manage one script tag
    - No more guessing required order

  • Modules are swappable via configuration
    - Comparable to dependency injection
    - But testing is harder than it should be

  • Plugin architecture
    - Load other file types and treat them as dependencies

  • Coerce non-AMD files to behave like them (shim)

AMD You Say?

  • Async loading of modules and their dependencies
    - Sync in a browser = nasty

  • Modules can consume dependencies, provide them
    (or both)
require(["my-handy-dep", "the-ultimate-dep"], function(dep1, dep2) {
    alert("I don't return anything, HA!");
}
define("mega-module", function() { return "I'm amazing, USE ME" }
define("module-with-depp", ["johnny"], function(JohnnyDepp) { 
    return "I need" + JohnnyDepp + " in my life" 
}

Pretty Dependency Graph


Optimising

  • Each module is a file that requires loading

  • Multiple file loading != optimal network

  • Bundled r.js combines files into one
    - or a few to take advantage of parallell loading

  • Choose an optimisation engine to minify (or none)

  • You can even create source maps
    - We'll see this later!


This Requires a Demo

to the command line...

The Future of Modules

There are other options already out there:
Common JS
Angular JS

ECMAScript Harmony is coming...

http://wiki.ecmascript.org/doku.php?id=harmony:modules

Debugging

  • For Chrome (sorry)

  • Source Maps

Source Maps

  • How do you debug  a single minified code?
  • Or refer back to your CoffeeScript or TypeScript?

  • Create a map at compile-time

  • Only serve the optimised file to users in a script tag

  • Host the development files and debug them

Let's Go On a Journey

Inspect the web

Want to know more?

https://github.com/pads/yap

http://gruntjs.com

http://requirejs.org/

https://developers.google.com/chrome-developer-tools/

http://leftlogic.com/training

Thank you

Questions?
Made with Slides.com