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
130
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
560
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.2k
Dependency management and Package management in JavaScript
sebarmeli
0
710
Other Decks in Programming
See All in Programming
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
160
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
200
Go言語での実装を通して学ぶ、高速なベクトル検索を支えるクラスタリング技術/fukuokago-kmeans
monochromegane
1
120
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
700
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
500
なぜselectはselectではないのか
taiyow
2
210
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
1
490
CIBMTR振り返り+敗北から学ぶコンペの取り組み方反省
takanao
1
480
エンジニアに許された特別な時間の終わり
watany
89
80k
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
2
880
SwiftUIのObservationツールの挙動をテストしてみた
kenshih522
0
110
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
2.9k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Typedesign – Prime Four
hannesfritz
41
2.6k
For a Future-Friendly Web
brad_frost
176
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Cult of Friendly URLs
andyhume
78
6.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Navigating Team Friction
lara
183
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
690
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
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