Journey Through The Javascript MVC Jungle

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

http://todomvc.com/

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


• 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


• Routers map URLs to functions

13

Backbone.js

var TodoList = Backbone.Collection.extend({ ... done: function() { return this.filter(function(todo){ return todo.get('done'); }); } ...});


• 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


• 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


• 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


• Pros• Extremely rich templating system with composed views and UI

bindings

• Cons• Relatively new• Documentation leaves lots to be desired

17

Ember.js


• 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


• 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>


• 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


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

21

Knockout.js


• 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’);};


• Pros• Binding support• Great documentation and amazing tutorial system

• Cons• Awkward binding syntax and lacks a solid view component

hierarchy

23

Knockout.js


• Batman is written in CoffeeScript.• It can be used with JavaScript or CoffeeScript• Your code will look much cleaner in CoffeeScript

24

Batman.js


• 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>


• 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

Journey Through The Javascript MVC Jungle

Technology

mvc mvc

controller code

ravioli code spaghetti

javascript code

mvc frameworks angular

controller variations

java code

function spaghetti code