PolyConf: JS Modules

PolyConf: JS Modules

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

October 31, 2014
Tweet

Transcript

  1. 8.

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


    } }
 }); require(['./file'], function(f) { f.red(); });
  2. 9.

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


    } }
 }); require(['./file'], function(f) { f.red(); });
  3. 10.

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


    } }
 }); require(['./file'], function(f) { f.red(); });
  4. 11.

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


    } }
 }); require(['./file'], function(f) { f.red(); });
  5. 12.

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


    } }
 }); require(['./file'], function(f) { f.red(); });
  6. 15.

    // module.js var $ = require('jquery'); module.exports = { red:

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

    // module.js var $ = require('jquery'); module.exports = { red:

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

    // module.js var $ = require('jquery'); module.exports = { red:

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

    // module.js var $ = require('jquery'); module.exports = { red:

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

    // 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. 22.

    // 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. 23.

    // 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. 24.

    // 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. 25.

    no dev build step (ish) build tool for prod (ish)

    no dependency management async or sync
  15. 29.
  16. 31.

    // module.js import $ from './jquery'; export var red =

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

    // module.js import $ from './jquery'; export var red =

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

    // module.js import $ from './jquery'; export var red =

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

    // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js import * as app from './module'; app.red();
  20. 35.

    // module.js import $ from './jquery'; export var red =

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

    // module.js import $ from './jquery'; export default function() {

    $('p').css('color', red');
 } // app.js import red from './module'; red();
  22. 37.

    // module.js import $ from './jquery'; export default function() {

    $('p').css('color', red');
 } // app.js import red from './module'; red();
  23. 38.
  24. 39.

    don't have to run code to know exports static lookups

    visibility of variables circular dependencies ready for types (!)
  25. 44.

    // module.js import $ from './jquery'; export var red =

    function() { $('p').css('color', red');
 } // app.js System.import('./module') .then(function(mod) { mod.red();
 });
  26. 48.
  27. 58.
  28. 59.
  29. 60.
  30. 61.