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
340
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
760
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
420
Front Trends: Migrating complex software
jackfranklin
1
760
Migrating from Angular to React: Manc React
jackfranklin
1
140
Half Stack Fest: Webpack
jackfranklin
4
490
FullStackFest: Elm for JS Developers
jackfranklin
1
210
Codelicious: Intro to ES2015
jackfranklin
0
340
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
23
11k
AIのコンプラは何故しんどい?
shujisado
1
190
MLOps の現場から
asei
6
630
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
140
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
kargoの魅力について伝える
magisystem0408
0
200
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Into the Great Unknown - MozCon
thekraken
33
1.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Making the Leap to Tech Lead
cromwellryan
133
9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
GraphQLとの向き合い方2022年版
quramy
44
13k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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