Enviar búsqueda
Cargar
Dependency management & Package management in JavaScript
•
1 recomendación
•
1,348 vistas
S
Sebastiano Armeli
Seguir
Talk given at WebExpo (Prague) - September 2013
Leer menos
Leer más
Tecnología
Noticias y política
Denunciar
Compartir
Denunciar
Compartir
1 de 131
Descargar ahora
Descargar para leer sin conexión
Recomendados
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
裕波 周
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Autocad command list
Autocad command list
Alex Alexander
YUI for your Hacks-IITB
YUI for your Hacks-IITB
Subramanyan Murali
Recomendados
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
裕波 周
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Autocad command list
Autocad command list
Alex Alexander
YUI for your Hacks-IITB
YUI for your Hacks-IITB
Subramanyan Murali
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
John Hann
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
Constantin Titarenko
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Professional web development with libraries
Professional web development with libraries
Christian Heilmann
Android swedroid
Android swedroid
Johan Nilsson
YUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Christian Heilmann
Angular JS blog tutorial
Angular JS blog tutorial
Claude Tech
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
Sane Async Patterns
Sane Async Patterns
TrevorBurnham
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
Peter-Paul Koch
DrupalCon jQuery
DrupalCon jQuery
Nathan Smith
YUI 3
YUI 3
Dav Glass
Ionic tabs template explained
Ionic tabs template explained
Ramesh BN
2009 Hackday Taiwan Yui
2009 Hackday Taiwan Yui
JH Lee
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Frank Rousseau
Dilemma 6
Dilemma 6
slewis99
Space as Service
Space as Service
TAPintoIT
Nihonggo
Nihonggo
Kyle Macadaeg
Timothy Musila
Timothy Musila
NjueMoses
Going mobile talk 2013 04 25
Going mobile talk 2013 04 25
TAPintoIT
Enforcing coding standards
Enforcing coding standards
Sebastiano Armeli
Más contenido relacionado
La actualidad más candente
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
John Hann
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
Constantin Titarenko
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Professional web development with libraries
Professional web development with libraries
Christian Heilmann
Android swedroid
Android swedroid
Johan Nilsson
YUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Christian Heilmann
Angular JS blog tutorial
Angular JS blog tutorial
Claude Tech
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
Sane Async Patterns
Sane Async Patterns
TrevorBurnham
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
Peter-Paul Koch
DrupalCon jQuery
DrupalCon jQuery
Nathan Smith
YUI 3
YUI 3
Dav Glass
Ionic tabs template explained
Ionic tabs template explained
Ramesh BN
2009 Hackday Taiwan Yui
2009 Hackday Taiwan Yui
JH Lee
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Frank Rousseau
La actualidad más candente
(16)
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Professional web development with libraries
Professional web development with libraries
Android swedroid
Android swedroid
YUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Angular JS blog tutorial
Angular JS blog tutorial
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Sane Async Patterns
Sane Async Patterns
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
DrupalCon jQuery
DrupalCon jQuery
YUI 3
YUI 3
Ionic tabs template explained
Ionic tabs template explained
2009 Hackday Taiwan Yui
2009 Hackday Taiwan Yui
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Destacado
Dilemma 6
Dilemma 6
slewis99
Space as Service
Space as Service
TAPintoIT
Nihonggo
Nihonggo
Kyle Macadaeg
Timothy Musila
Timothy Musila
NjueMoses
Going mobile talk 2013 04 25
Going mobile talk 2013 04 25
TAPintoIT
Enforcing coding standards
Enforcing coding standards
Sebastiano Armeli
La tertulia 1995 2015 b
La tertulia 1995 2015 b
ZamoranoSagreno
eReading talk SJSU 2012 01
eReading talk SJSU 2012 01
TAPintoIT
Fruit
Fruit
Onur Kalafat
Drinks
Drinks
Onur Kalafat
26 Smirks: eReading and Libraries
26 Smirks: eReading and Libraries
TAPintoIT
Idioms
Idioms
Dawn Handig
Puppymill paper
Puppymill paper
Ebony Hunter
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Pulsslag
Kanawha talk 2011 02
Kanawha talk 2011 02
TAPintoIT
在巴黎设置旗舰店须知 2011——1
在巴黎设置旗舰店须知 2011——1
Myrachan
Ala pr forum talk peters 2012 06e
Ala pr forum talk peters 2012 06e
TAPintoIT
Primeros pasos con twitter bootstrap
Primeros pasos con twitter bootstrap
Jorge Cuadrado
Rich idiot’s upside down action plan: What I learned from the book
Rich idiot’s upside down action plan: What I learned from the book
Carey Radican
öğRenciler e twinning te neler yapabilir
öğRenciler e twinning te neler yapabilir
Onur Kalafat
Destacado
(20)
Dilemma 6
Dilemma 6
Space as Service
Space as Service
Nihonggo
Nihonggo
Timothy Musila
Timothy Musila
Going mobile talk 2013 04 25
Going mobile talk 2013 04 25
Enforcing coding standards
Enforcing coding standards
La tertulia 1995 2015 b
La tertulia 1995 2015 b
eReading talk SJSU 2012 01
eReading talk SJSU 2012 01
Fruit
Fruit
Drinks
Drinks
26 Smirks: eReading and Libraries
26 Smirks: eReading and Libraries
Idioms
Idioms
Puppymill paper
Puppymill paper
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Kanawha talk 2011 02
Kanawha talk 2011 02
在巴黎设置旗舰店须知 2011——1
在巴黎设置旗舰店须知 2011——1
Ala pr forum talk peters 2012 06e
Ala pr forum talk peters 2012 06e
Primeros pasos con twitter bootstrap
Primeros pasos con twitter bootstrap
Rich idiot’s upside down action plan: What I learned from the book
Rich idiot’s upside down action plan: What I learned from the book
öğRenciler e twinning te neler yapabilir
öğRenciler e twinning te neler yapabilir
Similar a Dependency management & Package management in JavaScript
Pragmatic JavaScript
Pragmatic JavaScript
John Hann
Introduction to Scrum version 3.1
Introduction to Scrum version 3.1
Prathan Dansakulcharoenkit
Backbone
Backbone
Ynon Perek
Einführung in AngularJS
Einführung in AngularJS
Sebastian Springer
Introduction to RabbitMQ | Meetup at Pivotal Labs
Introduction to RabbitMQ | Meetup at Pivotal Labs
Alvaro Videla
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
Sebastian Springer
JavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker Movement
Jesse Cravens
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
Simo Ahava
Intro to Ember.js
Intro to Ember.js
Jay Phelps
Complex Architectures in Ember
Complex Architectures in Ember
Matthew Beale
Rails 6 frontend frameworks
Rails 6 frontend frameworks
Eric Guo
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC
CDI do básico ao avançado
CDI do básico ao avançado
Alberto Souza
Securing Client Side Data
Securing Client Side Data
Grgur Grisogono
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
Zeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para Mobile
iMasters
Loadrunner
Loadrunner
danwrong
Fórum de Software Livre do Serpro RJ 2009
Fórum de Software Livre do Serpro RJ 2009
Fabio Akita
Great Developers Steal
Great Developers Steal
Ben Scofield
Similar a Dependency management & Package management in JavaScript
(20)
Pragmatic JavaScript
Pragmatic JavaScript
Introduction to Scrum version 3.1
Introduction to Scrum version 3.1
Backbone
Backbone
Einführung in AngularJS
Einführung in AngularJS
Introduction to RabbitMQ | Meetup at Pivotal Labs
Introduction to RabbitMQ | Meetup at Pivotal Labs
Webapplikationen mit Backbone.js
Webapplikationen mit Backbone.js
JavaScript Makers: How JS is Helping Drive the Maker Movement
JavaScript Makers: How JS is Helping Drive the Maker Movement
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
Intro to Ember.js
Intro to Ember.js
Complex Architectures in Ember
Complex Architectures in Ember
Rails 6 frontend frameworks
Rails 6 frontend frameworks
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
CDI do básico ao avançado
CDI do básico ao avançado
Securing Client Side Data
Securing Client Side Data
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Zeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para Mobile
Loadrunner
Loadrunner
Fórum de Software Livre do Serpro RJ 2009
Fórum de Software Livre do Serpro RJ 2009
Great Developers Steal
Great Developers Steal
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
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
RequireJS
RequireJS
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
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
RequireJS
RequireJS
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
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
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
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
SynarionITSolutions
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Último
(20)
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Dependency management & Package management in JavaScript
1.
Dependency management & Package management in
JavaScript Sebastiano Armeli @sebarmeli WebExpo 2013, Prague (Czech Republic) Friday, September 20, 13
2.
Friday, September 20,
13
3.
@sebarmeli Sebastiano Armeli-Battana • realestate.com.au •
Melbourne, Australia Friday, September 20, 13
4.
Dependency management & Package management in
JavaScript Sebastiano Armeli @sebarmeli WebExpo 2013, Prague (Czech Republic) Friday, September 20, 13
5.
Dependency management Friday, September 20,
13
6.
“A dependency happens when
a component relies on another one” Friday, September 20, 13
7.
View << depends on
>> Model Friday, September 20, 13
8.
model.js ------------ (function(window){ ‘use strict’; function Model()
{ } window.Model = Model; })(window); Friday, September 20, 13
9.
view.js ------------ (function(window){ ‘use strict’; function View(model)
{ this.model = model; } window.View = View; })(window); Friday, September 20, 13
10.
var model =
new Model(); var view = new View(model); Friday, September 20, 13
11.
What to consider when you
create a dependency? Friday, September 20, 13
12.
Principles of Package Coupling Acyclic-Dependencies Principle Stable-Dependencies Principle Friday,
September 20, 13
13.
Stable Dependencies Principle Friday, September 20,
13
14.
Friday, September 20,
13
15.
Unstable Stable View Model Friday, September 20,
13
16.
Model DOES NOT
change frequently View DOES change frequently Friday, September 20, 13
17.
Acyclic Dependencies Principle Friday, September 20,
13
18.
Friday, September 20,
13
19.
View ModelRouter Friday, September 20,
13
20.
Avoid Cycles! Friday, September
20, 13
21.
How do we handle dependencies? Friday,
September 20, 13
22.
Java ----- import java.util.*; import javax.servlet.http.*; Ruby ----- require
‘net/http’ require ‘spec_helper’ Friday, September 20, 13
23.
...and in JS
? Friday, September 20, 13
24.
import jQuery from
‘jquery’; Friday, September 20, 13
25.
import jQuery from
‘jquery’; ES6 Friday, September 20, 13
26.
<script src=”file1.js”></script> <script src=”file2.js”></script> <script
src=”file3.js”></script> <script src=”file4.js”></script> <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> index.html ------------ Friday, September 20, 13
27.
<script src=”file3.js”></script> <script src=”file4.js”></script> <script
src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------ <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
28.
<script src=”file3.js”></script> <script src=”file4.js”></script> <script
src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------ <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
29.
<script src=”file4.js”></script> <script src=”file3.js”></script> <script
src=”file1.js”></script> <script src=”file2.js”></script> index.html ------------ <script src=”file5.js”></script> <script src=”file6.js”></script> <script src=”file7.js”></script> <script src=”file8.js”></script> Friday, September 20, 13
30.
Friday, September 20,
13
31.
Not only one way
to order <script>s Friday, September 20, 13
32.
app.js view.js helpers.jsview2.js helpers2.js model.js Friday, September
20, 13
33.
app.js view.js helpers.jsview2.js helpers2.js model.js 1 2 3 5 4 6 Friday, September
20, 13
34.
app.js view.js helpers.jsview2.js helpers2.js model.js 1 2 3 5 4 6 4 1 3 2 5 6 Friday, September
20, 13
35.
1 4 5 2 3 0 1 1 2,3 2
5 3 4 IN-DEGREES NODE Friday, September 20, 13
36.
4 5 2 3 0 2,3 2 5 3
4 IN-DEGREES NODE 1 Results: Friday, September 20, 13
37.
4 5 2 0 2 1 5 2
4 IN-DEGREES NODE 1 - 3 Results: Friday, September 20, 13
38.
4 5 0 5 1 4 IN-DEGREES
NODE 1 - 3 - 2 Results: Friday, September 20, 13
39.
4 0 4 IN-DEGREES NODE 1
- 3 - 2 - 5 Results: Friday, September 20, 13
40.
1 4 5 2 3 1 - 3
- 2 - 5 - 4 4 - 5 - 2 - 3 - 1 Friday, September 20, 13
41.
http://howardlewisship.com/images/t5-service-dependencies.jpg Friday, September 20,
13
42.
RequireJS Friday, September 20,
13
43.
Friday, September 20,
13
44.
var module =
(function(){ // private variables, methods var title = “”; function f1() {} return { // public/privileged methods getTitle: function(){ return title; } } }()) ; MODULE PATTERN Friday, September 20, 13
45.
define(function () { var
title = “”; function f1() {} return { getTitle: function() { return title; } } }); RJS MODULE PATTERN Friday, September 20, 13
46.
define(id?, dependencies?, factory) Friday,
September 20, 13
47.
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 ------------ Friday, September 20, 13
48.
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 ------------ Friday, September 20, 13
49.
require(dependencies?, factory) Friday, September
20, 13
50.
index.html ------------ <script src=”js/vendor/require.js” data-main=”js/main.js”></script> main.js ------------ require([‘view1’],function(view1){ view1.init(); }); index.html js / --
main.js -- helpers.js -- app / -- views / -- view1.js -- vendor / -- require.js Friday, September 20, 13
51.
Friday, September 20,
13
52.
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 Friday, September 20, 13
53.
NO blocking! Friday, September
20, 13
54.
require() asynchronous de!ne() -
de!ne.amd AMD well suited for browser Friday, September 20, 13
55.
Friday, September 20,
13
56.
Friday, September 20,
13
57.
if ( typeof
define === "function" && define.amd ) { define( "jquery", [], function () { return jQuery; }); } Friday, September 20, 13
58.
Friday, September 20,
13
59.
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(); }); Friday, September 20, 13
60.
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(); }); Friday, September 20, 13
61.
LOADER PLUGINS • i18n!,
async!, domReady! • text!, css!, json!, cs!, hbs! [plugin Module ID]![resource ID] Friday, September 20, 13
62.
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 Friday, September 20, 13
63.
Friday, September 20,
13
64.
3 requests! Friday, September
20, 13
65.
r.js npm install -g
requirejs OPTIMIZER Friday, September 20, 13
66.
r.js -o tools/build.js Friday,
September 20, 13
67.
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 Friday, September 20, 13
68.
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 ---------------- Friday, September 20, 13
69.
OPTIMIZER 1 request! Friday, September
20, 13
70.
Friday, September 20,
13
71.
exports.render = function()
{}; var module = require(‘view1’); NO de!ne() require() synchronous Server-side approach Friday, September 20, 13
72.
npm install -g
browserify Friday, September 20, 13
73.
foo.js ------------ index.html js / -- main.js --
foo.js node_modules / package.json var Foo = function() { // do something }; module.exports = Foo; main.js ------------ var Foo = require(‘./foo’); var foo = new Foo(); Friday, September 20, 13
74.
browserify js/main.js >
js/bundle.js Friday, September 20, 13
75.
index.html ------------ index.html js / -- main.js --
foo.js -- bundle.js node_modules / package.json bundle.js ------------;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]) {var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o] [0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1: [function(require,module,exports){ var Foo = function(){ console.log("AA"); }; module.exports = Foo; },{}],2:[function(require,module,exports){ var Foo = require('./foo'); var foo = new Foo(); },{"./foo":1}]},{},[2]) <script src=”js/bundle.js”> </script> Friday, September 20, 13
76.
Package management Friday, September 20,
13
77.
Friday, September 20,
13
78.
“A package is
a specific piece of software installable” Friday, September 20, 13
79.
Packages One or more
modules Friday, September 20, 13
80.
Name, Description, Version Metadata Packages One
or more modules Friday, September 20, 13
81.
Name, Description, Version Metadata Packages One
or more modules Checksum Friday, September 20, 13
82.
Name, Description, Version Metadata Packages One
or more modules Checksum Dependencies Friday, September 20, 13
83.
Package Manager is the
TOOL to... Friday, September 20, 13
84.
Speed up your
development work"ow Friday, September 20, 13
85.
Speed up your
development work"ow Automate common tasks Friday, September 20, 13
86.
Speed up your
development work"ow Automate common tasks DRY with Repository / Registry Friday, September 20, 13
87.
Common Operations Friday, September
20, 13
88.
Installing Friday, September 20,
13
89.
Installing Removing Friday, September 20,
13
90.
Installing Removing Searching Friday, September 20,
13
91.
Installing Removing Searching Upgrading Friday, September 20,
13
92.
Installing Removing Searching Upgrading Publishing Friday, September 20,
13
93.
Package Depedencies A B C C Friday, September
20, 13
94.
Package Depedencies A B C C =1.1.0 >1.2.0 Friday, September
20, 13
95.
Package Depedencies A B C C =1.1.0 >1.2.0 Which version should
I download? Friday, September 20, 13
96.
Java Ruby Python
.Net OSX Linux Maven/Gradle Rubygems pip NuGet Homebrew yum/apt Friday, September 20, 13
97.
How do you install
packages in JS ? Friday, September 20, 13
98.
Friday, September 20,
13
99.
Node.js Friday, September 20,
13
100.
package.json Node.js Friday, September 20,
13
101.
package.json NPM registry Node.js Friday, September
20, 13
102.
package.json ------------ { "name": "my-app", "version": "0.0.1", "dependencies":
{ "jquery": "~2.0" }, "devDependencies": { "qunit": "0.5.x" } } index.html package.json js / -- app.js Friday, September 20, 13
103.
npm install Friday, September
20, 13
104.
npm install <package> Commands Friday,
September 20, 13
105.
npm install <package> Commands npm
install -g <package> Friday, September 20, 13
106.
npm install <package> Commands npm
install -g <package> npm update <package> Friday, September 20, 13
107.
npm list Commands Friday, September
20, 13
108.
npm list Commands npm uninstall
<package> Friday, September 20, 13
109.
npm list Commands npm uninstall
<package> npm publish <tarball> Friday, September 20, 13
110.
is a not
Package Manager for the CLIENT Friday, September 20, 13
111.
Bower Friday, September 20,
13
112.
Bower Minimalistic & Agnostic Friday,
September 20, 13
113.
Bower Minimalistic & Agnostic HTML/CSS/JS Friday,
September 20, 13
114.
Bower Minimalistic & Agnostic HTML/CSS/JS AMD/CommonJS/ES6
modules Friday, September 20, 13
115.
npm install -g
bower Friday, September 20, 13
116.
bower.json ------------ { "name": "my-app", "version": "0.0.1", "ignore":
[ "build", "Gruntfile.js", "package.json", "bower.json" ], "main": ["js/app.js"], "dependencies": { "requirejs": "~2.1.8", // >=2.1.8 < 2.2.0 "jquery": "~2.0" // >=2.0.0 < 2.1.0 }, "devDependencies": { "qunit": "^1.12.0" // >=1.12.0 < 2.0.0 } } index.html bower.json js / -- app.js Friday, September 20, 13
117.
bower install Friday, September
20, 13
118.
.bowerrc ------------ { "directory”: “js/vendor”, “json”: “bower.json” } index.html bower.json .bowerrc js
/ -- app.js -- vendor/ -- jquery/ -- jquery.js -- requirejs/ -- require.js index.html ------------ <script src=”js/vendor/jquery/jquery.js > </script> Friday, September 20, 13
119.
bower install jquery#1.8.2 Git
tagAlias from registry Friday, September 20, 13
120.
bower install jquery
--save Friday, September 20, 13
121.
bower install git://github.com/jquery/jquery.git#1.8.3 bower
install ../my-package Git endpoint + Git tag Local package bower install https://github.com/jquery/jquery.git Git endpoint Friday, September 20, 13
122.
bower list my-package ├── jquery#2.0.3 └──
requirejs#2.1.8 Friday, September 20, 13
123.
bower list my-package ├── jquery#1.8.2
incompatible with ~2.0.0 (2.0.3 available) └── requirejs#2.1.8 my-package ├── jquery#2.0.3 └── requirejs#2.1.8 Friday, September 20, 13
124.
bower update jquery bower
uninstall jquery bower info jquery Friday, September 20, 13
125.
bower register <package>
<git_endpoint> Friday, September 20, 13
126.
Friday, September 20,
13
127.
file1.js ----------- require([‘module2’], function(){ // <use>
<module2>; }); Dependency management Friday, September 20, 13
128.
file1.js ----------- var module2 =
require(‘module2’); // use module2 Dependency management Friday, September 20, 13
129.
source_file ----------- <import> <module2>; // <use>
<module2>; $ bower install jquery Package management Friday, September 20, 13
130.
source_file ----------- <import> <module2>; // <use>
<module2>; $ npm install jquery Package management Friday, September 20, 13
131.
http://requirejs.com http://bower.io/ @sebarmeli https://github.com/amdjs/amdjs-api/wiki/AMD https://npmjs.org/ WebExpo 2013, Prague
(Czech Republic) Friday, September 20, 13
Descargar ahora