Workshop 9: BackboneJS y patrones MVC
35
-
Upload
visual-engineering -
Category
Software
-
view
280 -
download
0
Transcript of Workshop 9: BackboneJS y patrones MVC
Overview
● MVC● BackboneJS● MarionetteJS● Marionette Inspector● Examples
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)
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.
Smalltalk-80 MVCTrygve Reenskaug designed this pattern while he was working on Smalltalk-80 (1979).
His idea was to separate the application logic from the user interface.
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
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.
Server-side MVC
Client-Side MVC
BackboneJS
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
Used by
Used by
Used by
Models
Models (initialize)
Models (Default values)
Models (Get)
Models (Set)
Models (Listening for Changes)
Views
Collections
Models (RESTful)
Routers
BackboneJS
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.
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
Reducing Boilerplate with Marionette
Memory Management with Marionette
Memory Management with Marionette
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
Memory Management with Marionette
Marionette Inspector
Debug Marionette Apps:http://marionettejs.com/inspector/
Test app:http://www.marionettewires.com/#colors
Examples
http://develop.mostsearchedcelebrity.com
user: [email protected]: 123
Code: https://github.com/alamillac/mostWanted
