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.7k
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
メルカリIBISの紹介
0gm
0
420
Bedrock で検索エージェントを再現しようとした話
ny7760
2
110
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
BBQ
matthewcrist
89
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Agile that works and the tools we love
rasmusluckow
330
21k
Balancing Empowerment & Direction
lara
3
630
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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