Front End Dependency Management at CascadiaJS
-
Upload
joesepi -
Category
Technology
-
view
360 -
download
1
description
Transcript of Front End Dependency Management at CascadiaJS
![Page 1: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/1.jpg)
FRONT END DEPENDENCYMANAGEMENT
LET'S HUG IT OUT, FRIENDSPresented to you by / Joe Sepi @joe_sepi
![Page 2: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/2.jpg)
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
![Page 3: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/3.jpg)
Rene Auberjonois
![Page 4: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/4.jpg)
WE'RE ALL IN THIS TOGETHER
![Page 5: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/5.jpg)
HISTORYDojo, Modules/Transport/C, RunJS, Narwhal, etc...
![Page 6: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/6.jpg)
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
![Page 7: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/7.jpg)
So those are the problems we are trying to solve, but what arethe benefits of solving these problems?
performance, stability, sanity, reuse,
![Page 8: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/8.jpg)
HOW DO WE GET THERE?
ModulesTooling
Bonus: Repository
![Page 9: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/9.jpg)
PLEASE DON'T SKIN THE CAT
![Page 10: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/10.jpg)
AMD, RequireJS, Bower--
CommonJS, Browserify, NPM
![Page 11: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/11.jpg)
How do we use these tools to actually solve this problem?
![Page 12: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/12.jpg)
REQUIRE
![Page 13: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/13.jpg)
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() + '!'); };});
![Page 14: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/14.jpg)
BROWSERIFY
![Page 15: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/15.jpg)
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() + '!');};
![Page 16: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/16.jpg)
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}
![Page 17: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/17.jpg)
BEEP + ROBOT?? - USING EXPORTS.WHATEVSvar robot = require('robot');exports.speak = function () { robot('beep');};exports.dance = function () { $('body').append('<img src="dancing-bender.gif">');};
![Page 18: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/18.jpg)
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">'); };});
![Page 19: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/19.jpg)
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;});
![Page 20: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/20.jpg)
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;});
![Page 21: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/21.jpg)
HERE ARE THE WAYS IN WHICH EACHAPPROACH SHINES:
![Page 22: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/22.jpg)
REQUIRE BIG WIN:ASYNC MODULE LOAD
dive in quicklydebug loaded deps in console
dynamically load code
![Page 23: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/23.jpg)
BROWSERIFY BIG WIN(S):npm install [module-name] --saveserver and browser code share
through bundling (and transforms) you can do most anything
![Page 24: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/24.jpg)
AMD, RequireJS, Bowervs
CommonJS, Browserify, NPM
![Page 25: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/25.jpg)
WHAT ABOUT ES6 MODULES?WILL THEY SAVE US FROM OURSELVES AND SOLVE WORLD HUNGER?
I'm glad you asked!
![Page 26: Front End Dependency Management at CascadiaJS](https://reader033.fdocuments.net/reader033/viewer/2022051013/547cfcf9b4af9fb9158b5324/html5/thumbnails/26.jpg)
IN CONCLUSIONDo what feels right
Come talk to me about what you think I missed or am missing