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
70
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
88
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
230
Managing a software engineering team
sebarmeli
1
510
Enforcing coding standards in a JS project
sebarmeli
0
550
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7k
Dependency management and Package management in JavaScript
sebarmeli
0
650
Other Decks in Programming
See All in Programming
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
CSC307 Lecture 10
javiergs
PRO
0
310
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
CSC307 Lecture 06
javiergs
PRO
0
360
英語
s_shimotori
1
220
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Trial
cairolibrary720
1
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Being A Developer After 40
akosma
72
580k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Designing the Hi-DPI Web
ddemaree
276
34k
Facilitating Awesome Meetings
lara
46
5.8k
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