Enviar búsqueda
Cargar
RequireJS
•
21 recomendaciones
•
5,463 vistas
S
Sebastiano Armeli
Seguir
Talk given at NDC, Oslo - June 2013
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
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
偉格 高
Más contenido relacionado
La actualidad más candente
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
La actualidad más candente
(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
Destacado
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
Destacado
(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
Similar 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
Similar 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
Más 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
Más 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: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
hans926745
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Último
(20)
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
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