front end dependency management at cascadiajs

FRONT END DEPENDENCYMANAGEMENT

LET'S HUG IT OUT, FRIENDSPresented to you by / Joe Sepi @joe_sepi

I AM WHO I THINK I AM.VP of Engineering at where we do financialanalysis awesomelyPreviously worked at doing dev, devmgmt and dev relationsI also consider myself something of a

on the twitter machine

Novus.com

The New York Times

punk@joe_sepi

Rene Auberjonois

WE'RE ALL IN THIS TOGETHER

HISTORYDojo, Modules/Transport/C, RunJS, Narwhal, etc...

WHAT ARE THE PROBLEMS WE ARE TRYING TOSOLVE?

<script src="..."></script><script src="..."></script><script src="..."></script><script MyApp.something.whatever.gone.too.far('fail');this must load before that but not before

So those are the problems we are trying to solve, but what arethe benefits of solving these problems?

performance, stability, sanity, reuse,

HOW DO WE GET THERE?

ModulesTooling

Bonus: Repository

PLEASE DON'T SKIN THE CAT

AMD, RequireJS, Bower--

CommonJS, Browserify, NPM

How do we use these tools to actually solve this problem?

REQUIRE

INDEX.HTML<script data-main="js/main" src="js/require.js"></script>

MAIN.JSrequire(['beep', 'boop'], function(beep, boop) { beep(); boop();});

BEEP.JSdefine(['robot'], function(robot) { var speak = function () { robot('beep'); }; return speak;});

ROBOT.JSdefine(function() { return function (s) { return console.log(s.toUpperCase() + '!'); };});

BROWSERIFY

IN TERMINAL$ browserify main.js > bundle.js

INDEX.HTML<script src="js/bundle.js"></script>

MAIN.JSvar beep = require('beep');var boop = require('boop');beep();boop();

BEEP.JSvar robot = require('robot');var speak = function () { robot('beep');};module.exports = speak;

ROBOT.JSmodule.exports = function (s) { return console.log(s.toUpperCase() + '!');};

BEEP + ROBOT?? - USING MODULE.EXPORTS OBJECTvar robot = require('robot');var speak = function () { robot('beep');};var dance = function () { $('body').append('<img src="dancing-bender.gif">');};module.exports = { speak : speak, dance : dance}

BEEP + ROBOT?? - USING EXPORTS.WHATEVSvar robot = require('robot');exports.speak = function () { robot('beep');};exports.dance = function () { $('body').append('<img src="dancing-bender.gif">');};

BEEP + ROBOT?? - USING REQ WITH HYBRID PATTERNdefine(function(require, exports, module) { var robot = require('robot'); exports.speak = function () { robot('beep'); }; exports.dance = function () { $('body').append('<img src="dancing-bender.gif">'); };});

BACKBONE VIEWdefine([ 'jquery', 'underscore', 'backbone', 'text!templates/example.html'], function ($, _, Backbone, exampleTemplate) { var AppView = Backbone.View.extend({ el: '#main', template: _.template(exampleTemplate), render: function () { this.$el.html(this.template({})); return this; } });

return AppView;});

BACKBONE VIEWdefine(function (require, exports, module) { var $ = require('jquery'); var _ = require('underscore'); var Backbone = require('backbone'); var exampleTemplate = require('text!templates/example.html');

var AppView = Backbone.View.extend({ el: '#main', template: _.template(exampleTemplate), render: function () { this.$el.html(this.template({})); return this; } });

return AppView;});

HERE ARE THE WAYS IN WHICH EACHAPPROACH SHINES:

REQUIRE BIG WIN:ASYNC MODULE LOAD

dive in quicklydebug loaded deps in console

dynamically load code

BROWSERIFY BIG WIN(S):npm install [module-name] --saveserver and browser code share

through bundling (and transforms) you can do most anything

AMD, RequireJS, Bowervs

CommonJS, Browserify, NPM

WHAT ABOUT ES6 MODULES?WILL THEY SAVE US FROM OURSELVES AND SOLVE WORLD HUNGER?

I'm glad you asked!

IN CONCLUSIONDo what feels right

Come talk to me about what you think I missed or am missing

THE ENDPresented to you by / Joe Sepi @joe_sepi