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

PolyConf: JS Modules

PolyConf: JS Modules

Jack Franklin

October 31, 2014
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

  1. define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');


    } }
 }); require(['./file'], function(f) { f.red(); });
  2. define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');


    } }
 }); require(['./file'], function(f) { f.red(); });
  3. define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');


    } }
 }); require(['./file'], function(f) { f.red(); });
  4. define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');


    } }
 }); require(['./file'], function(f) { f.red(); });
  5. define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');


    } }
 }); require(['./file'], function(f) { f.red(); });
  6. // module.js var $ = require('jquery'); module.exports = { red:

    function() { $('p').css('color', 'red');
 }
 }; // app.js var app = require('./module'); app.red();
  7. // module.js var $ = require('jquery'); module.exports = { red:

    function() { $('p').css('color', 'red');
 }
 }; // app.js var app = require('./module'); app.red();
  8. // module.js var $ = require('jquery'); module.exports = { red:

    function() { $('p').css('color', 'red');
 }
 }; // app.js var app = require('./module'); app.red();
  9. // module.js var $ = require('jquery'); module.exports = { red:

    function() { $('p').css('color', 'red');
 }
 }; // app.js var app = require('./module'); app.red();
  10. // module.js var red = function() { $('p').css('color', 'red');
 }

    // app.js red(); // index.html <script src="jquery.js"></script> <script src="module.js"></script> <script src="app.js"></script>
  11. // module.js var red = function() { $('p').css('color', 'red');
 }

    // app.js red(); // index.html <script src="jquery.js"></script> <script src="module.js"></script> <script src="app.js"></script>
  12. // module.js var red = function() { $('p').css('color', 'red');
 }

    // app.js red(); // index.html <script src="jquery.js"></script> <script src="module.js"></script> <script src="app.js"></script>
  13. // module.js var red = function() { $('p').css('color', 'red');
 }

    // app.js red(); // index.html <script src="jquery.js"></script> <script src="module.js"></script> <script src="app.js"></script>
  14. no dev build step (ish) build tool for prod (ish)

    no dependency management async or sync
  15. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import * as app from './module'; app.red();
  16. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import * as app from './module'; app.red();
  17. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import * as app from './module'; app.red();
  18. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import * as app from './module'; app.red();
  19. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import {red} from './module'; red();
  20. // module.js import $ from './jquery'; export default function() {

    $('p').css('color', red');
 } // app.js import red from './module'; red();
  21. // module.js import $ from './jquery'; export default function() {

    $('p').css('color', red');
 } // app.js import red from './module'; red();
  22. don't have to run code to know exports static lookups

    visibility of variables circular dependencies ready for types (!)
  23. // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js System.import('./module') .then(function(mod) { mod.red();
 });