JavaScript Essential Patterns

Transcript

1. 1.

   JavaScript Essential Patterns othree @ OSDC 2012

2. 2.

   Who am I • othree • MozTW member • F2E

   at HTC • http://blog.othree.net
3. 3.

   Evolution of the Web 1990 1995 2003 2005 WWW Browser

   Wars Web Standards Web Applications 2006 Web 2.0 2010 Mobile
4. 4.

   Web Applications

5. 5.

   Text

6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    Problem to F2E • Large scale application never seen on

    Web
11. 11.

    But • The problem F2Es face today already exists

12. 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. 13.

    GOF Book, 1994

14. 14.

    Browser Environment • Async • Event Driven • Async •

    Source Code from Internet • Async • Business Logic on Server
15. 15.

    Patterns to Talk Today • Custom Event • Deferred •

    PubSub
16. 16.

    Custom Event http://www.flickr.com/photos/swehrmann/6009646752

17. 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. 18.

    Native Events • DOM Events • UI • UI logic

    • mutation • ... • BOM Events • load • error • history • ...
19. 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. 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. 21.

    jQuery’s Event • Normalize event object • ‘trigger’ method to

    fire specific event
22. 22.

    ‘trigger’ Method • Can fire any event as you wish

    • Even none native event name works
23. 23.

    Custom Event • An event name is defined by you,

    triggered by you
24. 24.

    When to Trigger • State/Value change

25. 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. 26.

    Example: Backbone • A driver model • A car model

    • Driver’s tension will get higher when shift gear
27. 27.

    Driver var Driver = Backbone.Model.extend( defaults: { tension: 0 },

    tensionUp: function () { this.set({ tension: this.get('tension') + 1 }); } );
28. 28.

    Car var Car = Backbone.Model.extend( defaults: { gear: 'P' }

    );
29. 29.

    Observer var driver = new Driver(), car = new Car();

    car.on('change:gear', function () { driver.tensionUp(); }); //GO car.set({ gear: 1 });
30. 30.

    Advantages • Loose coupling • Prevent nested codes

31. 31.

    Deferred http://www.flickr.com/photos/gozalewis/3256814461/

32. 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. 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. 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. 35.

    Use Image Loader imgLoader('/images/logo.png').done(function () { $('#logo').fadeIn(); }).fail(function () {

    document.location = '/404.html'; });
36. 36.

    jQuery Deferred • Multiple callback functions • Add callbacks at

    any time • jQuery.when http://api.jquery.com/category/deferred-object/
37. 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. 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. 39.

    jQuery.when $.when( $.getJSON('/api/jedis'), $.getJSON('/api/siths'), $.getJSON('/api/terminators') ).done(function (jedis, siths, terminators) {

    // do something.... });
40. 40.

    Advantages • Manage callbacks • Cache results • $.when

41. 41.

    PubSub http://www.flickr.com/photos/birdfarm/519230710/

42. 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. 43.

    Without PubSub

44. 44.

    signin signin A Y X Z B

45. 45.

    X, Y depends on A

46. 46.

    PubSub Subscribe Event Only

47. 47.

    PubSub A Y X Z B

48. 48.

    PubSub subscribe ‘signin’ subscribe ‘signin’ A Y X Z B

49. 49.

    PubSub publish ‘signin’ A Y X Z B

50. 50.

    PubSub signin signin A Y X Z B

51. 51.

    Publish/Subscribe • Mediator + Observer • Easy to implement

52. 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. 53.

    When to Use • Module and module have dependency but

    not really depend on it.
54. 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. 55.

    Error Handler Code //Error Handler $.subscribe('AJAXfail', function () { alert('Something

    wrong!!'); }); //Code $.get('/api/siths').fail(function () { $.publish('AJAXfail'); });
56. 56.

    Advantages • Loose coupling • Scalability

57. 57.

    Summary • Control async process using deferred • Modulize your

    application • Decouple using custom event • Decouple more using pubsub
58. 58.

    Further Reading...

59. 59.

    None
60. 60.

    None
61. 61.

    http://addyosmani.com/resources/essentialjsdesignpatterns/book/

62. 62.

    http://shichuan.github.com/javascript-patterns/

63. 63.

    http://leanpub.com/asyncjs

64. 64.

    May the Patterns be with You

65. 65.

    Questions?

66. 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