Building Scalable JavaScript Apps
2 likes4,797 views
This document discusses patterns for building scalable JavaScript applications. It recommends combining module, facade, and mediator/event aggregator patterns. Modules should be self-contained and communicate through a facade to the application core. An event aggregator promotes loose coupling by allowing modules to broadcast and listen to each other's notifications. Together these patterns can help address issues like reusability, independent testability, and failure tolerance to create maintainable, scalable JavaScript apps.
Building Scalable JavaScript Apps
- 1. Gil Fink Building Scalable JavaScript Apps
- 2. Agenda • The challenge we face • Suggested solution • The patterns
- 3. The Challenge How would you define a scalable JavaScript app architecture? Non-trivial apps require significant developer effort to maintain, where a browser plays a big role in data manipulation and display
- 4. Scalable JavaScript App Examples Gmail Twitter Facebook Yahoo! Homepage and more
- 5. Current Architecture Might contain a mixture of the following: Custom Widgets Modules Application Core MV* Framework JavaScript Libraries and Toolkits
- 6. Current Architecture – Cont.
- 7. Possible Problems How much of the app is reusable? Can single modules exist on their own independently? Can a single module be tested independently? How much modules depend on other modules in the system? Is the application parts tightly coupled? If a specific part fails, can the application still work?
- 8. Suggested Solution: Mixing JS Patterns Module Pattern Façade Pattern Mediator/Event Aggregator
- 9. Suggested Solution Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
- 10. Modular JavaScript Review Proven JavaScript patterns for creating modular JavaScript Leverage JavaScript’s built-in features “Modularize” code into reusable objects Prototype Pattern Module Pattern Revealing Module Pattern Revealing Prototype Pattern Or use libraries like RequireJS or Almond
- 11. Module Patterns // Module pattern var Car = function () { // private variables // private functions return { // public members }; }; //Revealing prototype pattern var Car = function (elm) { // variables defined here } Car.prototype = function () { // functions defined here return { // public members defined // here as with revealing // module pattern }; }();
- 13. Modules Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
- 14. Modules Informs the application when something interesting happens Correctly publish events of interest Shouldn’t concern about: What objects or modules are being notified Where these objects are based How many objects subscribe to notifications
- 15. Application Core Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
- 16. The Application Core Manages the module lifecycle When is it safe for a module to start? When should it stop? Modules should execute automatically when started Enables adding and removing modules without breaking the app Should handle detecting and managing of errors Uses the mediator pattern
- 17. The Façade Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
- 18. The Façade • Convenient, high-level interfaces to larger code that hide underlying complexity • Limited public API of functionality • Differs greatly from the reality of the implementation • Example: var module = (function () { … return { façade: function (args) { // do something } }; }());
- 19. The Façade – Cont.
- 20. The Façade Demo
- 21. The Façade Will play a role of: Abstraction to the application core The façade sits in the middle between the core and the modules Ensure a consistent interface to the modules which is available at all times Should be the only thing that modules are aware of If modules have API, they expose it using a façade
- 22. Mediator/Event Aggregator Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
- 23. Mediator/Event Aggregator Promotes loose coupling of components Helps solve module coupling issues Allow modules to broadcast or listen to notifications from other modules Notifications can be handled by any number of modules at once
- 24. Mediator/Event Aggregator – Cont.
- 25. Mediator Implementation Example var mediator = (function () { var subscribe = function (channel, fn) { … }, publish = function (channel) { … }, return { publish: publish, subscribe: subscribe }; }());
- 26. Mediator Demo
- 27. Frameworks Framework that leverages the proposed solution: Most of the MV* frameworks include ways to apply the architecture (AngularJS, Ember and Backbone for example) Aura: http://aurajs.com/ The Scalable Application Framework: https://github.com/legalbox/lb_js_scalableApp And many more Can be a good start point to impose the patterns
- 28. Questions
- 29. Summary • • Building big and scalable JavaScript app is very challenging Combining proven patterns can help to create better software
- 30. Resources Slide Deck and Demos - http://sdrv.ms/17riPkB Nicholas Zakas: Scalable JavaScript Application Architecture http://www.youtube.com/watch?v=vXjVFPosQHw Addy Osmani: Scaling Your JavaScript Applications http://addyosmani.com/scalable-javascript-videos/ My Blog – http://www.gilfink.net Follow me on Twitter – @gilfink
- 31. Thank You