PolyConf: JS Modules

Transcript

1. 1.

   JavaScript Modules

2. 2.

   @Jack_Franklin javascriptplayground.com

3. 3.

   gocardless.com

4. 4.

   The Problem

5. 5.

   Dependencies

6. 6.

   Solutions

7. 7.

   AMD (Require.js)

8. 8.

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


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

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


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

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


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

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


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

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


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

    no dev build step build tool for prod specific syntax

    to learn asynchronous
14. 14.

    Browserify

15. 15.

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

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

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

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

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

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

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

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

    dev build step build tool for prod CommonJS (Node) synchronous

20. 20.

    <script> tags

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

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

    no dependency management async or sync
26. 26.

    no dependency management

27. 27.

    We can do better

28. 28.

    We have done better

29. 29.

    None
30. 30.

    ES6 Modules

31. 31.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Static

39. 39.

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

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

    async or sync

41. 41.

    static imports = can resolve before evaluation of module

42. 42.

    it just…works?

43. 43.

    Module API

44. 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. 45.

    Module Config (hooks)

46. 46.

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

47. 47.

    But what about now?

48. 48.

    None
49. 49.

    system.js traceur.js es6-module-loader.js

50. 50.

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

    alert('hello world');
51. 51.

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

    alert('hello world');
52. 52.

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

    alert('hello world');
53. 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. 54.

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

    $('p').css('color', 'red'); };
55. 55.

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

    $('p').css('color', 'red'); };
56. 56.

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

    $('p').css('color', 'red'); };
57. 57.

    // app.js import $ from 'jquery' import red from './red'

    $(function() { red(); });
58. 58.

    None
59. 59.

    None
60. 60.

    jspm.io

61. 61.

    Demo!

62. 62.

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

63. 63.

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

64. 64.

    npm install --global jspm

65. 65.

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

66. 66.

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

67. 67.

    this is the best solution right now

68. 68.

    jspm bundle app

69. 69.

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

    </script>
70. 70.

    it just…works?

71. 71.

    jspm.io @guybedford

72. 72.

    ES6 is coming The tooling is there And will only

    get better
73. 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. 74.

    Thanks! @jack_franklin