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
Search
Sebastiano Armeli
June 13, 2013
Programming
5
430
RequireJS
Talk given at NDC,Oslo - June 2013
Sebastiano Armeli
June 13, 2013
Tweet
Share
More Decks by Sebastiano Armeli
See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
120
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
120
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
550
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.1k
Dependency management and Package management in JavaScript
sebarmeli
0
700
Other Decks in Programming
See All in Programming
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
150
Better Code Design in PHP
afilina
0
170
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Jakarta EE meets AI
ivargrimstad
0
390
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
970
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Unity Android XR入門
sakutama_11
0
180
CI改善もDatadogとともに
taumu
0
200
Featured
See All Featured
Side Projects
sachag
452
42k
Unsuck your backbone
ammeep
669
57k
It's Worth the Effort
3n
184
28k
Building Adaptive Systems
keathley
40
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
GraphQLとの向き合い方2022年版
quramy
44
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fireside Chat
paigeccino
34
3.2k
4 Signs Your Business is Dying
shpigford
182
22k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Music & Morning Musume
bryan
46
6.4k
Faster Mobile Websites
deanohume
306
31k
Transcript
RequireJS Sebastiano Armeli-Battana @sebarmeli NDC 2013, Oslo (Norway) Thursday, June
13, 13
Thursday, June 13, 13
Thursday, June 13, 13
Thursday, June 13, 13
Thursday, June 13, 13
1 2 3 4 5 6 Thursday, June 13, 13
app.js view.js Thursday, June 13, 13
view.js ------------ Thursday, June 13, 13
app.js ------------ Thursday, June 13, 13
4 6 4 6 Thursday, June 13, 13
Thursday, June 13, 13
Thursday, June 13, 13
app.js view.js helpers.js view2.js helpers2.js model.js Thursday, June 13, 13
app.js view.js helpers.js view2.js helpers2.js model.js 1 2 3 5
4 6 Thursday, June 13, 13
app.js view.js helpers.js view2.js helpers2.js model.js 1 2 3 5
4 6 4 1 3 2 5 6 Thursday, June 13, 13
Thursday, June 13, 13
Thursday, June 13, 13
<script data-main=”js/main.js” src=”require.js” /> Thursday, June 13, 13
<script data-main=”js/main.js” src=”require.js” /> AMD Thursday, June 13, 13
<script data-main=”js/main.js” src=”require.js” /> AMD Thursday, June 13, 13
Thursday, June 13, 13
var module = (function(){ // private variables, methods var title
= “”; function f1() {} return { // public/privileged methods getTitle: function(){ return title; } } }()) ; MODULE PATTERN Thursday, June 13, 13
define(function () { var title = “”; function f1() {}
return { getTitle: function() { return title; } } }); RJS MODULE PATTERN Thursday, June 13, 13
define(id?, dependencies?, factory) Thursday, June 13, 13
index.html js / -- main.js -- helpers.js -- app /
-- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Thursday, June 13, 13
index.html js / -- main.js -- helpers.js -- app /
-- views / -- view1.js -- vendor / -- require.js view1.js ------------ define([‘helpers’], function(helpers){ return { init: function(){} } }); define(function(){ // code here }); helpers.js ------------ Thursday, June 13, 13
define([‘module1’, module2’], function (dep1, dep2) { // do something }
) Multiple Dependencies Thursday, June 13, 13
require(dependencies?, factory) Thursday, June 13, 13
index.html ------------ <script src=”js/vendor/require.js” data-main=”js/main.js” main.js ------------ require([‘view1’],function(view1){ view1.init(); });
index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Thursday, June 13, 13
Thursday, June 13, 13
main.js ------------ require.config({ baseUrl: ‘./js’, paths: { ‘view1’: ‘app/views/view1’ }
}); require([‘view1’],function(view1){ view1.init(); }); index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Thursday, June 13, 13
NO blocking! Thursday, June 13, 13
Thursday, June 13, 13
var node = document.createElement('script'); node.async = true; node.setAttribute('data-requirecontext', context.contextName); node.setAttribute('data-requiremodule',
moduleName); node.src = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(node); Script Loader Thursday, June 13, 13
require() asynchronous de!ne() - de!ne.amd AMD well suited for browser
Thursday, June 13, 13
exports.render = function() {}; var module = require(‘view1’); NO de!ne()
require() synchronous Server-side approach Thursday, June 13, 13
Simplified CommonJS Wrapper define(function(require, exports, module){ // Module required before
the callback runs var helpers = require(‘helpers’); exports.render = function() { helpers.doSomething(); } }); Thursday, June 13, 13
define([“dep1”], function(require){ var helpers = require(‘helpers’); //code here }); Thursday,
June 13, 13
define([“dep1”], function(require){ var helpers = require(‘helpers’); //code here }); Thursday,
June 13, 13
Thursday, June 13, 13
Thursday, June 13, 13
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function () { return jQuery; }); } Thursday, June 13, 13
Thursday, June 13, 13
index.html js / -- main.js -- helpers.js -- app /
-- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Thursday, June 13, 13
index.html js / -- main.js -- helpers.js -- app /
-- views / -- view1.js -- vendor / -- require.js -- backbone.js -- underscore.js -- jquery.js main.js ------------ require.config({ baseUrl: ‘js/vendor’, shim: { ‘underscore’:{ exports: ‘_’ }, ‘backbone’: { deps: [‘jquery’, ‘underscore’], exports: ‘Backbone’ } } }); require([‘backbone’],function(Backbone){ Backbone.history.start(); }); Thursday, June 13, 13
LOADER PLUGINS • i18n!, async!, domReady! • text!, css!, json!,
cs!, hbs! [plugin Module ID]![resource ID] Thursday, June 13, 13
main.js ------------ require.config({ baseUrl: ‘./js’ }); require([‘text!partials/file.txt’], function(txt) { //
txt goes here }); index.html js / -- main.js -- vendor / -- require.js -- text.js -- partials / -- !le.txt Thursday, June 13, 13
main.js ------------ require.config({ baseUrl: ‘./js’ }); require([‘css!../css/style.css’], function() { //
After css is loaded }); index.html js / -- main.js -- vendor / -- require.js -- css.js css / -- style.css Thursday, June 13, 13
Thursday, June 13, 13
3 requests! Thursday, June 13, 13
r.js npm install -g requirejs OPTIMIZER Thursday, June 13, 13
r.js -o tools/build.js Thursday, June 13, 13
build.js ------------ ({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", modules: [
{ name: "../main" } ] }) index.html js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js tools / -- build.js Thursday, June 13, 13
build/js/main.js ---------------- index.html build / -- index.html -- build.txt --
js / -- main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js -- tools / -- build.js js/vendor/../main.js ---------------- js/helpers.js js/vendor/view1.js js/vendor/../main.js build/build.txt ---------------- Thursday, June 13, 13
OPTIMIZER 1 request! Thursday, June 13, 13
({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", preserveLicenseComments: false, removeCombined: true,
optimize: "uglify2", modules: [ { name: "../main", excludeShallow: [ "view1" ] } ] }) Thursday, June 13, 13
SOURCE MAPS ({ // other options generateSourceMaps: true, optimize: ‘uglify2’
}) Thursday, June 13, 13
Testing define([“view1”], function(view1) { describe(“view1”, function(){ it(“should do something”, function(){
// expectations }); }); }); Thursday, June 13, 13
runner.html ------------ runner.html spec / -- view1Spec.js -- main.js js
/ -- vendor / -- require.js <script src=”js/vendor/require.js” data-main=”spec/main.js” require.config({ baseUrl: ‘js/vendor’, paths: { ‘view1’: ..., ‘spec’: ‘../../spec’ } }); main.js ------------ Thursday, June 13, 13
runner.html spec / -- view1Spec.js -- main.js js / --
vendor / -- require.js -- domReady.js require.config({ ... }); require( [“domReady!”,“spec/view1Spec”], function(document){ jasmine.getEnv().addReporter( new jasmine.HtmlReporter() ); jasmine.getEnv().execute(); }); main.js ------------ Thursday, June 13, 13
GRUNT integration?? npm install -g grunt-cli Grunt!le How to get
Grunt? Thursday, June 13, 13
GRUNT integration?? grunt-contrib-requirejs npm install -g grunt-cli npm install grunt-contrib-require-js
--save-dev Grunt!le How to get Grunt? Thursday, June 13, 13
module.exports = function(grunt) { var config = require(“build”); grunt.initConfig({ requirejs:
{ compile: { options: config } } grunt.loadNpmTasks('grunt-contrib-requirejs'); } Gruntfile.js ------------ Thursday, June 13, 13
grunt requirejs Thursday, June 13, 13
ES6 - Modules Module de!nition module [module ID] export [variable
| function] Module dependency import { [var | fn] } from [module ID] Thursday, June 13, 13
ES6 - Modules module “helpers” { } module “view1” {
import helpers from “helpers”; exports function init() {...}; } Thursday, June 13, 13
Recap Thursday, June 13, 13
Recap • Modularity Thursday, June 13, 13
Recap • No globals • Modularity Thursday, June 13, 13
Recap • Async Script loader • No globals • Modularity
Thursday, June 13, 13
Recap • Async Script loader • No globals • Optimization
• Modularity Thursday, June 13, 13
Recap • Async Script loader • Future proof • No
globals • Optimization • Modularity Thursday, June 13, 13
http://requirejs.com https://github.com/asciidisco/grunt-requirejs @sebarmeli https://github.com/amdjs/amdjs-api/wiki/AMD http://wiki.ecmascript.org/doku.php?id=harmony:modules Thursday, June 13, 13