- From Spaghetti Code to Ravioli Code - Spaghetti Code and Ravioli Code Examples - What Is MVC? - What does MV* give us? - MVC vs. MVP vs. MVVM - TodoMVC: A Common Application For Learning And Comparison - Suggested Criteria For Selecting A MV* Framework - Top 5 MVC frameworks - Backbone.js - Ember.js - Angular.js - Knockout.js - Batman.js - RequireJS

1. Journey Through The JavaScript
MVC Jungle
Baris Aydinoglu
July 30, 2015

2. Agenda:
Spaghetti to Ravioli
What is MVC?
MVC vs MVP vs MVVM
Top 5 MVC Frameworks
Suggested Criteria for Selection

3. Spaghetti
to
Ravioli

5. The Main Problems:
Where the one block of code begins and
where the other ends?

6. The Main Problems:
Where the one block of code begins and
where the other ends?
Violates SRP (Single Responsibility Principle)

7. The Main Problems:
Where the one block of code begins and
where the other ends?
Violates SRP (Single Responsibility Principle)
Global scope pollution

8. The Main Problems:
Where the one block of code begins and
where the other ends?
Violates SRP (Single Responsibility Principle)
Global scope pollution
Violates DRY (Don’t Repeat Yourselt)

9. The Main Problems:
Where the one block of code begins and
where the other ends?
Violates SRP (Single Responsibility Principle)
Global scope pollution
Violates DRY (Don’t Repeat Yourselt)
Not easy to maintain, test and debug

10. Spaghetti Example

12. Ravioli Example

13. What is MVC?

14. Model

15. Model
View
updates

16. Model
View
updates
User
sees

17. Model
View
updates
User
sees
Controller
uses
manipulates

18. ”Easier overall maintenance.

19. ”Decoupling models and views &
easy unit tests.

20. ”Eliminates duplication of
low-level model and controller
code.

21. ”Allows core developers and UI
developers work simultaneously.

23. MVC:
View
Controller
Model

24. ”View can access entire Model.
(security and performance costs)

25. ”Controller can be shared across
views.

26. ”Controller can be responsible for
determining which view to
display.

27. MVP:
View
Presenter
Model

28. ”View is more loosely coupled to
the Model.

29. ”View to Presenter map one to
one. (usually)

30. ”Complex Views may have multi
Presenters.

31. MVVM:
View
Data Binding
ViewModel
Model

32. ”ViewModel is not required.

33. Top 5
MVC
Frameworks

35. Backbone.js:
Provides models with key-value binding and
custom events, collections, and connects it all
to your existing API over a RESTful JSON
interface.

36. The job of the controller tends to more be done
partially by Views and Routers
Views contain UI logic along with representing
data

37. Pros:
Extensive documentation
Strong community and lots of momentum
Routers map URLs to functions
Underscore.js (which it uses heavily) is also
a great framework

38. Cons:
Lacks strong abstractions and leaves
something to be desired
The entire framework is surprisingly
lightweight and results in lots of boilerplate
The larger an application becomes, the
more this becomes apparent

40. Ember.js:
Provides template written in the Handlebars
templating language, views, controllers, models
and a router.

41. Ember’s main features are its data binding
Objects can bind properties to each other, so the
objects are kept in sync
Automatically updates its views when data changes
Views usually written in Handlebars.js

42. Pros:
Extremely rich templating system with
composed views and UI bindings

43. Cons:
Relatively new
Documentation leaves lots to be desired

45. AngularJS:
A toolset based on extending the HTML
vocabulary for your application.

46. Google’s offering
Data binding directly in HTML
Its data binding is bi-directional
Angular leaves you with much leaner controllers
and less JavaScript to write

47. Pros:
Very well thought out with respect to
template scoping and controller design
Has a dependency injection system
Supports a rich UI-Binding syntax to make
things like filtering and transforming values
a breeze

48. Cons:
Codebase appears to be fairly sprawling
and not very modular

50. Knockout:
Aims to simplify JavaScript UIs by applying the
Model-View-View Model (MVVM) pattern.

51. It is a MVVM (Model-View-View Model) framework
written in pure JavaScript
Bindings inserted as attributes similar to Angular.js

52. Pros:
Binding support
Great documentation and amazing tutorial
system
Performance

53. Cons:
Awkward binding syntax and lacks a solid
view component hierarchy

55. Batman.js:
A framework for building rich web applications
with CoffeeScript.

56. Written in CoffeeScript
It can be used with JavaScript or CoffeeScript
Your code will look much cleaner in CoffeeScript
Wrapper class includes Controller and Models
Batman uses data-bindings in the Views

57. Pros:
Very clean codebase
Has a nice simple approach to binding,
persistence, and routing

58. Cons:
Singleton controllers are not efficient

59. Suggested Criteria
for Selection

60. ”What is the framework really
capable of?

61. ”Has the framework been proved
in production?

62. ”Is the framework mature?

63. ”Is the framework flexible or
opinionated?

64. ”Have you really played with the
framework?

65. ”Does the framework have a
comprehensive set of
documentation?

66. ”What is the total size of the
framework, factoring in
minification, gzipping and any
modular building that it
supports?

67. ”Have you reviewed the
community around the
framework?

68. Figure: TodoMVC, Helping you select an MV* framework

69. Go Deeper:
www. infoq. com/ research/ top-javascript-mvc-frameworks
todomvc. com
backbonejs. org
emberjs. com
angularjs. org
knockoutjs. com
batmanjs. org

70. ?

71. That’s all Folks!
@barisaydinoglu
github.com/barisaydinoglu
baris@aydinoglu.info