Building Scalable JavaScript Apps

3,930 views
3,716 views

Published on

GDG DevFest Israel 2013 sesion

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,930
On SlideShare
0
From Embeds
0
Number of Embeds
1,428
Actions
Shares
0
Downloads
55
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Building Scalable JavaScript Apps

  1. 1. Gil Fink Building Scalable JavaScript Apps
  2. 2. Agenda • The challenge we face • Suggested solution • The patterns
  3. 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. 4. Scalable JavaScript App Examples Gmail Twitter Facebook Yahoo! Homepage and more
  5. 5. Current Architecture Might contain a mixture of the following: Custom Widgets Modules Application Core MV* Framework JavaScript Libraries and Toolkits
  6. 6. Current Architecture – Cont.
  7. 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. 8. Suggested Solution: Mixing JS Patterns Module Pattern Façade Pattern Mediator/Event Aggregator
  9. 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. 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. 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 }; }();
  12. 12. Module Patterns Demo
  13. 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. 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. 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. 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. 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. 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. 19. The Façade – Cont.
  20. 20. The Façade Demo
  21. 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. 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. 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. 24. Mediator/Event Aggregator – Cont.
  25. 25. Mediator Implementation Example var mediator = (function () { var subscribe = function (channel, fn) { … }, publish = function (channel) { … }, return { publish: publish, subscribe: subscribe }; }());
  26. 26. Mediator Demo
  27. 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. 28. Questions
  29. 29. Summary • • Building big and scalable JavaScript app is very challenging Combining proven patterns can help to create better software
  30. 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. 31. Thank You

×