Building Decoupled Large-scale Applications Using JavaScript (And jQuery)

Transcript

1. LARGE-SCALE USING JAVASCRIPT AND JQUERY BUILDING WITH @ADDYOSMANI APPLICATIONS #JQCON

   #LARGESCALE

2. I WORK AT A COMPANY CALLED

3. BUILDING JAVASCRIPT APPS THAT HAVE TO SCALE FROM THE GET-GO

4. WHAT DOES THAT INVOLVE?

5. DECOUPLING BASIC CONCEPTS

6. SEPARATES UNITS OF CODE THAT DON’T DEPEND ON EACH OTHER

7. FILTER FORMULA EDITOR GRID SPREADSHEET WIDGET/MODULE

8. PROMOTES REUSABILITY LESS COUPLING = EASIER REUSE

9. BUT THAT’S NOT ALL! DECOUPLING CAN BE TAKEN FURTHER

10. REDUCING THE RISK OF BREAKAGE WHEN OTHER MODULES FAIL EXAMPLE

11. COUPLED, DIRECT CALLS //Coupled $.when( $.ajax("mail.php") ) .then(function( ajaxArgs ){

    var jqXHR = ajaxArgs[2], data = jqXHR.responseText; // Display notification and preview modals.show('New Message', data); // What happens if something breaks here? // Play new message sound audioManager.play('newMessage'); // Update the unread message count messages.increaseMessageCount('unread'); });

12. DECOUPLED, EVENT-DRIVEN // Decoupled, Event-driven $.when( $.ajax("mail.php") ) .then(function( ajaxArgs

    ){ var jqXHR = ajaxArgs[2], data = jqXHR.responseText; // Tell the application there is a new message, share the data $.publish('newMessage', data); // Other modules can now just listen out for 'newMessage' }); $.subscribe('newMessage', ...); // modals.show() // How about now? $.subscribe('newMessage', ...); // audioManager.play() $.subscribe('newMessage', ...); // messages.increaseMessageCount()

13. PUB/SUB BASIC CONCEPTS

14. LOGICALLY DECOUPLE OBJECTS GENERATING EVENTS FROM THOSE REACTING TO THEM

    NEW MESSAGE ‘HELLO WORLD’ THERE’S A NEW MESSAGE!

15. BAKED INTO MVC, MV* MODELS VIEWS CONTROLLERS MODELS CAN BE

    OBSERVED FOR CHANGES

16. OPTION 1: JQUERY CUSTOM EVENTS $(document).trigger('eventName'); //equivalent to $.publish('eventName') $(document).on('eventName',...);

    //equivalent to $.subscribe('eventName',...) // Example: $(document).on('newMessage', function(){ displayNewMailNotification(); }); $(document).trigger('newMessage');

17. OPTION 2: PUB/SUB WRAPPER // 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));

18. OPTION 3: $.CALLBACKS // 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; };

19. OPTION 3: $.CALLBACKS // Usage: // Subscribers $.Topic( 'mailArrived' ).subscribe(

    fn1 ); $.Topic( 'mailArrived' ).subscribe( fn2 ); $.Topic( 'mailSent' ).subscribe( fn1 ); // Publishers: $.Topic( 'mailArrived' ).publish( 'hello world!' ); $.Topic( 'mailSent' ).publish( 'woo! mail!' );

20. OPTION 4: BACKBONE.JS EVENTS var myObject = {}; _.extend( myObject,

    Backbone.Events ); myObject.on('eventName', function( msg ) { console.log( 'triggered:' + msg ); }); myObject.trigger('eventName', 'some event'); // Similarly.. person.on('change:name change:age', function( msg ) { console.log('name and age changed'); });

21. CHECK-UP

22. YOUR CURRENT ARCHITECTURE MODULES WIDGETS MVC LIBRARIES TOOLKITS APPLICATION CORE

    TEMPLATES

23. IF ONE PART OF YOUR APPLICATION BREAKS CAN THE APP

    FIX THIS BREAK ITSELF? BUT THERE ARE PROBLEMS:

