1. Scalable JavaScript Application Architecture Nicholas C. Zakas | @slicknet

2. Whos this guy? Ex-tech lead Co-Creator Contributor, Yahoo! csslint.net Creator of YUI TestAuthor Lead Author Contributor Lead Author

3. @slicknet

4. Single-page apps

5. ModelView Controller

6. Single-page apps &Multi-page apps

7. Building an application framework

8. An application framework is like a playground for your codeProvides structure around otherwise unrelated activities flickr.com/photos/osterwalder/152697503/

9. Isnt that what JavaScript libraries do?

10. flickr.com/photos/skistz/398429879/A JavaScript library is like a toolbox You can build any number of things using the tools

11. Application CoreBase Library

12. Module Theory Everything is a module

13. module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set Source: Merriam-Webster Dictionary

14. module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set Source: Merriam-Webster Dictionary

17. How does this apply to web applications?

18. web application module (n)1 : an independent unit of functionality that is part of the totalstructure of a web application Source: Me

20. Web application modules consist of HTML + CSS + JavaScript

21. Any single module should be ableto live on its own

22. Loose coupling allows you to make changes to one module without affecting the others flickr.com/photos/quinnanya/3575417671/

23. flickr.com/photos/renfield/3414246938/ Each module has its own sandbox An interface with which the module can interact to ensure loose coupling

24. Module Module ModuleModule Sandbox Module Application Core Base Library

25. Application ArchitectureModulesSandboxApplication CoreBase Library

26. Module Module ModuleModule Sandbox Module Modules have limited knowledge Each module knows about their sandbox and thats it

