Enviar búsqueda
Cargar
JavaScript Patterns and Principles
•
6 recomendaciones
•
8,981 vistas
A
Aaronius
Seguir
Tecnología
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 96
Descargar ahora
Descargar para leer sin conexión
Recomendados
Intro to AngularJS
Intro to AngularJS
Aaronius
AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
Angular JS blog tutorial
Angular JS blog tutorial
Claude Tech
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
성일 한
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
Why angular js Framework
Why angular js Framework
Sakthi Bro
AngularJS best-practices
AngularJS best-practices
Henry Tao
Angular js
Angular js
Knoldus Inc.
Recomendados
Intro to AngularJS
Intro to AngularJS
Aaronius
AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
Angular JS blog tutorial
Angular JS blog tutorial
Claude Tech
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
성일 한
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
Why angular js Framework
Why angular js Framework
Sakthi Bro
AngularJS best-practices
AngularJS best-practices
Henry Tao
Angular js
Angular js
Knoldus Inc.
Angular - Beginner
Angular - Beginner
Riccardo Masetti
AngularJS
AngularJS
Maurice De Beijer [MVP]
Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3
성일 한
AngularJS for Beginners
AngularJS for Beginners
Edureka!
Discover AngularJS
Discover AngularJS
Fabien Vauchelles
AngularJS: an introduction
AngularJS: an introduction
Luigi De Russis
Enjoy the vue.js
Enjoy the vue.js
TechExeter
AngularJS
AngularJS
Hiten Pratap Singh
AngularJS 101
AngularJS 101
Houssem Yahiaoui
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
ParisJS #10 : RequireJS
ParisJS #10 : RequireJS
Julien Cabanès
Directives
Directives
Brajesh Yadav
A Story about AngularJS modularization development
A Story about AngularJS modularization development
Johannes Weber
Introduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
Shaping up with angular JS
Shaping up with angular JS
Brajesh Yadav
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
Brajesh Yadav
AngularJS for designers and developers
AngularJS for designers and developers
Kai Koenig
Angularjs tutorial
Angularjs tutorial
HarikaReddy115
Ionic tabs template explained
Ionic tabs template explained
Ramesh BN
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages Application
Michael McGarel
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Martin Meijer
Más contenido relacionado
La actualidad más candente
Angular - Beginner
Angular - Beginner
Riccardo Masetti
AngularJS
AngularJS
Maurice De Beijer [MVP]
Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3
성일 한
AngularJS for Beginners
AngularJS for Beginners
Edureka!
Discover AngularJS
Discover AngularJS
Fabien Vauchelles
AngularJS: an introduction
AngularJS: an introduction
Luigi De Russis
Enjoy the vue.js
Enjoy the vue.js
TechExeter
AngularJS
AngularJS
Hiten Pratap Singh
AngularJS 101
AngularJS 101
Houssem Yahiaoui
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
ParisJS #10 : RequireJS
ParisJS #10 : RequireJS
Julien Cabanès
Directives
Directives
Brajesh Yadav
A Story about AngularJS modularization development
A Story about AngularJS modularization development
Johannes Weber
Introduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
Shaping up with angular JS
Shaping up with angular JS
Brajesh Yadav
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
Brajesh Yadav
AngularJS for designers and developers
AngularJS for designers and developers
Kai Koenig
Angularjs tutorial
Angularjs tutorial
HarikaReddy115
Ionic tabs template explained
Ionic tabs template explained
Ramesh BN
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
La actualidad más candente
(20)
Angular - Beginner
Angular - Beginner
AngularJS
AngularJS
Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3
AngularJS for Beginners
AngularJS for Beginners
Discover AngularJS
Discover AngularJS
AngularJS: an introduction
AngularJS: an introduction
Enjoy the vue.js
Enjoy the vue.js
AngularJS
AngularJS
AngularJS 101
AngularJS 101
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
ParisJS #10 : RequireJS
ParisJS #10 : RequireJS
Directives
Directives
A Story about AngularJS modularization development
A Story about AngularJS modularization development
Introduction to AngularJS
Introduction to AngularJS
Shaping up with angular JS
Shaping up with angular JS
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
AngularJS for designers and developers
AngularJS for designers and developers
Angularjs tutorial
Angularjs tutorial
Ionic tabs template explained
Ionic tabs template explained
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Similar a JavaScript Patterns and Principles
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages Application
Michael McGarel
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Martin Meijer
Going web native
Going web native
Marcus Hellberg
A gently introduction to AngularJS
A gently introduction to AngularJS
Gregor Woiwode
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Bramus Van Damme
Building Large Scale Javascript Application
Building Large Scale Javascript Application
Anis Ahmad
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
Amazon Web Services
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Davalen LLC
Flex/AS3 Architecture And Dependency Injection Frameworks Overview
Flex/AS3 Architecture And Dependency Injection Frameworks Overview
Piotr Walczyszyn
What is Drools, Guvnor and Planner? 2012 02-17 Brno Dev Conference
What is Drools, Guvnor and Planner? 2012 02-17 Brno Dev Conference
Geoffrey De Smet
Vanjs backbone-powerpoint
Vanjs backbone-powerpoint
Michael Yagudaev
Mean stack Magics
Mean stack Magics
Aishura Aishu
Sst hackathon express
Sst hackathon express
Aeshan Wijetunge
How to scale Agile With Scrum as the Foundational Framework
How to scale Agile With Scrum as the Foundational Framework
Hyperdrive Agile Leadership (powered by Bratton & Company)
High Performance Cloud Native APIs Using Apache Geode
High Performance Cloud Native APIs Using Apache Geode
VMware Tanzu
Taking serverless to the edge
Taking serverless to the edge
Amazon Web Services
The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013
Matt Raible
Presenters in Rails
Presenters in Rails
Mike Desjardins
IBM Lotusphere 2013 AD109: Using the IBM® Sametime® Proxy SDK: WebSphere Port...
IBM Lotusphere 2013 AD109: Using the IBM® Sametime® Proxy SDK: WebSphere Port...
William Holmes
Similar a JavaScript Patterns and Principles
(20)
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages Application
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Conne...
Going web native
Going web native
A gently introduction to AngularJS
A gently introduction to AngularJS
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Building Large Scale Javascript Application
Building Large Scale Javascript Application
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
AWS Webcast - Accelerating Application Performance Using In-Memory Caching in...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Flex/AS3 Architecture And Dependency Injection Frameworks Overview
Flex/AS3 Architecture And Dependency Injection Frameworks Overview
What is Drools, Guvnor and Planner? 2012 02-17 Brno Dev Conference
What is Drools, Guvnor and Planner? 2012 02-17 Brno Dev Conference
Vanjs backbone-powerpoint
Vanjs backbone-powerpoint
Mean stack Magics
Mean stack Magics
Sst hackathon express
Sst hackathon express
How to scale Agile With Scrum as the Foundational Framework
How to scale Agile With Scrum as the Foundational Framework
High Performance Cloud Native APIs Using Apache Geode
High Performance Cloud Native APIs Using Apache Geode
Taking serverless to the edge
Taking serverless to the edge
The Modern Java Web Developer - JavaOne 2013
The Modern Java Web Developer - JavaOne 2013
Presenters in Rails
Presenters in Rails
IBM Lotusphere 2013 AD109: Using the IBM® Sametime® Proxy SDK: WebSphere Port...
IBM Lotusphere 2013 AD109: Using the IBM® Sametime® Proxy SDK: WebSphere Port...
Último
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
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
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Último
(20)
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
JavaScript Patterns and Principles
1.
© 2013 Adobe
Systems Incorporated. All Rights Reserved.© 2013 Adobe Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles Aaron Hardy | Software Engineer, Analytics
2.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Architecture Misconceptions 2 jQuery is my architecture.
3.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Architecture Misconceptions 3 jQuery is my architecture. Websites are just the V in MVC.
4.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Architecture Misconceptions 4 jQuery is my architecture. Websites are just the V in MVC. We’re already using MVC so we’re good.
5.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Architecture Misconceptions 5 jQuery is my architecture. Websites are just the V in MVC. We’re already using MVC so we’re good.
6.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* 6
7.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* 7
8.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Building Large Apps 8 The secret to building large apps is NEVER build large apps. Break your application into small pieces. Assemble those testable, bite-sized pieces into your application. - Justin Meyer
9.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Modules Should Be… 9 Independent of other modules
10.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Modules Should Be… 10 Independent of other modules Limited knowledge of the rest of the app
11.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Modules Should Be… 11 Independent of other modules Reusable without refactoring Limited knowledge of the rest of the app
12.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Modules Should Be… 12 Independent of other modules Reusable without refactoring Limited knowledge of the rest of the app Functional when other modules break
13.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Modules Should Be… 13 Independent of other modules Testable in isolation Reusable without refactoring Limited knowledge of the rest of the app Functional when other modules break
14.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Possible Modules Feed Address Book Chat Room Menu Shared Service 14
15.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Callback § Promise § Event Emitter § Publish/Subscribe § Patterns Within MV* 15
16.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Callback § Promise § Event Emitter § Publish/Subscribe § Patterns Within MV* 16
17.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Callbacks In Real Life § TODO: Picture of a fast food line while I explain how it demonstrates callbacks in real life. 17 CC Image Courtesy of The Consumerist on Flickr
18.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Callback Example var customer = { placeOrder: function() { restaurant.takeOrder('burger', this.onFoodReady); }, onFoodReady: function(food) { … } }; 18
19.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Callback Example var customer = { placeOrder: function() { restaurant.takeOrder('burger', this.onFoodReady); }, onFoodReady: function(food) { … } }; var restaurant = { takeOrder: function(order, foodReadyCallback) { // call foodReadyCallback(food) when food is ready } }; 19
20.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Callback Key Points Used to notify of completion of an asynchronous task Simple Efficient No libraries required 20
21.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Callback § Promise § Event Emitter § Publish/Subscribe § Patterns Within MV* 21
22.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promises In Real Life 22
23.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. jQuery Promise Anatomy 23 takeSeatingRequest() promise Promise then() Customer Restaurant
24.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. jQuery Promise Anatomy 24 takeSeatingRequest() promise Deferred resolve() reject() promise() Promise then() Customer Restaurant
25.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promise Example var customer = { requestSeating: function() { var promise = restaurant.takeSeatingRequest(); promise.then(this.sit); } sit: function() { … } }; 25
26.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promise Example var customer = { requestSeating: function() { var promise = restaurant.takeSeatingRequest(); promise.then(this.sit); } sit: function(table) { … } }; var restaurant = { takeSeatingRequest: function() { var deferred = $.Deferred(); setTimeout(function() { deferred.resolve({seats: 4}); }, 5000); return deferred.promise(); } }; 26
27.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promise Example var customer = { requestSeating: function() { var promise = restaurant.takeSeatingRequest(); promise.then(this.sit); promise.fail(this.leave); } sit: function(table) { … }, leave: function() { … } }; var restaurant = { takeSeatingRequest: function() { var deferred = $.Deferred(); deferred.reject(); // Sorry, we’re closed! return deferred.promise(); } }; 27
28.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Sequence Using Callbacks step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { console.log('Success', value4); } } } } 28
29.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Sequence Using Callbacks step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { console.log('Success', value4); } } } } 29 PYRAMID OF DOOM
30.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Sequence Using Promises step1() .then(step2) .then(step3) .then(step4) .then(function(value) { console.log('Success', value); }); 30 Supported in jQuery 1.8+
31.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Try-catch In A Synchronous World try { var value = step1(); value = step2(value); value = step3(value); value = step4(value); console.log('Success', value); } catch (error) { console.log('Failure', error); } finally { console.log('Time to clean up resources!'); } 31
32.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Try-catch Using Promises step1() .then(step2) .then(step3) .then(step4) .then(function(value) { console.log('Success', value); }) .catch(function(error) { console.log('Failure', error); }) .finally(function() { console.log('Time to clean up resources!'); }); 32 Supported in the Q promise library
33.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Parallel Using Callbacks var requestsPending = 2; var onComplete = function(tweets) { requestsPending--; if (requestsPending == 0) { // Display tweets from both requests. } } loadTweets('#adobe', onComplete); loadTweets('#summit', onComplete); 33
34.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Parallel Using Callbacks var requestsPending = 2; var onComplete = function(tweets) { requestsPending--; if (requestsPending == 0) { // Display tweets from both requests. } } loadTweets('#adobe', onComplete); loadTweets('#summit', onComplete); 34 o_O
35.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Asynchronous Parallel Using Promises var adobePromise = loadTweets('#adobe'); var summitPromise = loadTweets('#summit'); $.when(adobePromise, summitPromise).then(displayTweets); 35
36.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promise Key Points Used to notify of completion of an asynchronous task Object passable now representing something to be determined in the future Great for sequential/parallel management Generally makes use of a third party library 36
37.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Callback § Promise § Event Emitter § Publish/Subscribe § Patterns Within MV* 37
38.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Event Emitters In Real Life § TODO: Coupon text photo while I explain the similarities to event emitters. 38 CC Image Courtesy of Incase on Flickr
39.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. DOM Event Emitter Example var foo = document.getElementById('foo'); foo.addEventListener('click', function() { alert('bar'); }); foo.addEventListener('click', function() { alert('baz'); }); 39
40.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. jQuery Event Emitter Example var customer = { receiveCoupon: function(coupon) { … } }; 40
41.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. jQuery Event Emitter Example var customer = { receiveCoupon: function(coupon) { … } }; var restaurant = { offerCoupon: function(coupon) { $(this).trigger('couponAvailable', coupon); } }; 41
42.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. jQuery Event Emitter Example var customer = { receiveCoupon: function(coupon) { … } }; var restaurant = { offerCoupon: function(coupon) { $(this).trigger('couponAvailable', coupon); } }; $(restaurant).on('couponAvailable', customer.receiveCoupon); 42
43.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Event Emitter Key Points Notifies of state change, user interaction, etc. Fires an event any number of times (possibly never) Native for DOM Arbitrary objects make use of a third-party library 43
44.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Callback § Promise § Event Emitter § Publish/Subscribe § Patterns within MV* 44
45.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Anatomy 45 Pub/Sub Bus publish() subscribe() unsubscribe()
46.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Anatomy 46 Pub/Sub Bus publish() subscribe() unsubscribe() Customer bus.subscribe('couponAvailable', function() { … });
47.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Anatomy 47 Pub/Sub Bus publish() subscribe() unsubscribe() RestaurantCustomer bus.publish('couponAvailable', 'Buy 1 get 1 free');
48.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 48 Archive Report spam Delete Mark as unread Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail
49.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 49 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 0MeMail Archive Report spam Delete Mark as unread Inbox Service
50.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 50 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail Mark all as read
51.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 51 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail bus.publish('selectedEmailsChanged', selectedEmails); Bus Mark all as read
52.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 52 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail Archive Report spam Delete Mark as read
53.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 53 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail Bus Service Archive Report spam Delete Mark as read bus.publish('markAsReadRequested', emails);
54.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 54 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 3MeMail Bus Service bus.publish('markedAsRead', emails); Archive Report spam Delete Mark as read
55.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Example 55 Android 4.2.1 vs iOS 6 Videos magically don’t have sound If you could scale this to market it would be very valuable, no? Clone SSD (Windows system partition) to HDD partition JIRA help – Greenhopper + Scrum + Subtasks Question setting up a VPN on firewall Shopping Carts The end of textbooks? 2MeMail Archive Report spam Delete Mark as unread
56.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Key Points Communication between modules Publishers and subscribers don’t address one another Provides excellent decoupling 56
57.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Which Pattern Should I Use? 57 Is the communication between modules? Is it communicating a response to requested task? Do you need to represent a future value? Is sequence/parallel management important? No Yes No Yes No YesEvent Emitter Callback Promise Pub/Sub
58.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* § State Change Detection § Declarative Markup § View Manipulation § Dependency Injection 58
59.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. MVC 59 Model Represents data or state View Presentation and user controls Controller Logic between views and models
60.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. MVP 60 Model Represents data or state View Presentation and user controls Presenter Logic between views and models
61.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. MVVM 61 Model Represents data or state View Presentation and user controls ViewModel Logic between views and models
62.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. MV* 62 Model Represents data or state View Presentation and user controls *
63.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. MV* Frameworks 63
64.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Comparison At A Glance 64 Requires Underscore/LoDash and jQuery/Zepto 6K + 4K (Underscore) + 28K (jQuery 2.0) gzipped Non-prescriptive Extensions add functionality and/or prescription Eventful proxy models Used in tandem with a template engine Binding available through extensions Dependency injection available through extensions jqLite built-in 29K gzipped Prescriptive Intended to be a full(er) stack out of the box Dirty checking Custom HTML tags and attributes (directives) Two-way data-binding built-in Dependency injection built-in
65.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* § State Change detection § Declarative Markup § View Manipulation § Dependency Injection 65
66.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 66 var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; var bookView = new BookView(book); book.genre = 'Social Criticism'; How does BookView know that the book’s genre changed?
67.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 67 var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; var bookView = new BookView(book); book.genre = 'Social Criticism'; bookView.genreChanged(); We could manually tell it…
68.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 68 var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; var bookView = new BookView(book); book.genre = 'Social Criticism'; bookView.genreChanged(); We could manually tell it… but not without creating a tangled mess.
69.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 69 Let’s wrap our object in a proxy. var book = new Backbone.Model({ title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }); var bookView = new BookView(book); book.set({genre: 'Social Criticism'}); Now we must use the proxy functions. (Until ECMAScript Harmony!)
70.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 70 Meanwhile, inside BookView… book.on('change:genre', onChange); var book = new Backbone.Model({ title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }); var bookView = new BookView(book); book.set({genre: 'Social Criticism'});
71.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Proxy Models 71 We do something similar for arrays. var books = new Backbone.Collection([ book1, book2, book3 ]); var booksView = new BooksView(books); books.add(book4); books.on('add', onAdd);
72.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dirty Checking 72 Meanwhile inside BookView… var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'Historical', }; …pass book to BookView… book.genre = 'Social Criticism'; $scope.book = book; $scope.$watch('book', function() { console.log('changed!'); }, true);
73.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dirty Checking 73 User Click Change Object Watchers: Is the object different than last time? Yes. React. Watchers: Is the object different than last time? No Digest Cycle Triggered automatically on user interaction, http responses, etc. Can be manually triggered. TriggerWait
74.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns within MV* § State Change Detection § Declarative Markup § View Manipulation § Dependency Injection 74
75.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Templates <script id="users-template" type="text/x-handlebars-template"> <ul> {{#users}} <li>Name: {{name}}, Email: {{email}}</li> {{/users}} </ul> </script> 75
76.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Templates var data = { users: [ { name: 'John', email: 'john@example.com' }, { name: 'Jane', email: 'jane@example.com' } ] }; var source = $('#users-template').html(); var template = Handlebars.compile(source); var html = template(data); $('body').html(html); 76
77.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Templates <body> <ul> <li>Name: John, Email: john@example.com</li> <li>Name: Jane, Email: jane@example.com</li> </ul> </body> 77
78.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Directives <ul> <li ng-repeat="user in users"> Username: {{user.name}}, Email: {{user.email}} </li> </ul> function MyController($scope) { $scope.users = [ {name: 'John', email: 'john@example.com'}, {name: 'Jane', email: 'jane@example.com'} ]; } 78
79.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* § State Change Detection § Declarative Markup § View Manipulation § Dependency Injection 79
80.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Backbone: Responding To And Updating View Name: <input type="text" class="name-in"> <h1>Hello <span class="name-out"></span></h1> Backbone.View.extend({ events: { 'keyup .name-in': 'onNameChange' }, onNameChange: function(event) { // TODO: Optimize var name = $(event.target).val(); this.$('.name-out').text(name); } }); 80
81.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Binding Name: <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}</h1> 81
82.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns within MV* § State change detection § Declarative Markup § View Manipulation § Dependency Injection 82
83.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Without Dependency Injection 83 var TweetStream = function() { this.twitter = new TwitterService(); }; TweetStream.prototype.showTweets = function() { var tweets = this.twitter.getTweets(); … }; var stream = new TweetStream(); stream.showTweets();
84.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. With Dependency Injection 84 var TweetStream = function(twitter) { this.twitter = twitter; }; TweetStream.prototype.showTweets = function() { var tweets = this.twitter.getTweets(); … }; var twitter = new TwitterService(); var stream = new TweetStream(twitter); stream.showTweets(); We inverted control of the TwitterService construction.
85.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Inversion of Control Container When rank is requested, provide the value 1337. When twitter is requested, provide a new instance of TwitterService. When dialog is requested, provide the SearchDialog constructor. When logger is requested, provide a singleton instance of AsyncLogger. When chat is requested, provide whatever is returned from chatFactory. 85
86.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 86 var MyController = function($http, $scope) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController); How does $injector know what to inject for $http and $scope?
87.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 87 var MyController = function($http, $scope) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController); How does $injector know what to inject for $http and $scope? By using toString() and some well-crafted regex.
88.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 88 var MyController = function($http, $scope) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController); What if we reverse the parameter order?
89.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 89 var MyController = function($scope, $http) { $http.get('http://github.com/…') .success(function(commits) { $scope.commits = commits; }); }; $injector.instantiate(MyController); What if we reverse the parameter order? It still works!
90.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 90 var MyController = function(a, b) { a.get('http://github.com/…') .success(function(c) { b.commits = c; }); }; $injector.instantiate(MyController); What if we reverse the parameter order? It still works! Until we minify it.
91.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Angular: Dependency Injection 91 var MyController = function(a, b) { a.get('http://github.com/…') .success(function(c) { b.commits = c; }); }; MyController.$inject = ['$http', '$scope']; $injector.instantiate(MyController); What if we reverse the parameter order? It still works! Until we minify it. Then we have to annotate.
92.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. JavaScript Patterns And Principles § Modularity § Communication Patterns § Patterns Within MV* 92
93.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Promise Implementations 93 Q jQuery rsvp.js kriskowal/q jquery/jquery tildeio/rsvp.js
94.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Pub/Sub Implementations 94 Postal.js AmplifyJS PubSubJS postaljs/postal.js appendto/amplify mroderick/pubsubjs
95.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Inversion of Control and Dependency Injection 95 Article by Martin Fowler http://martinfowler.com/articles/injection.html Wikipedia source of truth http://en.wikipedia.org/wiki/Dependency_injection Lightweight inversion of control container with examples https://github.com/Aaronius/injectorjs
96.
© 2013 Adobe
Systems Incorporated. All Rights Reserved. Inversion of Control and Dependency Injection 96 Article by Martin Fowler http://martinfowler.com/articles/injection.html Wikipedia source of truth http://en.wikipedia.org/wiki/Dependency_injection Lightweight inversion of control container with examples https://github.com/Aaronius/injectorjs
Descargar ahora