PolyConf: JS Modules

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
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?
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(); });
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