Fast, Bullet-Proof Builds


taming grunt (or whatever)
and npm (or whatever)

@HTML5DevConf in SF (Spring 2014)

Agenda


  • Who I am
  • What's grunt and what's npm
  • NPM problems and solutions
  • Grunt problems and solutions

Who is this person?

What are Npm/Grunt?






Simple Use Cases

example npm package

What we use Grunt for


SOLVING THE HARD PROBLEMS: Npm

This is your brain


It's relying on the internet for builds

CI? Well as long as Things are ONline

What's up With NPM?

Well uptime is not so great

March 2014:

A Forumla:



Multiple weekly outages
+
Crunch time
------------------------------------
Irritable backend devs
Really angry ops team
Super sad frontend devs ':(


How NPM Installs Dependencies

NPM Solution 1: Archives

The dumb/easy way



back in the day there was this format called tar
also zip if you're into that sorta thing

NPM Solution 2: NGinx Proxy Cache

with extras...


Router

  Proxy 
Cache

NPM

Private Registry

NPM Solution 2 (cont): Kappa

NPM Solution 2 (CONT): ReggiE

NPM Solution 3

Sinopia

Npm Solution 4

Heroku/Gemfury

Other NPM Notes:

- `npm shrinkwrap` ~= pip freeze
- `npm link` = git submodules (but less sucky)
- `npm dedupe` will reduce file size by over half
- `npm prune` will remove uninstalled lingering packages
- NEVER add github dependencies!!!!!!!!!!

SOLVING THE HARD PROBLEMS: grunt

What's up with Grunt (or anything)

Requirements:
- Run Scripts
- Run Scripts Fast
- Be able to build dependencies
- Do it in a non-ugly syntax

Building Dependencies


Running grunt inside of node modules, doesn't work 
(might be an anti-pattern as well, depending on your architecture)


Grunt Syntax and Dependencies

grunt.loadTasks is a big deal

Before this:
- 1 gruntfile or a bunch of require statements
- no way to load tasks from other repos

Note: loadTasks isn't really well advertised in the grunt docs.  
No examples, but there are blog posts out there

Grunt Syntax PT2

Grunt Syntax 3: Requiring Tasks

Grunt Speed



Grunt Clean?

Links


Simple/Clean Gruntfile example:

Blog Post on cleaning up grunt at EB:

Closing Thoughts

- Our tools are fine
- Stop building, build systems
- Stop making package managers
- Let's solve the hard problems

js-build-systems

By Parris Khachi

js-build-systems

  • 1,466