Successfully reported this slideshow.
Your SlideShare is downloading. ×

Modular & Event driven UI Architecture

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Wheel.js
Wheel.js
Loading in …3
×

Check these out next

1 of 28 Ad
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to Modular & Event driven UI Architecture (20)

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!

×