journey through the javascript mvc jungle
DESCRIPTION
- 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 - RequireJSTRANSCRIPT
Journey Through Journey Through The JavaScript The JavaScript MVC JungleMVC Jungle
Barış Aydınoğlu
http://baris.aydinoglu.info
Agenda
• 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 2
From Spaghetti Code to Ravioli Code
We know a lot about how to make our Java code much better
We split out our Java code to classes, put the classes to modules, put the modules to layers, etc
But we never do the same for our JavaScript code
And that's why we have a lot of Spaghetti Code inside our apps
The main problems with function spaghetti code are:• 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
3
Spaghetti Code and Ravioli Code Examples
Spaghetti Example:
Ravioli Example:
4
$('#messagebox').text('Welcome to Code Camp, John');
alerter.showMessage();
What Is MVC?
Modern JavaScript frameworks provide MVC
MVC = Model-View-Controller
Variations of MVC:• MVP (Model-View-Presenter)• MVVM (Model-View ViewModel)
5
What Is MVC?
• Models• represent the domain-specific knowledge and data in an application• Think of this as being a ‘type’ of data you can model — like a User, Photo or Note• Models should notify anyone observing them about their current state (e.g Views)
• Views• are typically considered the User-interface in an application (e.g your markup and
templates), but don’t have to be• They should know about the existence of Models in order to observe them, but don’t
directly communicate with them
• Controllers• handle the input (e.g clicks, user actions) in an application and Views can be
considered as handling the output• When a Controller updates the state of a model (such as editing the caption on a
Photo), it doesn’t directly tell the View• This is what the observing nature of the View and Model relationship is for.
6
What does MV* give us?
• Easier overall maintenance.
• Decoupling models and views (easy unit tests)
• Eliminates duplication of low-level model and controller code
• Allows core developers and UI developers work simultaneously
7
MVC vs. MVP vs. MVVM
• MVC• View Controller Model• View entire Model (security and performance costs)
• MVP• Controller Presenter• Presenters & Views at the same level• View Presenter Model (events)
• MVVM• View subset Model• ViewModel (Presenter) is not required
8
TodoMVC: A Common Application For Learning And Comparison
• So much MV* frameworks
• TodoMVC offers the same Todo application implemented in most of the popular JavaScript MV* frameworks
• http://todomvc.com/
9
Suggested Criteria For Selecting A MV* Framework
• What is the framework really capable of?• Has the framework been proved in production?• Is the framework mature?• Is the framework flexible or opinionated?• Have you really played with the framework?• Does the framework have a comprehensive set of
documentation?• What is the total size of the framework, factoring in
minification, gzipping and any modular building that it supports?
• Have you reviewed the community around the framework? 10
Top 5 MVC frameworks
• Backbone.js• Ember.js• Angular.js• Knockout.js• Batman.js
11
Top 5 MVC frameworks
• Extensive documentation• The job of the controller tends to more be done partially by
Views and Routers• Views contain UI logic along with representing data
12
Backbone.js
Top 5 MVC frameworks
• Routers map URLs to functions
13
Backbone.js
var TodoList = Backbone.Collection.extend({ ... done: function() { return this.filter(function(todo){ return todo.get('done'); }); } ...});
Top 5 MVC frameworks
• Pros• Strong community and lots of momentum• Underscore.js (which it uses heavily) is also a great framework
• 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
14
Backbone.js
Top 5 MVC frameworks
• 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
15
Ember.js
Top 5 MVC frameworks
• Another main feature is the ability to define functions on an object that you can then treat as properties
16
Ember.js
<p>Hello, <b>{{fullName}}</b>!</p>
fullName: function() { var firstName = this.get('firstName'); var lastName = this.get('lastName'); return firstName + ' ' + lastName;}.property('firstName', 'lastName')
• Views usually written in Handlebars.js
Top 5 MVC frameworks
• Pros• Extremely rich templating system with composed views and UI
bindings
• Cons• Relatively new• Documentation leaves lots to be desired
17
Ember.js
Top 5 MVC frameworks
• 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
18
Angular.js
Top 5 MVC frameworks
• Sample View:
19
Angular.js
<form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"></form>
Top 5 MVC frameworks
• 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• Cons
• Codebase appears to be fairly sprawling and not very modular
20
Angular.js
Top 5 MVC frameworks
• It is a MVVM (Model-View-View Model) framework written in pure JavaScript• Bindings inserted as attributes similar to Angular.js
21
Knockout.js
Top 5 MVC frameworks
• Sample View:
22
Knockout.js
<p>First name: <strong data-bind="text: firstName"></strong></p>
• View-models:• pure JavaScript
• a code representation of your data along with exposing methods for manipulating the data
• as close to controllers as an MVVM framework comes
function AppViewModel() { this.firstName = ko.observable(‘Baris’);};
Top 5 MVC frameworks
• Pros• Binding support• Great documentation and amazing tutorial system
• Cons• Awkward binding syntax and lacks a solid view component
hierarchy
23
Knockout.js
Top 5 MVC frameworks
• Batman is written in CoffeeScript.• It can be used with JavaScript or CoffeeScript• Your code will look much cleaner in CoffeeScript
24
Batman.js
Top 5 MVC frameworks
• Wrapper class includes Controller and Models
25
Batman.js
class Todo extends Batman.App @global yes @root 'todos#index'
• Batman uses data-bindings in the Views
<li data-foreach-product="Product.all"> <a data-route="product" data-bind="product.name">name will go here</a></li>
Top 5 MVC frameworks
• Pros• Very clean codebase• Has a nice simple approach to binding, persistence, and routing
• Cons• Singleton controllers are not efficient
26
Batman.js
RequireJS
• RequireJS handles the dependency resolution for javascript modules
• RequireJS helps:• Defines modules• Resolve module dependencies• Load scripts in the proper order (and asynchronously)
27
Thanks…
28