Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dependency management and Package management in...

Dependency management and Package management in JavaScript

Talk given at WebExpo (Prague) - September 2013

Sebastiano Armeli

September 20, 2013
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

Transcript

  1. Dependency management & Package management in JavaScript Sebastiano Armeli @sebarmeli

    WebExpo 2013, Prague (Czech Republic) Friday, September 20, 13
  2. Dependency management & Package management in JavaScript Sebastiano Armeli @sebarmeli

    WebExpo 2013, Prague (Czech Republic) Friday, September 20, 13
  3. view.js ------------ (function(window){ ‘use strict’; function View(model) { this.model =

    model; } window.View = View; })(window); Friday, September 20, 13
  4. <script src=”file1.js”></script> <script src=”file2.js”></script> <script src=”file3.js”></script> <script src=”file4.js”></script> <script src=”file5.js”></script>

    <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> index.html ------------ Friday, September 20, 13
  5. <script src=”file3.js”></script> <script src=”file4.js”></script> <script src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------

    <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
  6. <script src=”file3.js”></script> <script src=”file4.js”></script> <script src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------

    <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
  7. <script src=”file4.js”></script> <script src=”file3.js”></script> <script src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------

    <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
  8. app.js view.js helpers.js view2.js helpers2.js model.js 1 2 3 5

    4 6 4 1 3 2 5 6 Friday, September 20, 13
  9. 1 4 5 2 3 0 1 1 2,3 2

    5 3 4 IN-DEGREES NODE Friday, September 20, 13
  10. 4 5 2 3 0 2,3 2 5 3 4

    IN-DEGREES NODE 1 Results: Friday, September 20, 13
  11. 4 5 2 0 2 1 5 2 4 IN-DEGREES

    NODE 1 - 3 Results: Friday, September 20, 13
  12. 4 5 0 5 1 4 IN-DEGREES NODE 1 -

    3 - 2 Results: Friday, September 20, 13
  13. 4 0 4 IN-DEGREES NODE 1 - 3 - 2

    - 5 Results: Friday, September 20, 13
  14. 1 4 5 2 3 1 - 3 - 2

    - 5 - 4 4 - 5 - 2 - 3 - 1 Friday, September 20, 13
  15. var module = (function(){ // private variables, methods var title

    = “”; function f1() {} return { // public/privileged methods getTitle: function(){ return title; } } }()) ; MODULE PATTERN Friday, September 20, 13
  16. define(function () { var title = “”; function f1() {}

    return { getTitle: function() { return title; } } }); RJS MODULE PATTERN Friday, September 20, 13
  17. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Friday, September 20, 13
  18. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Friday, September 20, 13
  19. index.html ------------ <script src=”js/vendor/require.js” data-main=”js/main.js”></script> main.js ------------ require([‘view1’],function(view1){ view1.init(); });

    index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Friday, September 20, 13
  20. main.js ------------ require.config({ baseUrl: ‘./js’, paths: { ‘view1’: ‘app/views/view1’ }

    }); require([‘view1’],function(view1){ view1.init(); }); index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Friday, September 20, 13
  21. if ( typeof define === "function" && define.amd ) {

    define( "jquery", [], function () { return jQuery; }); } Friday, September 20, 13
  22. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Friday, September 20, 13
  23. index.html js / -- main.js -- helpers.js -- app /

    -- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Friday, September 20, 13
  24. LOADER PLUGINS • i18n!, async!, domReady! • text!, css!, json!,

    cs!, hbs! [plugin Module ID]![resource ID] Friday, September 20, 13
  25. main.js ------------ require.config({ baseUrl: ‘./js’ }); require([‘text!partials/file.txt’], function(txt) { //

    txt goes here }); index.html js / -- main.js -- vendor / -- require.js -- text.js -- partials / -- !le.txt Friday, September 20, 13
  26. build.js ------------ ({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", modules: [

    { name: "../main" } ] }) index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js tools / -- build.js Friday, September 20, 13
  27. build/js/main.js ---------------- index.html build / -- index.html -- build.txt --

    js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js -- tools / -- build.js js/vendor/../main.js ---------------- js/helpers.js js/vendor/view1.js js/vendor/../main.js build/build.txt ---------------- Friday, September 20, 13
  28. exports.render = function() {}; var module = require(‘view1’); NO de!ne()

    require() synchronous Server-side approach Friday, September 20, 13
  29. foo.js ------------ index.html js / -- main.js -- foo.js node_modules

    / package.json var Foo = function() { // do something }; module.exports = Foo; main.js ------------ var Foo = require(‘./foo’); var foo = new Foo(); Friday, September 20, 13
  30. index.html ------------ index.html js / -- main.js -- foo.js --

    bundle.js node_modules / package.json bundle.js ------------ ;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]) {var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o] [0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1: [function(require,module,exports){ var Foo = function(){ console.log("AA"); }; module.exports = Foo; },{}],2:[function(require,module,exports){ var Foo = require('./foo'); var foo = new Foo(); },{"./foo":1}]},{},[2]) <script src=”js/bundle.js”> </script> Friday, September 20, 13
  31. Speed up your development work"ow Automate common tasks DRY with

    Repository / Registry Friday, September 20, 13
  32. Package Depedencies A B C C =1.1.0 >1.2.0 Which version

    should I download? Friday, September 20, 13
  33. Java Ruby Python .Net OSX Linux Maven/Gradle Rubygems pip NuGet

    Homebrew yum/apt Friday, September 20, 13
  34. package.json ------------ { "name": "my-app", "version": "0.0.1", "dependencies": { "jquery":

    "~2.0" }, "devDependencies": { "qunit": "0.5.x" } } index.html package.json js / -- app.js Friday, September 20, 13
  35. bower.json ------------ { "name": "my-app", "version": "0.0.1", "ignore": [ "build",

    "Gruntfile.js", "package.json", "bower.json" ], "main": ["js/app.js"], "dependencies": { "requirejs": "~2.1.8", // >=2.1.8 < 2.2.0 "jquery": "~2.0" // >=2.0.0 < 2.1.0 }, "devDependencies": { "qunit": "^1.12.0" // >=1.12.0 < 2.0.0 } } index.html bower.json js / -- app.js Friday, September 20, 13
  36. .bowerrc ------------ { "directory”: “js/vendor”, “json”: “bower.json” } index.html bower.json

    .bowerrc js / -- app.js -- vendor/ -- jquery/ -- jquery.js -- requirejs/ -- require.js index.html ------------ <script src=”js/vendor/jquery/jquery.js > </script> Friday, September 20, 13
  37. bower install git://github.com/jquery/jquery.git#1.8.3 bower install ../my-package Git endpoint + Git

    tag Local package bower install https://github.com/jquery/jquery.git Git endpoint Friday, September 20, 13
  38. bower list my-package ├── jquery#1.8.2 incompatible with ~2.0.0 (2.0.3 available)

    └── requirejs#2.1.8 my-package ├── jquery#2.0.3 └── requirejs#2.1.8 Friday, September 20, 13
  39. source_file ----------- <import> <module2>; // <use> <module2>; $ bower install

    jquery Package management Friday, September 20, 13
  40. source_file ----------- <import> <module2>; // <use> <module2>; $ npm install

    jquery Package management Friday, September 20, 13