Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PolyConf: JS Modules
Search
Jack Franklin
October 31, 2014
Technology
0
360
PolyConf: JS Modules
Jack Franklin
October 31, 2014
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
220
Components on the Web: Frontend NE
jackfranklin
1
800
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
460
Front Trends: Migrating complex software
jackfranklin
1
800
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
530
FullStackFest: Elm for JS Developers
jackfranklin
1
230
Codelicious: Intro to ES2015
jackfranklin
0
360
PolyConf: Elm for JS Developers
jackfranklin
0
270
Other Decks in Technology
See All in Technology
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
microCMSではじめるAIライティング
himaratsu
0
110
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
230
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
190
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
shake-upを科学する
rsakata
7
900
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
8k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
Operating Operator
shhnjk
1
640
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Designing Experiences People Love
moore
142
24k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Statistics for Hackers
jakevdp
799
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
It's Worth the Effort
3n
185
28k
Transcript
JavaScript Modules
@Jack_Franklin javascriptplayground.com
gocardless.com
The Problem
Dependencies
Solutions
AMD (Require.js)
define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');
} } }); require(['./file'], function(f) { f.red(); });
define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');
} } }); require(['./file'], function(f) { f.red(); });
define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');
} } }); require(['./file'], function(f) { f.red(); });
define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');
} } }); require(['./file'], function(f) { f.red(); });
define(['jquery'], function($) { return { red: function() { $('p').css('color', 'red');
} } }); require(['./file'], function(f) { f.red(); });
no dev build step build tool for prod specific syntax
to learn asynchronous
Browserify
// module.js var $ = require('jquery'); module.exports = { red:
function() { $('p').css('color', 'red'); } }; // app.js var app = require('./module'); app.red();
// module.js var $ = require('jquery'); module.exports = { red:
function() { $('p').css('color', 'red'); } }; // app.js var app = require('./module'); app.red();
// module.js var $ = require('jquery'); module.exports = { red:
function() { $('p').css('color', 'red'); } }; // app.js var app = require('./module'); app.red();
// module.js var $ = require('jquery'); module.exports = { red:
function() { $('p').css('color', 'red'); } }; // app.js var app = require('./module'); app.red();
dev build step build tool for prod CommonJS (Node) synchronous
<script> tags
// 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>
// 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>
// 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>
// 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>
no dev build step (ish) build tool for prod (ish)
no dependency management async or sync
no dependency management
We can do better
We have done better
None
ES6 Modules
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js import * as app from './module'; app.red();
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js import * as app from './module'; app.red();
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js import * as app from './module'; app.red();
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js import * as app from './module'; app.red();
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js import {red} from './module'; red();
// module.js import $ from './jquery'; export default function() {
$('p').css('color', red'); } // app.js import red from './module'; red();
// module.js import $ from './jquery'; export default function() {
$('p').css('color', red'); } // app.js import red from './module'; red();
Static
don't have to run code to know exports static lookups
visibility of variables circular dependencies ready for types (!)
async or sync
static imports = can resolve before evaluation of module
it just…works?
Module API
// module.js import $ from './jquery'; export var red =
function() { $('p').css('color', red'); } // app.js System.import('./module') .then(function(mod) { mod.red(); });
Module Config (hooks)
http://www.2ality.com/ 2014/09/es6-modules- final.html
But what about now?
None
system.js traceur.js es6-module-loader.js
// index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js
alert('hello world');
// index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js
alert('hello world');
// index.html <script src="lib/system.js"></ script> <script> System.import('./app'); </script> // app.js
alert('hello world');
// index.html <script src="lib/system.js"></script> <script> System.import(‘./app’) .catch( console.error.bind(console) ); </script>
… <body><p>Hello World</p></body>
// red.js import $ from 'jquery' export default function() {
$('p').css('color', 'red'); };
// red.js import $ from 'jquery' export default function() {
$('p').css('color', 'red'); };
// red.js import $ from 'jquery' export default function() {
$('p').css('color', 'red'); };
// app.js import $ from 'jquery' import red from './red'
$(function() { red(); });
None
None
jspm.io
Demo!
// index.html <script src='//jspm.io/system.js'> </script> <script> System.import('~/app'); </script>
// index.html <script src='//jspm.io/system.js'> </script> <script> System.import('~/app'); </script>
npm install --global jspm
jspm install npm:lodash jspm install github:components/ jquery
// app.js import $ from 'npm:jquery'; console.log($.fn.jquery) // 2.1.1
this is the best solution right now
jspm bundle app
// built.html <script src='system.js'></script> <script src='config.js'></script> <script src='build.js'></script> <script> System.import('app');
</script>
it just…works?
jspm.io @guybedford
ES6 is coming The tooling is there And will only
get better
http://javascriptplayground.com/ https://github.com/assetgraph/ assetgraph https://github.com/ModuleLoader/es6- module-loader https://github.com/systemjs/systemjs http://jspm.io/
Thanks! @jack_franklin