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
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
180
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
120
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
200
AI エージェントと考え直すデータ基盤
na0
17
5.7k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
310
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
SREのためのeBPF活用ステップアップガイド
egmc
1
240
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
ゼロからはじめる採用広報
yutadayo
3
1k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualization
eitanlees
146
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to train your dragon (web standard)
notwaldorf
96
6.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Six Lessons from altMBA
skipperchong
28
3.9k
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