Soumettre la recherche
Mettre en ligne
Dependency management & Package management in JavaScript
•
1 j'aime
•
1,348 vues
S
Sebastiano Armeli
Suivre
Talk given at WebExpo (Prague) - September 2013
Lire moins
Lire la suite
Technologie
Actualités & Politique
Signaler
Partager
Signaler
Partager
1 sur 131
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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
En vedette
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
En vedette
(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
Similaire à 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
Similaire à 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
Plus 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
Plus 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
Dernier
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Deepika Singh
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
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Zilliz
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
Remote DBA Services
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
+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@
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Dernier
(20)
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
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...
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
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
Télécharger maintenant