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
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
290
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
240
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
200
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
490
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
140
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
130
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
220
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
930
CDK Vibe Coding Fes
tomoki10
0
220
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Building Adaptive Systems
keathley
43
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Become a Pro
speakerdeck
PRO
29
5.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Balancing Empowerment & Direction
lara
1
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Optimizing for Happiness
mojombo
379
70k
GitHub's CSS Performance
jonrohan
1031
460k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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