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
160
Everyone's Happy: React, Server-side Rendering & SEO
matthewwithanm
2
1.1k
Conquering State
matthewwithanm
1
340
Django Static Stuff
matthewwithanm
6
7.8k
Other Decks in Programming
See All in Programming
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
670
Jakarta EE meets AI
ivargrimstad
0
560
RubyLSPのマルチバイト文字対応
notfounds
0
120
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
130
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
イベント駆動で成長して委員会
happymana
1
320
Jakarta EE meets AI
ivargrimstad
0
180
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Writing Fast Ruby
sferik
627
61k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Adopting Sorbet at Scale
ufuk
73
9.1k
Rails Girls Zürich Keynote
gr2m
94
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Side Projects
sachag
452
42k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
96
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