JavaScriptMVC

Develop With Direction

Info

• For large single page JS applications
• Open Source (MIT) JS library
• Developed by J. Meyer and B. Moschel

Features

• Model-View-Controller architecture
• Wide variety of development tools

Overview

1. Why you should care. 2 min
2. Problems. 4 min
3. Solutions. 10 min
4. Demo. 10 min
5. Future. 2 min
6. Conclusion. 1 min

Why you should care.

Prototype, jQuery, Dojo, YUI, Ext, MochiKit, Open Rico, Moo Tools, etc

Why you should care.

JavaScript is #1

• most ubiquitous runtime environment
• most important apps
• there's no alternative

Why you should care.

The future is JavaScript

• compelling UIs
• many free libraries
• IE6 < 20%
• in Stargate future

Problems.

Developers need to confront the same problems of any large software project.
Common problems:

• Quality
• Development Time
• Maintainability

JavaScriptMVC attacks these problems with best practices.

Solutions.

Solutions > Quality

Test

Provides:

• Easy setup
• Convenient syntax.
• Best in class event simulation.
• Ready-to-run unit tests in Rhino.

Solutions > Quality

Update

Automatically update to the latest code.

js jmvc\update

Solutions > Quality

DamnIT

javascript error reporting

Features

• Emails error reports
• Free+OS
• More info prompt
• Email logs
• Easy setup

Solutions > Dev. Time

Fixtures

substitute ajax responses

Use for:

• Developing w/o server.
• Testing w/o server.

//generate a fixture
js jmvc/generate/fixture get todos.json

//contents of /test/fixtures/todos.json.get
[{attributes: {id: 1, name: "take out trash"}}]

Solutions > Dev. Time

Code Generators

Quickly create code in the right place.

//creates a new app
js jmvc\generate\app APPNAME
//creates an html page
js jmvc\generate\page PAGE_LOCATION
//creates a controller
js jmvc\generate\controller CONTROLLER
//creates a model
js jmvc\generate\model MODEL_TYPE MODEL

Solutions > Dev. Time

Scaffolding

Get basic CRUD functionlity off the ground, expand from there.

Solutions > Dev. Time

Plugins and Engines

Install 3rd party code and dependencies from command line.

Solutions > Maintainability

Maintainable code is ...

• Logically separated
• Reusable
• Small
• Documented
• Discoverable

Solutions > Maintainability

Include

loads and compresses JS files

• Separate files with minimal cost
• Rhino and Env.js based

Use

include('file1','../folder/file3',
        function(){ ... })

Compress

js apps\APP_NAME\compress.js

Solutions > Maintainability

File structure

standard file structure

Solutions > Maintainability

Class

simulated class object

• Class and prototype inheritance
• Class initialization callbacks
• Introspection
• Class and super class access

Monster = Class.extend("monster",{},{})
SeaMonster = Monster.extend("sea_monster")

Solutions > Maintainability

Logically Separated Code

What's in JS app?

• Responding to events
• Manipulating the DOM
• Communicating with Services (Ajax)
• Wrapping and extending service data.

Solutions > Maintainability

Model

Wraps data layer

Wraps app's data layer in 2 ways:

• gets data from services
• adds domain-specific representation

Features:

• Data store
• JSON+XML Rest
• Convience helpers

Solutions > Maintainability

Model

Example

Todo = JsonRestModel('todo',{ 
  days_remaining: function(){ 
    return (this.date - new Date()) / 
		   (1000*60*60*24);
  }
})

Todo.find('all', function(todos){
  for(var i = 0; i < todos.length; i++)
    alert(todos.days_remaining());
})

Solutions > Maintainability

View

JS templating library

Features:

• ERB style syntax
• Very fast
• View helpers
• Internationalization helpers

Example:

<h1><%= title %></h1>

Solutions > Maintainability

Controller

Responds to events

Features:

• Event delegation
• Very slick syntax.
• Custom events
• Convience helpers

Solutions > Maintainability

Controller

HTML

<div class='todo todo_5'>
  <input class='complete' type='checkbox'/>
  <div class='handle'></div>
</div>

TodosController = Controller.extend('todos',{
  ".complete change" : function(params){ 
    var todo = params.class_instance()
    todo.complete();
  },
  "todo.complete subscribe" : function(t){...},
  ".handle dragstart" : function(){...}
})