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. JavaScript Modules

    View full-size slide

  2. @Jack_Franklin
    javascriptplayground.com

    View full-size slide

  3. gocardless.com

    View full-size slide

  4. Dependencies

    View full-size slide

  5. AMD (Require.js)

    View full-size slide

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

    }
    }

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

    View full-size slide

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

    }
    }

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

    View full-size slide

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

    }
    }

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

    View full-size slide

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

    }
    }

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

    View full-size slide

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

    }
    }

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

    View full-size slide

  11. no dev build step
    build tool for prod
    specific syntax to learn
    asynchronous

    View full-size slide

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

    }

    };
    // app.js
    var app = require('./module');
    app.red();

    View full-size slide

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

    }

    };
    // app.js
    var app = require('./module');
    app.red();

    View full-size slide

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

    }

    };
    // app.js
    var app = require('./module');
    app.red();

    View full-size slide

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

    }

    };
    // app.js
    var app = require('./module');
    app.red();

    View full-size slide

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

    View full-size slide

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

    }
    // app.js
    red();
    // index.html



    View full-size slide

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

    }
    // app.js
    red();
    // index.html



    View full-size slide

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

    }
    // app.js
    red();
    // index.html



    View full-size slide

  20. // module.js
    var red = function() {
    $('p').css('color', 'red');

    }
    // app.js
    red();
    // index.html



    View full-size slide

  21. no dev build step (ish)
    build tool for prod (ish)
    no dependency
    management
    async or sync

    View full-size slide

  22. no dependency
    management

    View full-size slide

  23. We can do better

    View full-size slide

  24. We have done better

    View full-size slide

  25. // module.js
    import $ from './jquery';
    export var red = function() {
    $('p').css('color', red');

    }
    // app.js
    import * as app from './module';
    app.red();

    View full-size slide

  26. // module.js
    import $ from './jquery';
    export var red = function() {
    $('p').css('color', red');

    }
    // app.js
    import * as app from './module';
    app.red();

    View full-size slide

  27. // module.js
    import $ from './jquery';
    export var red = function() {
    $('p').css('color', red');

    }
    // app.js
    import * as app from './module';
    app.red();

    View full-size slide

  28. // module.js
    import $ from './jquery';
    export var red = function() {
    $('p').css('color', red');

    }
    // app.js
    import * as app from './module';
    app.red();

    View full-size slide

  29. // module.js
    import $ from './jquery';
    export var red = function() {
    $('p').css('color', red');

    }
    // app.js
    import {red} from './module';
    red();

    View full-size slide

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

    }
    // app.js
    import red from './module';
    red();

    View full-size slide

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

    }
    // app.js
    import red from './module';
    red();

    View full-size slide

  32. don't have to run code to know
    exports
    static lookups
    visibility of variables
    circular dependencies
    ready for types (!)

    View full-size slide

  33. async or sync

    View full-size slide

  34. static imports = can
    resolve before
    evaluation of module

    View full-size slide

  35. it just…works?

    View full-size slide

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

    }
    // app.js
    System.import('./module')
    .then(function(mod) {
    mod.red();

    });

    View full-size slide

  37. Module Config
    (hooks)

    View full-size slide

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

    View full-size slide

  39. But what about now?

    View full-size slide

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

    View full-size slide

  41. // index.html
    <br/>script><br/><script><br/>System.import('./app');<br/>
    // app.js
    alert('hello world');

    View full-size slide

  42. // index.html
    <br/>script><br/><script><br/>System.import('./app');<br/>
    // app.js
    alert('hello world');

    View full-size slide

  43. // index.html
    <br/>script><br/><script><br/>System.import('./app');<br/>
    // app.js
    alert('hello world');

    View full-size slide

  44. // index.html

    <br/>System.import(‘./app’)<br/>.catch(<br/>console.error.bind(console)<br/>);<br/>

    Hello World

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. // app.js
    import $ from 'jquery'
    import red from './red'
    $(function() {
    red();
    });

    View full-size slide

  49. // index.html
    <br/>
    <br/>System.import('~/app');<br/>

    View full-size slide

  50. // index.html
    <br/>
    <br/>System.import('~/app');<br/>

    View full-size slide

  51. npm install --global jspm

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. this is the best solution
    right now

    View full-size slide

  55. jspm bundle app

    View full-size slide

  56. // built.html



    <br/>System.import('app');<br/>

    View full-size slide

  57. it just…works?

    View full-size slide

  58. jspm.io
    @guybedford

    View full-size slide

  59. ES6 is coming
    The tooling is there
    And will only get better

    View full-size slide

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

    View full-size slide

  61. Thanks!
    @jack_franklin

    View full-size slide