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.

1. Front End Workshops
IX. MVC & Backbone.js
Andrés Lamilla
alamilla@visual-engin.com

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.

8. Server-side MVC

9. Client-Side MVC

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

16. Models (initialize)

17. Models (Default values)

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: test@test.com
pass: 123
Code: https://github.com/alamillac/mostWanted