This document discusses module bundling tools for JavaScript applications. It introduces the problems of growing code complexity and need for optimized delivery of code. It then summarizes two popular module bundling tools: Webpack and jspm. Webpack supports CommonJS, AMD and ES6 module syntax and uses loaders and plugins to bundle assets. jspm uses the SystemJS module loader and bundles modules for production, while loading them asynchronously for development. Both tools aim to address the challenges of modular code management and optimized delivery.

1. Module Bundling

2. Agenda
1. Introduction
2. Webpack
3. jspm

3. Simon Bächler
Web developer at Feinheit

4. The Problem
• Web sites are turning into Web apps
• Code complexity grows as the site gets bigger
• Developers prefer discrete JS files/modules
• Deployment requires optimized code in just one
or a few HTTP calls
• No standardized import functionality (until now)

5. <!--[if lt IE 10]>
<script type="text/javascript" src="/static/libs/matchMedia/matchMedia.js"></script>
<script type="text/javascript" src="/static/libs/matchMedia/matchMedia.addListener.js"></script>
<script type="text/javascript" src="/static/libs/1579671/rAF.js"></script>
<![endif]-->
<!-- vendor scripts -->
<script type="text/javascript" src="/static/libs/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="/static/libs/underscore/underscore.js"></script>
<script type="text/javascript" src="/static/libs/backbone/backbone.js"></script>
<script type="text/javascript" src="/static/libs/backbone-pageable/lib/backbone-pageable.min.js"></script>
<script type="text/javascript" src="/static/libs/jquery-hoverIntent/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="/static/libs/enquire/dist/enquire.min.js"></script>
<script type="text/javascript" src="/static/libs/iCheck/icheck.js"></script>
<script type="text/javascript" src="/static/libs/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="/static/libs/jquery.transit/jquery.transit.js"></script>
<script type="text/javascript" src="/static/libs/jquery.scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="/static/libs/socialcount/dist/socialcount.js"></script>
<script type="text/javascript" src="/static/libs/jQuery-Collapse/src/jquery.collapse.js"></script>
<script type="text/javascript" src="/static/libs/easydropdown/src/jquery.easydropdown.js"></script>
<script type="text/javascript" src="/static/libs/iosslider/_src/jquery.iosslider.min.js"></script>
<script type="text/javascript" src="/static/libs/fastclick/lib/fastclick.js"></script>
<script type="text/javascript" src="/static/libs/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/static/libs/loglevel/dist/loglevel.min.js"></script>
<script type="text/javascript" src="/static/libs/raven-js/dist/raven.min.js"></script>
<!-- end vendor scripts -->
<!-- customized libraries -->
<script type="text/javascript" src="/static/webapp/js/backbone.treemodel.js"></script>
<script type="text/javascript" src="/static/webapp/js/backbone.subset.js"></script>
<script type="text/javascript" src="/static/webapp/js/jquery-ui-1.11.1.custom.min.js"></script>
<script type="text/javascript" src="/static/webapp/js/jquery.ui.datepicker-de-en.js"></script>
<script type="text/javascript" src="/static/webapp/js/moment-locales.js"></script>
<!-- app scripts -->
<script type="text/javascript" src="/static/webapp/js/raven.config.js"></script>
<script type="text/javascript" src="/static/webapp/js/global.js"></script>
<script type="text/javascript" src="/static/webapp/js/footer.js"></script>
<script type="text/javascript" src="/static/webapp/js/breadcrumbs.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/models.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/helpers/views.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/views/singleviews.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/views/listviews.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/collections.js"></script>
<script type="text/javascript" src="/static/webapp/js/filters/controller.js"></script>
<script type="text/javascript" src="/static/webapp/js/video.js"></script>
<script type="text/javascript" src="/static/webapp/js/slider.js"></script>
<script type="text/javascript" src="/static/webapp/js/forms.js"></script>
<script type="text/javascript" src="/static/webapp/js/analytics.js"></script>
<script type="text/javascript" src="/static/webapp/js/socialcount.js"></script>
<script type="text/javascript" src="/static/webapp/js/animations.js"></script>
<script type="text/javascript" src="/static/webapp/js/nav/models.js"></script>
<script type="text/javascript" src="/static/webapp/js/nav/views.js"></script>
<script type="text/javascript" src="/static/webapp/js/nav/controller.js"></script>

