PolyConf: JS Modules

PolyConf: JS Modules

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

October 31, 2014
Tweet

Transcript

  1. JavaScript Modules

  2. @Jack_Franklin javascriptplayground.com

  3. gocardless.com

  4. The Problem

  5. Dependencies

  6. Solutions

  7. AMD (Require.js)

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


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


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


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


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


    } }
 }); require(['./file'], function(f) { f.red(); });
  13. no dev build step build tool for prod specific syntax

    to learn asynchronous
  14. Browserify

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

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

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

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

    function() { $('p').css('color', 'red');
 }
 }; // app.js var app = require('./module'); app.red();
  19. dev build step build tool for prod CommonJS (Node) synchronous

  20. <script> tags

  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>
  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>
  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>
  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>
  25. no dev build step (ish) build tool for prod (ish)

    no dependency management async or sync
  26. no dependency management

  27. We can do better

  28. We have done better

  29. None
  30. ES6 Modules

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

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

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

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

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

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

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

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

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

    visibility of variables circular dependencies ready for types (!)
  40. async or sync

  41. static imports = can resolve before evaluation of module

  42. it just…works?

  43. Module API

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

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

  46. http://www.2ality.com/ 2014/09/es6-modules- final.html

  47. But what about now?

  48. None
  49. system.js traceur.js es6-module-loader.js

  50. // index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js

    alert('hello world');
  51. // index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js

    alert('hello world');
  52. // index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js

    alert('hello world');
  53. // index.html <script src="lib/system.js"></script> <script> System.import(‘./app’) .catch( console.error.bind(console) ); </script>

    … <body><p>Hello World</p></body>
  54. // red.js import $ from 'jquery' export default function() {

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

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

    $('p').css('color', 'red'); };
  57. // app.js import $ from 'jquery' import red from './red'

    $(function() { red(); });
  58. None
  59. None
  60. jspm.io

  61. Demo!

  62. // index.html <script src='//jspm.io/system.js'> </script> <script> System.import('~/app'); </script>

  63. // index.html <script src='//jspm.io/system.js'> </script> <script> System.import('~/app'); </script>

  64. npm install --global jspm

  65. jspm install npm:lodash jspm install github:components/ jquery

  66. // app.js import $ from 'npm:jquery'; console.log($.fn.jquery) // 2.1.1

  67. this is the best solution right now

  68. jspm bundle app

  69. // built.html <script src='system.js'></script> <script src='config.js'></script> <script src='build.js'></script> <script> System.import('app');

    </script>
  70. it just…works?

  71. jspm.io @guybedford

  72. ES6 is coming The tooling is there And will only

    get better
  73. http://javascriptplayground.com/ https://github.com/assetgraph/ assetgraph https://github.com/ModuleLoader/es6- module-loader https://github.com/systemjs/systemjs http://jspm.io/

  74. Thanks! @jack_franklin