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
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
120
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
230
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
ABEMAの本番環境負荷試験への挑戦
mk2taiga
3
260
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
380
ゼロからはじめる採用広報
yutadayo
3
980
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Adaptive Systems
keathley
43
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing for humans not robots
tammielis
253
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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