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
330
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
200
Components on the Web: Frontend NE
jackfranklin
1
750
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
410
Front Trends: Migrating complex software
jackfranklin
1
750
Migrating from Angular to React: Manc React
jackfranklin
1
140
Half Stack Fest: Webpack
jackfranklin
4
480
FullStackFest: Elm for JS Developers
jackfranklin
1
200
Codelicious: Intro to ES2015
jackfranklin
0
340
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
230
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Terraform Stacks入門 #HashiTalks
msato
0
350
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
220
Taming you application's environments
salaboy
0
180
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
140
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Producing Creativity
orderedlist
PRO
341
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Become a Pro
speakerdeck
PRO
25
5k
Why Our Code Smells
bkeepers
PRO
334
57k
Fireside Chat
paigeccino
34
3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
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