24. HOW MUCH OF WHAT WE CREATE IS EASILY REUSABLE? HOW

    SECURE IS YOUR APPLICATION FROM ITSELF? CAN OUR MODULES BE TESTED INDEPENDENTLY? MORE PROBLEMS

25. THINK LONG TERM! WHAT HAVEN’T YOU FACTORED IN YET? WHAT

    MIGHT CHANGE?

26. “THE SECRET TO BUILDING LARGE APPS IS NEVER BUILD LARGE

    APPS. BREAK YOUR APP INTO SMALL PIECES. THEN, ASSEMBLE THOSE TESTABLE, BITE-SIZED PIECES INTO YOUR BIG APPLICATION” - JUSTIN MEYER

27. PATTERNS

28. FACADE PATTERN

29. SIMPLIFIES USAGE OF A MODULE THROUGH A LIMITED API

30. $( el ).css() $( el ).animate(..) $( el ).attributes( key,

    value ) ... EXAMPLES YOU USE ALL THE TIME

31. HIDES IMPLEMENTATION LEVEL DETAILS

32. var module = (function() { var _private = { i:5,

    get : function() { console.log('current value:' + this.i); }, set : function( val ) { this.i = val; }, run : function() { console.log('running'); }, jump: function(){ console.log('jumping'); } }; return { facade : function( args ) { _private.set(args.val); _private.get(); if ( args.run ) { _private.run(); } } } }()); module.facade({run: true, val:10}); //outputs current value: 10, running A limited API allowing access to a more complex implementation FACADE IMPLEMENTATION

