Upload
visual-engineering
View
280
Download
0
Embed Size (px)
Citation preview
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.
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
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
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
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