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
RequireJS in 15 Minutes
Search
Matthew Dapena-Tretter
October 11, 2013
Programming
2
180
RequireJS in 15 Minutes
A quick intro to RequireJS
Matthew Dapena-Tretter
October 11, 2013
Tweet
Share
More Decks by Matthew Dapena-Tretter
See All by Matthew Dapena-Tretter
Isomorphic JS, Server-side Rendering, React & Rockefeller
matthewwithanm
3
200
The Life and Times of a React Component
matthewwithanm
1
170
Everyone's Happy: React, Server-side Rendering & SEO
matthewwithanm
2
1.2k
Conquering State
matthewwithanm
1
340
Django Static Stuff
matthewwithanm
6
8k
Other Decks in Programming
See All in Programming
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
600
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
2
1.9k
flutter_kaigi_mini_4.pdf
nobu74658
0
140
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
240
The Implementations of Advanced LR Parser Algorithm
junk0612
2
1.4k
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
110
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
140
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
130
Serving TUIs over SSH with Go
caarlos0
0
600
VitestのIn-Source Testingが便利
taro28
8
2.4k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.7k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Six Lessons from altMBA
skipperchong
28
3.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Rails Girls Zürich Keynote
gr2m
94
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Invisible Side of Design
smashingmag
299
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Thoughts on Productivity
jonyablonski
69
4.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Typedesign – Prime Four
hannesfritz
41
2.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Transcript
REQUIRE•JS IN 15 MINUTES
The Old Way <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <script src="main.js"></script>
The Old Way •Dependencies defined out-of-band •Lots of script tags
(& requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
With RequireJS ? Dependencies defined out-of-band ? Lots of script
tags (& requests) ? …or a very very big main.js ? …or a build step in development ? All files load synchronously
With RequireJS <script src="require.js" data-main="main"></script>
Define Dependencies in Scripts require(['jquery', 'jquery.plugin'], function ($) { //
Main code goes here });
Use require() to Declare Dependencies For Scripts require(['jquery', 'jquery.plugin'], function
($) { // Main code goes here });
Module IDs (Not Paths) in Array Correspond to Arguments require(['jquery',
'jquery.plugin'], function ($) { // Main code goes here });
Write Your Own Modules! define(['jquery', 'jquery.plugin'], function ($) { function
makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Use define() to Declare Dependencies For Modules define(['jquery', 'jquery.plugin'], function
($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Dependencies Work the Same as With require() define(['jquery', 'jquery.plugin'], function
($) { function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Return the Module From the Function define(['jquery', 'jquery.plugin'], function ($)
{ function makeButton (el) { $(el).click(function () { alert('I was clicked!'); }); } return makeButton; });
Alternative Syntax Improves Long Dependency Lists define(function (require) { var
$ = require('jquery'); require('jquery.plugin'); function makeButton (el) { $(el).click(function () { alert('I was clicked!'); });
Use Your Module in Other Modules or Scripts define(function (require)
{ var makeButton = require('makebutton'); makeButton('#element'); . . . . .
Module IDs Are Based on File Names… define(function (require) {
var makeButton = require('makebutton'); makeButton('#element'); . . . . .
…But Don’t Use Paths! That’s What Config is For require.config({
paths: { makebutton: 'path/to/makebutton' } });
…And For “Shimming” Scripts That Don’t Use AMD require.config({ shim:
{ underscore: { deps: ['jquery'], exports: '_' } }, paths: {
With RequireJS •Dependencies defined out-of-band •Lots of script tags (&
requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
Use r.js Optimizer For Production •Module-aware concatenation •Can build one
file or many $ node r.js -o name=main out=main-built.js
With RequireJS •Dependencies defined out-of-band •Lots of script tags (&
requests) •…or a very very big main.js •…or a build step in development •All files load synchronously
requirejs.org @matthewwithanm hzdg.com