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
470
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
540
FullStackFest: Elm for JS Developers
jackfranklin
1
230
Codelicious: Intro to ES2015
jackfranklin
0
370
PolyConf: Elm for JS Developers
jackfranklin
0
280
Other Decks in Technology
See All in Technology
JOAI発表資料 @ 関東kaggler会
joai_committee
1
470
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
170
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.4k
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
170
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
進捗
ydah
1
190
Goでマークダウンの独自記法を実装する
lag129
0
230
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
450
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
320
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.8k
Vault meets Kubernetes
mochizuki875
0
130
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Code Reviewing Like a Champion
maltzj
525
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Unsuck your backbone
ammeep
671
58k
Making Projects Easy
brettharned
117
6.3k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How GitHub (no longer) Works
holman
315
140k
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