27. Core.register("module-name", function(sandbox){ return { init: function(){ //constructor }, destroy: function(){ //destructor } };});

28. Which parts know about the web application being built?

29. None of them

30. Each part of the architecture is like a puzzle piece No single piece needs to know what the picture is All that matters is that the piece does its own job correctly flickr.com/photos/generated/501445202/

31. What is a modules job?

32. Hello, Im the weather module.Its my job to tell you the weather.

33. Hello, Im the stocks module.Its my job to tell you about thestock market.

34. Each modules job is to create a meaningful user experience

35. flickr.com/photos/eljay/2392332379/ The web application is created as a result of all parts doing their job

36. This doesnt mean modules can do whatever they want to do their job

37. flickr.com/photos/tedsblog/43433812/ Modules are like little kidsThey need a strict set of rules so they dont get into trouble

38. Module Rules• Hands to yourself  Only call your own methods or those on the sandbox  Dont access DOM elements outside of your box  Dont access non-native global objects• Ask, dont take  Anything else you need, ask the sandbox• Dont leave your toys around  Dont create global objects• Dont talk to strangers  Dont directly reference other modules

39. Modules must stay within their own sandboxes No matter how restrictive or uncomfortable it may seemflickr.com/photos/madaise/3406217980/

40. Application ArchitectureModulesSandboxApplication CoreBase Library

41. Module Module ModuleModule Sandbox Module Application Core Base Library

42. SandboxThe sandbox ensures a consistent interface Modules can rely on the methods to always be there

43. Module Module ModuleModule Sandbox Module Application Core Base Library

44. Module Module ModuleModule Sandbox Module Modules only know the sandbox The rest of the architecture doesnt exist to them

45. The sandbox also acts like a security guardKnows what the modules are allowed to access and do on the framework flickr.com/photos/heraklit/169566548/

46. Core.register("module-name", function(sandbox){ return { init: function(){ //not sure if Im allowed... if (sandbox.iCanHazCheezburger()){ alert("thx u"); } }, destroy: function(){ //destructor } };});

47. Sandbox Jobs• Consistency• Security• Communication

48. Take the time to design the correct sandbox interface It cant change later

49. Application ArchitectureModulesSandboxApplication CoreBase Library

50. Module Module ModuleModule Sandbox Module Application Core Base Library

51. Application CoreThe application core manages modules Thats it

52. Application Coreaka Application Controller

53. The application core tells a module whenit should initialize and when it should shutdown flickr.com/photos/bootbearwdc/20817093/ flickr.com/photos/bootbearwdc/20810695/

54. Core = function(){ var moduleData = {}; return { register: function(moduleId, creator){ moduleData[moduleId] = { creator: creator, instance: null }; }, start: function(moduleId){ moduleData[moduleId].instance = moduleData[moduleId].creator(new Sandbox(this)); moduleData[moduleId].instance.init(); }, stop: function(moduleId){ var data = moduleData[moduleId]; if (data.instance){ data.instance.destroy(); data.instance = null; } } }}();

55. Core = function(){ return { //more code here... startAll: function(){ for (var moduleId in moduleData){ if (moduleData.hasOwnProperty(moduleId)){ this.start(moduleId); } } }, stopAll: function(){ for (var moduleId in moduleData){ if (moduleData.hasOwnProperty(moduleId)){ this.stop(moduleId); } } }, //more code here... };}();

56. //register modulesCore.register("module1", function(sandbox){ /*...*/ });Core.register("module2", function(sandbox){ /*...*/ });Core.register("module3", function(sandbox){ /*...*/ });Core.register("module4", function(sandbox){ /*...*/ });//start the application by starting all modulesCore.startAll();

57. The application core managescommunication between modules flickr.com/photos/markhillary/353738538/

59. TimelineFilter = { changeFilter: function(filter){ Timeline.applyFilter(filter); }}; Tight CouplingStatusPoster = { postStatus: function(status){ Timeline.post(status); }}; Tight CouplingTimeline = { applyFilter: function(filter){ //implementation }, post: function(status){ //implementation }};

60. Core.register("timeline-filter", function(sandbox){ return { changeFilter: function(filter){ sandbox.notify({ type: "timeline-filter-change", data: filter }); Loose } }; Coupling});Core.register("status-poster", function(sandbox){ return { postStatus: function(statusText){ sandbox.notify({ type: "new-status", data: statusText }); Loose } }; Coupling});

61. Core.register("timeline", function(sandbox){ return { init: function(){ sandbox.listen([ "timeline-filter-change", "post-status" ], this.handleNotification, this); Loose }, Coupling handleNotification: function(note){ switch(note.type){ case "timeline-filter-change": this.applyFilter(note.data); return; case "post-status": this.post(note.data); return; } } };});

62. When modules are loosely coupled, removing a module doesnt break the othersNo direct access to another module = no breaking should the module disappear

63. The application core handles errorsUses available information to determine best course of action flickr.com/photos/brandonschauer/3168761995/

64. Core = function(){ var moduleData = {}, debug = false; function createInstance(moduleId){ var instance = moduleData[moduleId].creator(new Sandbox(this)), name, method; if (!debug){ for (name in instance){ method = instance[name]; if (typeof method == "function"){ instance[name] = function(name, method){ return function(){ try { return method.apply(this, arguments);} catch(ex) {log(1, name + "(): " + ex.message);} }; }(name, method); } } } return instance; } //more code here}();

65. Learn morehttp://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation

66. Application Core Jobs• Manage module lifecycle• Enable inter-module communication• General error handling• Be extensible

67. Why not?

68. Web applications changeOften in ways that you couldnt possibly anticipate

69. Plan for extension

70. flickr.com/photos/pointnshoot/1443575327/ Anything built for extension can never be obsoleteExtensions augment the capabilities of the core to keep it relevant and useful

71. Module Module ModuleModule Sandbox Module ApplicationExtension Extension Core Base Library

72. What Extensions?• Error handling• Ajax communication• New module capabilities• General utilities• Anything!

73. Ajax communication comes in different forms Tends to be tied to something available on the server

74. Request format Entrypoint Response formatThree parts must be in sync for Ajax to work Modules shouldnt know anything about any of this

75. Module Module ModuleModule Sandbox Module ApplicationExtension Ajax/XML Core Base Library

76. GET ?name=value&name=value /ajax Request format Entrypoint Response format<response> <status>ok|error</status> <data> <results> <result name="..." /> <result name="..." /> </results> </data></response>

77. Entrypointvar xhr = new XMLHttpRequest();xhr.open("get", "/ajax?name=value", true); Requestxhr.onreadystatechange = function(){ format if (xhr.readyState == 4){ if (xhr.status == 200 || xhr.status == 304){ var statusNode = xhr.responseXML.getElementsByTagName("status")[0], dataNode = xhr.responseXML.getElementsByTagName("data")[0]; if (statusNode.firstChild.nodeValue == "ok"){ handleSuccess(processData(dataNode)); } else { Response handleFailure(); format } } else { handleFailure(); } }};xhr.send(null); Basic implementation Lowest-level Ajax with XMLHttpRequest

78. Library reference Entrypointvar id = Y.io("/ajax?name=value", { method: "get", Request on: { format success: function(req){ var statusNode = req.responseXML.getElementsByTagName("status")[0], dataNode = req.responseXML.getElementsByTagName("data")[0]; if (statusNode.firstChild.nodeValue == "ok"){ handleSuccess(processData(dataNode)); } else { Response handleFailure(); format } }, failure: function(req){ handleFailure(); } }}); Implementation using a library Hides some of the ugliness but still tightly coupled to Ajax implementation

79. var id = sandbox.request({ name: "value" }, { success: function(response){ handleSuccess(response.data); }, failure: function(response){ handleFailure(); }}); Implementation using sandbox Passes through to core - hides all Ajax communication details

80. Request format Entrypoint Response formatAjax extension encapsulates all details Any of these three can change without affecting modules

81. GET ?name=value&name=value /request Request format Entrypoint Response format{ status: "ok|error", data: { results: [ "...", "..." ] }}

82. Module Module ModuleModule Sandbox Module ApplicationExtension Ajax/JSON Core Base Library

83. Ajax Extension Jobs• Hide Ajax communication details• Provide common request interface• Provide common response interface• Manage server failures

84. Application ArchitectureModulesSandboxApplication CoreBase Library

85. Module Module ModuleModule Sandbox Module ApplicationExtension Extension Core Base Library

86. The base library provides basic functionality Ironic, huh? Base Library

88. flickr.com/photos/kartik_m/2724121901/ Most applications are too tightly coupled to the base libraryDevelopers get upset when they cant touch the base library directly

89. High-Performance JavaScript, OSCON 2007 Joseph Smarr, Plaxo, Inc.

90. Learn morehttp://josephsmarr.com/2007/07/25/high-performance-javascript-oscon-2007/

91. Ideally, only the application corehas any idea what base library is being used

92. Module Module ModuleModule Sandbox Module Application Core Dojo

93. Module Module ModuleModule Sandbox Module Application Core YUI

94. Base Library Jobs• Browser normalization• General-purpose utilities  Parsers/serializers for XML, JSON, etc.  Object manipulation  DOM manipulation  Ajax communication• Provide low-level extensibility

95. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library Extension

96. Architecture Knowledge

97. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library Extension

98. Only the base library knows which browser is being used No other part of the architecture should need to know Base Library

99. Only the application core knows which base library is being used No other part of the architecture should need to know Application Core Base Library

100. Sandbox Application CoreOnly the sandbox knows which application core is being used No other part of the architecture should need to know

101. Module Module Module Module Sandbox Module The modules know nothing except that the sandbox existsThey have no knowledge of one another or the rest of the architecture

102. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library ExtensionNo part knows about the web application

103. Advantages

104. flickr.com/photos/kgoldendragon613/278240446/Multiple different applications can be created with the same framework Minimize ramp-up time by reusing existing components

105. Each part can be tested separatelyYou just need to verify that each is doing its unique job flickr.com/photos/misocrazy/151021636/

106. A scalable JavaScript architectureallows you to replace any blockwithout fear of toppling the tower flickr.com/photos/aku-ma/2424194422/

107. The End

108. Etcetera•My blog: www.nczonline.net•Twitter: @slicknet•These Slides: slideshare.net/nzakas