JavaScript Essential Patterns

Talk about the custom event, deferred and pubsub.

Transcript

1. JavaScript Essential Patterns othree @ OSDC 2012
2. Who am I • othree • MozTW member • F2E at HTC • http://blog.othree.net
3. Evolution of the Web 1990 1995 2003 2005 WWW Browser Wars Web Standards Web Applications 2006 Web 2.0 2010 Mobile
4. Web Applications
5. Text
10. Problem to F2E • Large scale application never seen on Web
11. But • The problem F2Es face today already exists
12. What is Pattern • A general reusable solution to a commonly occurring problem within a given context in software design. http://en.wikipedia.org/wiki/Software_design_pattern
13. GOF Book, 1994
14. Browser Environment • Async • Event Driven • Async • Source Code from Internet • Async • Business Logic on Server
15. Patterns to Talk Today • Custom Event • Deferred • PubSub
16. Custom Event http://www.flickr.com/photos/swehrmann/6009646752
17. Event • Something happens to an element, to the main document, or to the browser window and that event triggers a reaction. http://www.yuiblog.com/blog/2007/01/17/event-plan/
18. Native Events • DOM Events • UI • UI logic • mutation • ... • BOM Events • load • error • history • ...
19. Problem of IE • Didn’t follow the W3C DOM standard • Memory leaks • Not support bubbling/capturing • ‘this’ is window, not element • ‘event’ is different http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html
20. Dean Edward’s Add Event • Manage callback functions • Fallback to elem.onevent = function () { ... } • Only one function for each event http://dean.edwards.name/weblog/2005/10/add-event2/
21. jQuery’s Event • Normalize event object • ‘trigger’ method to fire specific event
22. ‘trigger’ Method • Can fire any event as you wish • Even none native event name works
23. Custom Event • An event name is defined by you, triggered by you
24. When to Trigger • State/Value change
25. Observer • Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. GoF Book
26. Example: Backbone • A driver model • A car model • Driver’s tension will get higher when shift gear
27. Driver var Driver = Backbone.Model.extend( defaults: { tension: 0 }, tensionUp: function () { this.set({ tension: this.get('tension') + 1 }); } );
28. Car var Car = Backbone.Model.extend( defaults: { gear: 'P' } );
29. Observer var driver = new Driver(), car = new Car(); car.on('change:gear', function () { driver.tensionUp(); }); //GO car.set({ gear: 1 });
30. Advantages • Loose coupling • Prevent nested codes
31. Deferred http://www.flickr.com/photos/gozalewis/3256814461/
32. History • a.k.a Promise • Idea since 1976 (Call by future) • Dojo 0.9 (2007), 1.5 (2010) • jQuery 1.5 (2011) • CommonJS Promises/A
33. What is Deferred • In computer science, future, promise, and delay refer to constructs used for synchronization in some concurrent programming languages. http://en.wikipedia.org/wiki/Futures_and_promises
34. Example: Image Loader function imgLoader(src) { var _img = new Image(), _def = $.Deferred(); _img.onload = _def.resolve; //success _img.onerror = _def.reject; //fail _img.src = src return _def; }
35. Use Image Loader imgLoader('/images/logo.png').done(function () { $('#logo').fadeIn(); }).fail(function () { document.location = '/404.html'; });
36. jQuery Deferred • Multiple callback functions • Add callbacks at any time • jQuery.when http://api.jquery.com/category/deferred-object/
37. Image Loader with Cache function imgLoader(src) { if (imgLoader[src]) { return imgLoader[src]; } var _img = new Image(), _def = $.Deferred(); imgLoader[src] = _def; _img.onload = _def.resolve; //success _img.onerror = _def.reject; //fail _img.src = src return _def; }
38. Use Image Loader imgLoader('/images/logo.png').done(function () { $('#logo').fadeIn(); }).fail(function () { document.location = '/404.html'; }); imgLoader('/images/logo.png').done(function () { App.init(); }); imgLoader('/images/logo.png').fail(function () { App.destroy(); });
39. jQuery.when $.when( $.getJSON('/api/jedis'), $.getJSON('/api/siths'), $.getJSON('/api/terminators') ).done(function (jedis, siths, terminators) { // do something.... });
40. Advantages • Manage callbacks • Cache results • $.when
41. PubSub http://www.flickr.com/photos/birdfarm/519230710/
42. Case • A module know when user signin • X, Y modules need to know when user signin • A should not fail when X or Y fails
43. Without PubSub
44. signin signin A Y X Z B
45. X, Y depends on A
46. PubSub Subscribe Event Only
47. PubSub A Y X Z B
48. PubSub subscribe ‘signin’ subscribe ‘signin’ A Y X Z B
49. PubSub publish ‘signin’ A Y X Z B
50. PubSub signin signin A Y X Z B
51. Publish/Subscribe • Mediator + Observer • Easy to implement
52. http://addyosmani.com/blog/jqcon-largescalejs-2012/ $(document).trigger('eventName'); //equivalent to $.publish('eventName') $(document).on('eventName',...); //equivalent to $.subscribe('eventName',...) // Using .on()/.off() from jQuery 1.7.1 (function($) { var o = $({}); $.subscribe = function() { o.on.apply(o, arguments); }; $.unsubscribe = function() { o.off.apply(o, arguments); }; $.publish = function() { o.trigger.apply(o, arguments); }; }(jQuery)); // Multi-purpose callbacks list object // Pub/Sub implementation: var topics = {}; jQuery.Topic = function( id ) { var callbacks, topic = id && topics[ id ]; if ( !topic ) { callbacks = jQuery.Callbacks(); topic = { publish: callbacks.fire, subscribe: callbacks.add, unsubscribe: callbacks.remove }; if ( id ) { topics[ id ] = topic; } } return topic; }; //Using Underscore and Backbone var myObject = {}; _.extend( myObject, Backbone.Events ); //Example myObject.on('eventName', function( msg ) { console.log( 'triggered:' + msg ); }); myObject.trigger('eventName', 'some event');
53. When to Use • Module and module have dependency but not really depend on it.
54. Example: Error Handler • An module to control the behavior when error occurs • All other module should call it when something went wrong • No module should fail because error handler fails
55. Error Handler Code //Error Handler $.subscribe('AJAXfail', function () { alert('Something wrong!!'); }); //Code $.get('/api/siths').fail(function () { $.publish('AJAXfail'); });
56. Advantages • Loose coupling • Scalability
57. Summary • Control async process using deferred • Modulize your application • Decouple using custom event • Decouple more using pubsub
58. Further Reading...
61. http://addyosmani.com/resources/essentialjsdesignpatterns/book/
62. http://shichuan.github.com/javascript-patterns/
63. http://leanpub.com/asyncjs
64. May the Patterns be with You
65. Questions?
66. Photos License • CC License • http://www.flickr.com/photos/sbisson/298160250/ • http://www.flickr.com/photos/gozalewis/3256814461/ • http://www.flickr.com/photos/birdfarm/519230710/ • Licensed by Author • http://www.flickr.com/photos/swehrmann/6009646752