Modular & Event driven UI Architecture

2,606 views

Published on

Modular & Event driven UI Architecture - Backbone.js example

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,606
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modular & Event driven UI Architecture

  1. 1. Modular & Event driven UI Architecture Vytautas Butkus
  2. 2. Content• Modules• Event driven architecture• Backbone.js - MV* framework• Questions
  3. 3. Modules• What is it?
  4. 4. • Single, solid unit• Have interfaces defined• Made of multiple other modules
  5. 5. Modules• What is it?• Why use it?
  6. 6. • Loose coupling• Easier maintanance• Changes affects only changed modules• Removed module does not break page
  7. 7. Modules• What is it?• Why use it?• Modules in real life
  8. 8. Gmail system
  9. 9. Possible modules
  10. 10. Modules structure
  11. 11. Event driven architecture• What is it?
  12. 12. Publish/Subscribe pattern
  13. 13. Event driven architecture• What is it?• Where is it used?
  14. 14. • Node.js• jQuery.events• Backbone.js• OS interrups$(“.button”).on(“click”, function(){$(“body”).on(“click”, function(){ $(“body”).trigger(“alarm”); alert(“Clicked”);});$(“body”).on(“alarm”, function(){ alert(“Alarm alarm!!!”);});
  15. 15. Backbone.js library• Structural framework• Very popular• Huge community• Still under v1.0• RESTful JSON interface• Based on MVC paradigm MV*
  16. 16. Backbone tools• Models => { } with events & sync• Views => DOM controller• Collections (not controller) => Array of models• Router => URL controller• Events => Extend native { }
  17. 17. Underscore.js• Utility-belt library• Eases work with collections, arrays & objects• Provides function helpers• The only one Backbone.js dependency
  18. 18. Other MV* frameworks• AngularJS (by Google)• Ember.js• YUI (by Yahoo!)• KnockoutJS...many more• Check them out at
  19. 19. Gmail example with Backbone.js• Collection -> Message List• Model -> Message• Views -> Message, Message List• Router -> URL
  20. 20. Model
  21. 21. Collection
  22. 22. Message View
  23. 23. Message list view
  24. 24. Router
  25. 25. Init
  26. 26. Source code• https://github.com/bytasv/gmail-example
  27. 27. Thank you!

×