33. return { facade : function( args ) { // set

    values of private properties _private.set(args.val); // test setter _private.get(); // optional: provide a simple interface // to internal methods through the // facade signature if ( args.run ) { _private.run(); } } } module.facade({run: true, val:10}); Users are only concerned with using the facade FACADE IMPLEMENTATION

34. ENABLES COMPLEXITY BEHIND THE SCENES

35. bindReady: function() { ... // One snippet for event listeners

    in jQuery core where the user // isn't exposed to any of the cross-browser implementation // handling behind the scenes if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded",DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { document.attachEvent( "onreadystatechange", DOMContentLoaded); and another .bindReady() used for $(document).ready()

36. MEDIATOR PATTERN

37. TOWER HANDLES WHAT PLACES CAN TAKE OFF OR LAND ALL

    COMMUNICATION DONE FROM PLANES TO TOWER, NOT PLANE TO PLANE A CENTRALISED CONTROLLER IS KEY TO SUCCESS HERE ANALOGY: AIR TRAFFIC CONTROL

38. ALLOWS MODULES TO BROADCAST OR LISTEN FOR NOTIFICATIONS A MEDIATOR:

39. var mediator = (function(){ var subscribe = function(channel, fn){ if

    (!mediator.channels[channel])mediator.channels[channel] = []; mediator.channels[channel].push({ context: this, callback:fn }); return this; }, publish = function(channel){ if (!mediator.channels[channel]) return false; var args = Array.prototype.slice.call(arguments, 1); for (var i = 0, l = mediator.channels[channel].length; i <l; i++) { var subscription = mediator.channels[channel][i]; subscription.callback.apply(subscription.context,args); } return this; }; return { channels: {}, publish: publish, subscribe: subscribe, installTo: function(obj){ obj.subscribe = subscribe; obj.publish = publish; } }; }()); MEDIATOR IMPLEMENTATION:

40. // Publish-Subscribe via a centralised mediator mediator.subscribe('messageReceived', function( data ){

    // Awesome! a new message // I can do something with the data }); mediator.publish('messageReceived', { sender: '[email protected]', preview: 'hello world' }); MEDIATOR EXAMPLE:

41. NOTIFICATIONS CAN BE HANDLED BY ANY NUMBER OF MODULES CENTRALISED

    PUB/SUB

42. MESSAGES CHAT NOTIFICATIONS A new message is available A new

    notification has been posted Any new emails? Paul sent a new IM Any new instant messages? Are any contacts online to chat? 5 contacts are available to chat

43. AS CALLS PASS-THROUGH, IT CAN PERFORM VALIDATION AND MUCH MORE

    MORE THAN JUST PUBLISH/SUBSCRIBE

44. MODULES

45. MODULE PATTERN OBJECT LITERALS AMD ASYNCHRONOUS MODULES - UNTIL WE

    GET ES HARMONY SIMULATED PRIVACY MODULAR OBJECTS

46. LARGE APPLICATIONS

47. WHAT IS A LARGE APP? A NON-TRIVIAL APPLICATION REQUIRING SIGNIFICANT

    DEVELOPER EFFORT TO MAINTAIN, WHERE MOST OF THE HEAVY LIFTING OF DATA MANIPULATION AND DISPLAY FALLS TO THE BROWSER IT ISN’T ABOUT LOC!

48. GWT->JAVASCRIPT, LOTS OF COMPONENTS GMail

49. MODULARIZED HOMEPAGE Yahoo!

50. BRAINSTORM

51. LOOSELY COUPLED ARCHITECTURE SMALLER INDEPENDENT MODULES FLEXIBILITY TO CHANGE WHAT

    ARE WE LOOKING FOR?

52. NOTIFY US WHEN SOMETHING INTERESTING HAPPENS DON’T TOUCH ANYTHING THEY

    DON’T HAVE TO CAN’T CAUSE THE ENTIRE APP TO STOP WORKING MODULES:

53. DEDICATE SUFFICIENT TIME TO PLANNING THE ARCHITECTURE THE MAKES THE

    MOST SENSE FOR YOUR APP - IT’S OFTEN MORE COMPLEX THAN WE INITIALLY THINK.

54. SOLUTION: COMBO! + +

55. 1. THE APPLICATION CORE USING THE MEDIATOR PATTERN MANAGES THE

    MODULE LIFECYCLE: STARTS, STOPS, RESTARTS IF NECESSARY

56. CODE SAMPLE: app.core = (function(){ var data = {}; return{

    define: function( id, constructor ){ //... type checking not show var c = constructor(app.facade.define(this,id)); //..further instance checks not shown data[id] = { define: constructor, instance:null; }, start: function( id ){ var module = data[id]; module.instance =module.define(app.facade.define(this, id)); module.instance.initialize(); }, stop: function( id ){ var module = data[id]; if(module.instance){ module.instance.destroy(); } ...

57. 1. THE APPLICATION CORE USING THE MEDIATOR PATTERN REACTS TO

    ACTIONS PASSED BACK FROM A SANDBOX (FACADE) - HANDLES LOGIC

58. CODE SAMPLE: // The sandbox has publish() and subscribe() methods

    // which the mediator implements // subscribe register:function(events, module){ if(app.core.dom.isObject(events) && module){ if(data[module]){ data[module].events = events; } } }, // publish trigger: function(events){ if(app.core.dom.isObject(events)){ var mod; for(mod in data){ if(data.hasOwnProperty(mod)){ mod = data[mod]; if(mod.events && mod.events[events.type]){ ...

59. 1. THE APPLICATION CORE USING THE MEDIATOR PATTERN ENABLES ADDING

    AND REMOVING MODULES WITHOUT CAUSING BREAKS

60. CODE SAMPLE: // Summary definitions of a simple todo app

    // Easy to add/remove/start/stop app.core.define('#todo-counter', ...); app.core.define('#todo-field',...); app.core.define('#validate', ...); app.core.define("#todo-list", ...); app.core.define("#todo-entry", ...); app.core.define('#error', ...); app.core.define('#validate', ...);

61. 1. THE APPLICATION CORE USING THE MEDIATOR PATTERN HANDLES ERROR

    DETECTION AND MANAGEMENT

62. 2. THE SANDBOX USING THE FACADE PATTERN AN ABSTRACTION OF

    THE CORE THAT’S AN API FOR COMMON TASKS, USED BY MODULES

63. CODE SAMPLE: app.sandbox = { define: function( el, module ){

    return{ publish: function( eventType ){ app.events.trigger( eventType ); }, subscribe: function( eventType ){ app.events.register( eventType, module); }, find: function( selector ){ return app.dom.query(el).find(selector); }, ignore: function( eventType ){ app.events.remove( eventType, module); } } } };

64. 2. THE SANDBOX USING THE FACADE PATTERN INTERFACE FOR ENSURING

    MODULES DON’T DIRECTLY ACCESS THE CORE/LIBRARIES

65. CODE SAMPLE: // Note: all input validation done by the

    mediator animate:function( props ){ return core.dom.animate(props); }, bind:function( el , type, fn ){ dom.bind(el, type, fn); }, unbind:function( el , type, fn ){ dom.unbind(el, type, fn); }, ignore:function( e ){ events.remove(e, module); }, createElement:function( el, config ){

66. 2. THE SANDBOX USING THE FACADE PATTERN PERMISSIONS MANAGER, SECURING

    WHAT MODULES CAN/CAN’T ACCESS

67. CODE SAMPLE: // A permissions structure can support checking //

    against subscriptions prior to allowing them // to clear. This enforces a flexible security // layer for your application. var permissions = { newMessage: { messageComposer:true, notifications: true, offlineStore: false }, trashMessage:{ messageComposer: true, notifications: false }, ...

68. 3. MODULES: UNIQUE (INDEPENDENT) BLOCKS OF FUNCTIONALITY FOR YOUR APPLICATION

    USING AMD/OBJECT LITERALS/MODULE PATTERN

69. CODE SAMPLE (STATUS): app.core.define('#status-widget', function( sandbox ){ var status =

    "none"; return{ initialize: function(){ var el = sandbox.find('.editor'); sandbox.subscribe({ 'new-entry': this.updateStatus }); }, destroy: function(){ status = ""; }, updateStatus: function(data){ status = "edited"; sandbox.find('.status').html(status); sandbox.publish('status-updated'); } } });

70. 3. MODULES: SUBSCRIBE TO NOTIFICATIONS OF INTEREST, RAPIDLY REACT TO

    CHANGES USING AMD/OBJECT LITERALS/MODULE PATTERN

71. CODE SAMPLE: app.core.define('#status-widget', function( sandbox ){ var status = "none";

    return{ initialize: function(){ var el = sandbox.find('.editor'); sandbox.subscribe({ 'new-entry': this.updateStatus }); }, destroy: function(){ status = ""; }, updateStatus: function(data){ status = "edited"; sandbox.find('.status').html(status); sandbox.publish('status-updated'); } } });

72. 3. MODULES: NOTIFY THE APP WHEN SOMETHING INTERESTING HAPPENS (PUBLISH)

    USING AMD/OBJECT LITERALS/MODULE PATTERN

73. CODE SAMPLE: app.core.define('#status-widget', function( sandbox ){ var status = "none";

    return{ initialize: function(){ var el = sandbox.find('.editor'); sandbox.subscribe({ 'new-entry': this.updateStatus }); }, destroy: function(){ status = ""; }, updateStatus: function(data){ .. sandbox.publish({ type : 'status-updated', data : {value: ‘A new entry has been added’} }); } }

74. DEMO TIME! SEE: https://github.com/addyosmani/largescale-demo

75. REVIEW

76. A PATTERN FOR LARGE-SCALE APPS CORE SANDBOX MODULES

77. • Modules have fewer dependencies • They can be managed

    so that the application doesn’t (or shouldn’t) fall over. • You can theoretically pick up any module, drop it in a page and start using it in another project AND ONE LAST REMINDER ABOUT ‘WHY?’

78. FURTHER READING

79. • Patterns For Large-scale JavaScript Application Architecture http://addyosmani.com/largescalejavascript/ • Understanding

    The Publish/Subscribe Pattern http:// msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx • Writing Modular JavaScript with AMD, CommonJS & ES Harmony http://addyosmani.com/writing-modular-js • Understanding MVC & MVP For JS Developers http:// bit.ly/wJRR59 MORE INFORMATION

80. • Backbone Fundamentals (book): http:// backbonefundamentals.com • Essential JavaScript Design

    Patterns (e-book) http:// bit.ly/bMyoQ9 • Building Large-Scale jQuery Applications http:// addyosmani.com/blog/large-scale-jquery/ FREE BOOKS/ARTICLES

81. Blog Twitter GitHub http://addyosmani.com @addyosmani or @addy_osmani http://github.com/addyosmani THAT’S IT!

    FOR MORE FROM ME: