Enviar pesquisa
Carregar
RequireJS
•
21 gostaram
•
5,463 visualizações
S
Sebastiano Armeli
Seguir
Talk given at NDC, Oslo - June 2013
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 73
Recomendados
Requirejs
Requirejs
sioked
Requirejs
Requirejs
Jason Lotito
Lightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with Browserify
crgwbr
Browserify
Browserify
davidchubbs
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJS
Den Odell
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈
Wakana Yoshizawa
Canjs
Canjs
Cherif Bouchelaghem
Canjs
Canjs
bitovi
Recomendados
Requirejs
Requirejs
sioked
Requirejs
Requirejs
Jason Lotito
Lightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with Browserify
crgwbr
Browserify
Browserify
davidchubbs
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJS
Den Odell
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈
Wakana Yoshizawa
Canjs
Canjs
Cherif Bouchelaghem
Canjs
Canjs
bitovi
OUTDATED (Encore)
OUTDATED (Encore)
Stefan Adolf
Backbone.js
Backbone.js
VO Tho
Casl. isomorphic permission management.pptx
Casl. isomorphic permission management.pptx
Sergiy Stotskiy
Entities on Node.JS
Entities on Node.JS
Thanos Polychronakis
Intro to node.js web apps
Intro to node.js web apps
Thanos Polychronakis
Let's react - Meetup
Let's react - Meetup
RAJNISH KATHAROTIYA
Hack tutorial
Hack tutorial
Wakana Yoshizawa
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest
Angular js routing options
Angular js routing options
Nir Kaufman
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
jeresig
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
l10bov
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)
Nitya Narasimhan
Require js and Magento2
Require js and Magento2
Irene Iaccio
A different thought angular js part-2
A different thought angular js part-2
Amit Thakkar
Angular - Beginner
Angular - Beginner
Riccardo Masetti
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
탑크리에듀(구로디지털단지역3번출구 2분거리)
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
Client Side MVC & Angular
Client Side MVC & Angular
Alexe Bogdan
Nette <3 Webpack
Nette <3 Webpack
Jiří Pudil
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.
Hyung Eun Jin
Module, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
Mais conteúdo relacionado
Mais procurados
OUTDATED (Encore)
OUTDATED (Encore)
Stefan Adolf
Backbone.js
Backbone.js
VO Tho
Casl. isomorphic permission management.pptx
Casl. isomorphic permission management.pptx
Sergiy Stotskiy
Entities on Node.JS
Entities on Node.JS
Thanos Polychronakis
Intro to node.js web apps
Intro to node.js web apps
Thanos Polychronakis
Let's react - Meetup
Let's react - Meetup
RAJNISH KATHAROTIYA
Hack tutorial
Hack tutorial
Wakana Yoshizawa
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest
Angular js routing options
Angular js routing options
Nir Kaufman
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
jeresig
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
l10bov
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)
Nitya Narasimhan
Require js and Magento2
Require js and Magento2
Irene Iaccio
A different thought angular js part-2
A different thought angular js part-2
Amit Thakkar
Angular - Beginner
Angular - Beginner
Riccardo Masetti
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
탑크리에듀(구로디지털단지역3번출구 2분거리)
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
Client Side MVC & Angular
Client Side MVC & Angular
Alexe Bogdan
Nette <3 Webpack
Nette <3 Webpack
Jiří Pudil
Mais procurados
(20)
OUTDATED (Encore)
OUTDATED (Encore)
Backbone.js
Backbone.js
Casl. isomorphic permission management.pptx
Casl. isomorphic permission management.pptx
Entities on Node.JS
Entities on Node.JS
Intro to node.js web apps
Intro to node.js web apps
Let's react - Meetup
Let's react - Meetup
Hack tutorial
Hack tutorial
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
Angular js routing options
Angular js routing options
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)
Require js and Magento2
Require js and Magento2
A different thought angular js part-2
A different thought angular js part-2
Angular - Beginner
Angular - Beginner
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
2. 엔티티 매핑(entity mapping) 2 2 엔티티매핑 2-2-4. 식별자 자동 생성(@generated-value)3
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Client Side MVC & Angular
Client Side MVC & Angular
Nette <3 Webpack
Nette <3 Webpack
Destaque
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.
Hyung Eun Jin
Module, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
Require.JS
Require.JS
Ivano Malavolta
Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJS
Minh Hoang
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Thomas Lundström
Meet Handlebar
Meet Handlebar
Handlebar Publishing
Require JS
Require JS
Imaginea
Require js
Require js
Nirbhay Kundan
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Mark
Introduction à Marionette
Introduction à Marionette
Raphaël Lemaire
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
harshit040591
Introduction to Backbone.js
Introduction to Backbone.js
Roman Kalyakin
Introduction to Backbone.js
Introduction to Backbone.js
Jonathan Weiss
Backbone.js
Backbone.js
Knoldus Inc.
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Mikko Ohtamaa
MVC & backbone.js
MVC & backbone.js
Mohammed Arif
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]
Andrii Lundiak
Introduction to Marionette Collective
Introduction to Marionette Collective
Puppet
Backbone/Marionette introduction
Backbone/Marionette introduction
matt-briggs
Destaque
(20)
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.
Module, AMD, RequireJS
Module, AMD, RequireJS
Require.JS
Require.JS
Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJS
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Meet Handlebar
Meet Handlebar
Require JS
Require JS
Require js
Require js
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Introduction à Marionette
Introduction à Marionette
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Backbone.js
Backbone.js
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
MVC & backbone.js
MVC & backbone.js
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]
Introduction to Marionette Collective
Introduction to Marionette Collective
Backbone/Marionette introduction
Backbone/Marionette introduction
Semelhante a RequireJS
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
Johan Nilsson
Node Tools For Your Grails Toolbox - Gr8Conf 2013
Node Tools For Your Grails Toolbox - Gr8Conf 2013
zanthrash
Troubleshooting Live Java Web Applications
Troubleshooting Live Java Web Applications
ashleypuls
Node.js Module Resolution by visual example
Node.js Module Resolution by visual example
Jeff Kunkle
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
Richard McIntyre
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Sebastian Springer
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Sebastiano Armeli
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro framework
Jeremy Kendall
Seattle.rb 6.4
Seattle.rb 6.4
deanhudson
Einführung in AngularJS
Einführung in AngularJS
Sebastian Springer
Hotcode 2013: Javascript in a database (Part 2)
Hotcode 2013: Javascript in a database (Part 2)
ArangoDB Database
Gon gem. For RDRC 2013, June 7
Gon gem. For RDRC 2013, June 7
Alexey Gaziev
Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013
SaltStack
Workers of the web - BrazilJS 2013
Workers of the web - BrazilJS 2013
Thibault Imbert
Lightweight javaEE with Guice
Lightweight javaEE with Guice
Peerapat Asoktummarungsri
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Crashlytics
Deprecating ActiveRecord Attributes without making Zombies
Deprecating ActiveRecord Attributes without making Zombies
yann ARMAND
Angular JS Routing
Angular JS Routing
kennystoltz
I motion
I motion
Fernand Galiana
Bootstrap & Joomla UI
Bootstrap & Joomla UI
Andrea Tarr
Semelhante a RequireJS
(20)
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
Node Tools For Your Grails Toolbox - Gr8Conf 2013
Node Tools For Your Grails Toolbox - Gr8Conf 2013
Troubleshooting Live Java Web Applications
Troubleshooting Live Java Web Applications
Node.js Module Resolution by visual example
Node.js Module Resolution by visual example
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro framework
Seattle.rb 6.4
Seattle.rb 6.4
Einführung in AngularJS
Einführung in AngularJS
Hotcode 2013: Javascript in a database (Part 2)
Hotcode 2013: Javascript in a database (Part 2)
Gon gem. For RDRC 2013, June 7
Gon gem. For RDRC 2013, June 7
Writing SaltStack Modules - OpenWest 2013
Writing SaltStack Modules - OpenWest 2013
Workers of the web - BrazilJS 2013
Workers of the web - BrazilJS 2013
Lightweight javaEE with Guice
Lightweight javaEE with Guice
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Deprecating ActiveRecord Attributes without making Zombies
Deprecating ActiveRecord Attributes without making Zombies
Angular JS Routing
Angular JS Routing
I motion
I motion
Bootstrap & Joomla UI
Bootstrap & Joomla UI
Mais de Sebastiano Armeli
Managing a software engineering team
Managing a software engineering team
Sebastiano Armeli
Enforcing coding standards in a JS project
Enforcing coding standards in a JS project
Sebastiano Armeli
Enforcing coding standards
Enforcing coding standards
Sebastiano Armeli
ES6: The future is now
ES6: The future is now
Sebastiano Armeli
EcmaScript 6 - The future is here
EcmaScript 6 - The future is here
Sebastiano Armeli
Karma - JS Test Runner
Karma - JS Test Runner
Sebastiano Armeli
Lazy load Everything!
Lazy load Everything!
Sebastiano Armeli
MVC on the server and on the client
MVC on the server and on the client
Sebastiano Armeli
Backbone.js in a real-life application
Backbone.js in a real-life application
Sebastiano Armeli
Getting started with Selenium 2
Getting started with Selenium 2
Sebastiano Armeli
Web Storage
Web Storage
Sebastiano Armeli
Mais de Sebastiano Armeli
(11)
Managing a software engineering team
Managing a software engineering team
Enforcing coding standards in a JS project
Enforcing coding standards in a JS project
Enforcing coding standards
Enforcing coding standards
ES6: The future is now
ES6: The future is now
EcmaScript 6 - The future is here
EcmaScript 6 - The future is here
Karma - JS Test Runner
Karma - JS Test Runner
Lazy load Everything!
Lazy load Everything!
MVC on the server and on the client
MVC on the server and on the client
Backbone.js in a real-life application
Backbone.js in a real-life application
Getting started with Selenium 2
Getting started with Selenium 2
Web Storage
Web Storage
Último
2024 May Patch Tuesday
2024 May Patch Tuesday
Ivanti
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
中 央社
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
danishmna97
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
AnubhavMangla3
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
BrainSell Technologies
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
FIDO Alliance
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
MasterG
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
SOFTTECHHUB
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Leah Henrickson
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
FIDO Alliance
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
MarkSteadman7
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
Pixlogix Infotech
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
Memoori
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
rightmanforbloodline
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
AnitaRaj43
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
RaviKumarDaparthi
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
ScyllaDB
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
Samir Dash
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Skynet Technologies
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
FIDO Alliance
Último
(20)
2024 May Patch Tuesday
2024 May Patch Tuesday
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
RequireJS
1.
RequireJS Sebastiano Armeli-Battana @sebarmeli NDC 2013,
Oslo (Norway) Thursday, June 13, 13
2.
Thursday, June 13,
13
3.
Thursday, June 13,
13
4.
Thursday, June 13,
13
5.
Thursday, June 13,
13
6.
1 2 3 4 5 6 Thursday, June 13,
13
7.
app.js view.js Thursday, June 13,
13
8.
view.js ------------ Thursday, June 13,
13
9.
app.js ------------ Thursday, June 13,
13
10.
4 6 4 6 Thursday, June 13,
13
11.
Thursday, June 13,
13
12.
Thursday, June 13,
13
13.
app.js view.js helpers.jsview2.js helpers2.js model.js Thursday, June
13, 13
14.
app.js view.js helpers.jsview2.js helpers2.js model.js 1 2 3 5 4 6 Thursday, June
13, 13
15.
app.js view.js helpers.jsview2.js helpers2.js model.js 1 2 3 5 4 6 4 1 3 2 5 6 Thursday, June
13, 13
16.
Thursday, June 13,
13
17.
Thursday, June 13,
13
18.
<script data-main=”js/main.js” src=”require.js”
/> Thursday, June 13, 13
19.
<script data-main=”js/main.js” src=”require.js”
/> AMD Thursday, June 13, 13
20.
<script data-main=”js/main.js” src=”require.js”
/> AMD Thursday, June 13, 13
21.
Thursday, June 13,
13
22.
var module =
(function(){ // private variables, methods var title = “”; function f1() {} return { // public/privileged methods getTitle: function(){ return title; } } }()) ; MODULE PATTERN Thursday, June 13, 13
23.
define(function () { var
title = “”; function f1() {} return { getTitle: function() { return title; } } }); RJS MODULE PATTERN Thursday, June 13, 13
24.
define(id?, dependencies?, factory) Thursday,
June 13, 13
25.
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
26.
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
27.
define([‘module1’, module2’], function (dep1,
dep2) { // do something } ) Multiple Dependencies Thursday, June 13, 13
28.
require(dependencies?, factory) Thursday, June
13, 13
29.
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
30.
Thursday, June 13,
13
31.
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
32.
NO blocking! Thursday, June
13, 13
33.
Thursday, June 13,
13
34.
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
35.
require() asynchronous de!ne() -
de!ne.amd AMD well suited for browser Thursday, June 13, 13
36.
exports.render = function()
{}; var module = require(‘view1’); NO de!ne() require() synchronous Server-side approach Thursday, June 13, 13
37.
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
38.
define([“dep1”], function(require){ var helpers
= require(‘helpers’); //code here }); Thursday, June 13, 13
39.
define([“dep1”], function(require){ var helpers
= require(‘helpers’); //code here }); Thursday, June 13, 13
40.
Thursday, June 13,
13
41.
Thursday, June 13,
13
42.
if ( typeof
define === "function" && define.amd ) { define( "jquery", [], function () { return jQuery; }); } Thursday, June 13, 13
43.
Thursday, June 13,
13
44.
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
45.
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
46.
LOADER PLUGINS • i18n!,
async!, domReady! • text!, css!, json!, cs!, hbs! [plugin Module ID]![resource ID] Thursday, June 13, 13
47.
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
48.
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
49.
Thursday, June 13,
13
50.
3 requests! Thursday, June
13, 13
51.
r.js npm install -g
requirejs OPTIMIZER Thursday, June 13, 13
52.
r.js -o tools/build.js Thursday,
June 13, 13
53.
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
54.
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
55.
OPTIMIZER 1 request! Thursday, June
13, 13
56.
({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", preserveLicenseComments:
false, removeCombined: true, optimize: "uglify2", modules: [ { name: "../main", excludeShallow: [ "view1" ] } ] }) Thursday, June 13, 13
57.
SOURCE MAPS ({ // other
options generateSourceMaps: true, optimize: ‘uglify2’ }) Thursday, June 13, 13
58.
Testing define([“view1”], function(view1) { describe(“view1”,
function(){ it(“should do something”, function(){ // expectations }); }); }); Thursday, June 13, 13
59.
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
60.
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
61.
GRUNT integration?? npm install
-g grunt-cli Grunt!le How to get Grunt? Thursday, June 13, 13
62.
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
63.
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
64.
grunt requirejs Thursday, June
13, 13
65.
ES6 - Modules Module
de!nition module [module ID] export [variable | function] Module dependency import { [var | fn] } from [module ID] Thursday, June 13, 13
66.
ES6 - Modules module
“helpers” { } module “view1” { import helpers from “helpers”; exports function init() {...}; } Thursday, June 13, 13
67.
Recap Thursday, June 13,
13
68.
Recap • Modularity Thursday, June
13, 13
69.
Recap • No globals •
Modularity Thursday, June 13, 13
70.
Recap • Async Script
loader • No globals • Modularity Thursday, June 13, 13
71.
Recap • Async Script
loader • No globals • Optimization • Modularity Thursday, June 13, 13
72.
Recap • Async Script
loader • Future proof • No globals • Optimization • Modularity Thursday, June 13, 13
73.
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