Modular & Event driven UI Architecture
Download as pptx, pdf1 like2,751 views
The document discusses modular and event-driven UI architectures. It describes modules as single, solid units with defined interfaces that can be composed of other modules. An event-driven architecture uses a publish/subscribe pattern where events can be triggered and other parts of the code can listen and respond to those events. Backbone.js is presented as a popular MV* framework for building modular single page apps in an event-driven and RESTful way using models, views, collections, and a router.
Modular & Event driven UI Architecture
- 1. Modular & Event driven UI Architecture Vytautas Butkus
- 2. Content • Modules • Event driven architecture • Backbone.js - MV* framework • Questions
- 3. Modules • What is it?
- 4. • Single, solid unit • Have interfaces defined • Made of multiple other modules
- 5. Modules • What is it? • Why use it?
- 6. • Loose coupling • Easier maintanance • Changes affects only changed modules • Removed module does not break page
- 7. Modules • What is it? • Why use it? • Modules in real life
- 8. Gmail system
- 11. Event driven architecture • What is it?
- 13. Event driven architecture • What is it? • Where is it used?
- 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!!!”); });
- 16. Backbone.js library • Structural framework • Very popular • Huge community • Still under v1.0 • RESTful JSON interface • Based on MVC paradigm MV*
- 17. Backbone tools • Models => { } with events & sync • Views => DOM controller • Collections (not controller) => Array of models • Router => URL controller • Events => Extend native { }
- 18. Underscore.js • Utility-belt library • Eases work with collections, arrays & objects • Provides function helpers • The only one Backbone.js dependency
- 19. Other MV* frameworks • AngularJS (by Google) • Ember.js • YUI (by Yahoo!) • KnockoutJS ...many more • Check them out at
- 20. Gmail example with Backbone.js • Collection -> Message List • Model -> Message • Views -> Message, Message List • Router -> URL
- 21. Model
- 22. Collection
- 23. Message View
- 25. Router
- 26. Init
- 28. Thank you!