Workshop 9: BackboneJS y patrones MVC
0 likes613 views
This document provides an overview of MVC and Backbone.js frameworks. It discusses how MVC separates an application into models, views, and controllers. Backbone.js is introduced as a lightweight library for building single-page apps that uses an MVC-like structure. Marionette.js is described as a framework built on Backbone that simplifies large app development with modular architecture and reduced boilerplate code. Examples of using these frameworks are also referenced.
Workshop 9: BackboneJS y patrones MVC
- 1. Front End Workshops IX. MVC & Backbone.js Andrés Lamilla [email protected]
- 2. Overview ● MVC ● BackboneJS ● MarionetteJS ● Marionette Inspector ● Examples
- 3. MVC ● Architectural design pattern ● Encourages improved application organization through a separation of concerns ● Isolation of business data (models) from user interfaces (views) and logic (controllers)
- 4. MVC MVC separates the concerns in an application into three parts: ● Models represent the domain-specific knowledge and data in an application. Models can notify observers when their state changes. ● Views typically constitute the user interface in an application (templates). They observe models, but don’t directly communicate with them. ● Controllers handle input (clicks or user actions) and update models.
- 5. Smalltalk-80 MVC Trygve Reenskaug designed this pattern while he was working on Smalltalk-80 (1979). His idea was to separate the application logic from the user interface.
- 6. Smalltalk-80 MVC ● model ignorant of the user interface (views and controllers) ● Presentation was taken care of by the view and the controller ● The controller’s role in this pair was handling user input ● The Observer pattern was used to update the view whenever the model changed
- 7. MVC-like in Ruby on Rails (RoR) Although there’s a clear separation of concerns that is MVC-like in Rails, it is actually using a different pattern called Model2.
- 10. BackboneJS
- 11. BackboneJS ● It is a lightweight library designed for developing single-page web applications. ● Was created by Jeremy Ashkenas, who is also known for CoffeeScript and Underscore.js
- 12. Used by
- 13. Used by
- 14. Used by
- 15. Models
- 18. Models (Get)
- 19. Models (Set)
- 20. Models (Listening for Changes)
- 21. Views
- 22. Collections
- 23. Models (RESTful)
- 24. Routers
- 25. BackboneJS
- 26. BackboneJS ● Backbone is not a complete framework. It gives us the core constructs that we need to build small to midsize apps. ● There are several frameworks build on top of Backbone that are suitable for large applications. Chaplin, Marionette and Thorax are the most used.
- 27. MarionetteJS ● It is a composite application library that aims to simplify the construction of large-scale applications ● Allows you to scale applications out with modular, event-driven architecture ● Reduces boilerplate for views, with specialized view types ● Allows you to compose your application’s visuals at runtime, with region and layout ... ● Includes built-in memory management and zombie killing in views, regions, and layouts ● Provides built-in event cleanup with the EventBinder
- 28. Reducing Boilerplate with Marionette
- 29. Memory Management with Marionette
- 30. Memory Management with Marionette
- 31. Memory Management with Marionette Marionette’s views provide a close event, in which the event bindings that are set up with the listenTo are automatically removed
- 32. Memory Management with Marionette
- 33. Marionette Inspector Debug Marionette Apps: http://marionettejs.com/inspector/ Test app: http://www.marionettewires.com/#colors
- 34. Examples http://develop.mostsearchedcelebrity.com user: [email protected] pass: 123 Code: https://github.com/alamillac/mostWanted