6. Javascript Modularization
2010 (Crockford)
var MYAPP = window.MYAPP || {}
MYAPP.Views = {
listView: new ListView(),
detailView: new DetailView()
};

7. Javascript Modularization
2010 (Crockford)
(function($, MYAPP) {
var app = new MYAPP.App();
app.init($('#container'));
})(jQuery, MYAPP);

8. True App Modularization
• Code is split up into different modules.
• Dependency graph
• The loading order is irrelevant.
• Code gets executed if all dependencies are
loaded.
• Dependencies can be mocked.

9. App delivery
• Requests are expensive.
• Deliver as few files as possible.
• Deliver the «above the fold» data first.
• Deliver only code that is needed by the client.

10. Smart Modularization
common-chunks.js
current-app.js
special-feature1.js special-feature2.js

11. Assets Versioning
• Adds its hash value to the file name
• Allows for setting long expiration headers
• Requires the HTML to update as well.
• Supported by most popular backends
/static/dist/main-ebf5ec7176585199eb0a.js

12. Modularization today
CommonJS
var $ = require('jquery');
module.exports = function () {};

13. Modularization today
AMD
define(['jquery'] , function ($) {
return function () {};
});

14. Modularization today
ECMA Script 2015
import $ from 'jquery';
function myExample(){};
export default myExample;

15. Java Script Module Bundlers
• RequireJS (AMD/CommonJS*)
• Browserify (CommonJS/AMD*/ES6*)
• Webpack (CommonJS/AMD/ES6*)
• JSPM / SystemJS (ES6/AMD/CommonJS)

18. Webpack supports all three
module systems

19. Configuration based
module.exports = {
context: path.join(__dirname, 'assets'),
entry: {
main: [ 'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./js/main'],
styles: ['./scss/app.scss', './scss/select.less'],
editor: './scss/editor.scss'
},
output: {
path: path.resolve('./assets/build/'),
publicPath: 'http://localhost:3000/assets/build/',
filename: '[name]-[hash].js'
},
devtool: 'source-map',
…
}

20. loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel']},
{
test: /.scss$/,
loader: ExtractTextPlugin.extract(
"css?sourceMap!postcss-loader!sass?" +
"outputStyle=expanded&sourceMap=true")))
},
{
test: /.less/,
loader: ExtractTextPlugin.extract(
"style-loader", "css-loader!less-loader?relative-urls")
},
{
test: /.(png|woff|svg|eot|ttf)$/,
loader: "url-loader?limit=20000"
}
]

21. Async loading
var films =
document.getElementById('film-gallery');
if(films !== null) {
require.ensure(['lodash'], function(require){
require('./components/FilmApp');
});
}

22. Hot Module Replacement
DEMO

23. CSS Live Reload
• No Live Reload with ExtractTextPlugin
• Source maps only with ExtractTextPlugin
(because of WebInspector)

24. npm is sufficient
npm is the default package manager
and task runner

25. Production configuration
• Import original configuration
• Overwrite config attributes
• Set NODE_ENV to 'production'

26. Documentation

27. jspm.io

28. jspm / SystemJS
• Package manager (jspm) and module loader
(SystemJS)
• For development: load modules synchronously
• For production: create a bundle
• Support for SPDY (via its own CDN) and possibly
HTTP2

29. jspm / SystemJS
• In active development
• Uses npm and Github as registries
• A CSS loading plugin is available
• Development != Production environment

30. DEMO

31. END OF PART II