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
Module, AMD, RequireJS
Search
othree
May 19, 2012
Technology
11
4k
Module, AMD, RequireJS
othree
May 19, 2012
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.7k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.8k
YAJS.vim and Vim Syntax Highlight
othree
1
2.4k
Web Trends to 2015
othree
4
290
Transducer
othree
9
2.7k
HITCON 11 Photographer
othree
4
450
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
web-application-security
matsuihidetoshi
0
170
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
JSON攻略法.pdf
miyakemito
8
5k
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
200
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
190
反実仮想機械学習とは何か
usaito
PRO
11
4.6k
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
25
5.8k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Code Review Best Practice
trishagee
55
15k
Ruby is Unlike a Banana
tanoku
96
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Visualization
eitanlees
136
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Statistics for Hackers
jakevdp
789
220k
Rails Girls Zürich Keynote
gr2m
91
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Transcript
Module, AMD, RequireJS othree @ JSDC 2012
Object
Object Oriented Programming
Why OOP • Maintainable & Scalable • Gathering related variables
& methods
Object from OOP • Inheritance • Polymorphism • Encapsulation
Encapsulation • A language mechanism for restricting access to some
of the object's components. http://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming)
Why Encapsulation • Protect variable from unwanted change
JavaScript is Prototype-based
Private Data in JavaScript
Naming Convention function Human(sgender) { //Private this._age = 1; this._gender
= sgender || 'Male'; //Public this.growUp = function () { this._age++; }; }
Human _age _gender growUp Accessible Anywhere
Privileged Method function Human(sgender) { //Private var age = 1,
gender = sgender || 'Male'; //Privileged Method this.growUp = function () { age++; }; } http://javascript.crockford.com/private.html
Human age gender growUp Accessible Anywhere
Module Pattern
Module Pattern function Human(sgender) { //Private var age = 1,
gender = sgender || 'Male'; //Public return { growUp: function () { age++; } }; } http://yuiblog.com/blog/2007/06/12/module-pattern/
Accessible Anywhere exports Human age gender growUp
Advantage • Easy • Keep private data safe
Disadvantage • Hard to inherit
Large Application • Lots of modules • Complex dependency
Lots of Modules • One file per module • Lots
of files: • Performance Issue • Async loading?
Complex Dependency • Load modules by order • Hard to
know the order by head and hand
Solution? • Not hard to solve • But there is
no standard API
CommonJS
CommonJS • by Kevin Dangoor • Volunteers and mailing list
• Unify server side JavaScript API • Build JavaScript ecosystem • Not an official organization
CommonJS APIs • Binary • Filesystem • IO • ...
• Modules
None
CommonJS Module • Modules/1.0 • NodeJS • Modules/AsynchronousDefinition • AMD
AMD
Asynchronous Module Definition define(id?, dependencies?, factory);
Example define( 'account', ['service', 'pubsub'], function (service, pubsub) { //do
something //export public APIs return { signin: function () { /* ... */ }, signout: function () { /* ... */ }, getName: function () { /* ... */ }, setName: function () { /* ... */ } }; } );
Another Way (function () { //10000 lines of code exports
= { signin: function () { /* ... */ }, signout: function () { /* ... */ } }; define('account', function () { return exports; }); }());
In jQuery if ( typeof define === "function" && define.amd
&& define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); }
RequireJS
RequireJS • AMD Implementation by James Burke • Async resource
loader • 1.0.8 now, 2.0 under development
Usage <script data-main="main" src="require.js"></script>
main.js require(["app"], function(app) { app.init(); });
app.js define(["lib/account", "lib/session"], function (account, session) { //do something return
{ init: function () { //init the application } }; } );
main.js account.js app.js session.js crypt.js xhr.js storage.js
Features • AMD • Path alias • Circular dependency •
Plugins
Plugins • order • text • wrap, use • cs
(CoffeeScript)
Advantages • No pollution to global scope • Everything is
organized in module • Compile CoffeeScript on the fly • ...etc
Minefield • Module load fail: hard to debug • Wrong
path • Use require function • Plugin error, ex: CoffeeScript syntax error
Still Problems • Lots of modules • Lots of files
• Lots of requests • Low performance
r.js
r.js • Optimization tool • Pack all modules into one
file • Minimize the JavaScript file
Usage node r.js -o build.js
build.js ({ appDir: "../", baseUrl: "scripts", dir: "../../appdirectory-build", modules: [
{ name: "main" } ] })
main.js account.js app.js session.js crypt.js xhr.js storage.js
After Optimized • require.js are large: 86kb
almond.js
almond.js • Minimal AMD API implement • Same author
Advantages • Small: 9kb, 857 bytes minimized and gzipped •
Stable: no change since 0.0.3
Disadvantages • No plugin support • Not a resource downloader
• Lots of restriction • Different optimize concept
Usage node r.js -o baseUrl=. name=path/to/almond.js include=main out=main-built.js wrap=true
Tip • You can use r.js to optimize • And
use almond.js to replace require.js
<script src="almond.js"></script> <script src="main-optimized.js"></script>
References • http://www.yuiblog.com/blog/2007/06/12/module-pattern/ • http://wiki.commonjs.org/wiki/Modules/1.1 • http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition • https://github.com/amdjs/amdjs-api/wiki/AMD •
http://requirejs.org/ • https://github.com/jrburke/almond
None
Questions Time
Q • I want to use Underscore and Backbone, but
they don’t support RequireJS....
A • Do nothing • Use use/wrap plugin • Use
modified version https://github.com/jrburke • Use another script tag to include them first
<script src="undersocre+backbone.js"></script> <script src="almond.js"></script> <script src="main-optimized.js"></script>
<script src="yepnope.js"></script> <script> yepnope({ load: [ "undersocre+backbone.js", "almond.js", "main-optimized.js" ]
}); </script>
Questions?
Thank You