CLIENT-SIDE MVCA brief introduction by Thomas Gorissen

Freitag, 11. März 2011

ME? • <blink>Hello World</blink>

• “WebMaster”

• JS/PHP

• Starcraft

• C# .NET / Forms

• Ruby

• ASP MVC

• JS

1996

2010

1999

2005

http

://th

omas

goris

sen.

com

Freitag, 11. März 2011

• Model/View/Controller Javascript Framework

• Released 13th Oct 2010

• @DocumentCloudproject

• MIT licensed and on GitHub

• Structure provider

• RESTful JSON Connector

• Hash-Routing Engine

• Event-driven

• Lightweight (6.9kb)

is

Freitag, 11. März 2011

• DOM Accessor

• Animation toolkit

• Control suite

• All in wonder package

is not

Freitag, 11. März 2011

WHAT IS IT FOR?

All Client-SideRendered Applications

Freitag, 11. März 2011

AHA, HOW IS THAT?

• If you do a lot of JavaScript, things tend to get messy!

• Backbone provides a way to organize your code, by using the MVC pattern

• Only the View accesses the DOM (e.g. with jQuery, Zepto, ...)

Model

View

Controller

DOM

Freitag, 11. März 2011

ALTHOUGH...

• ... it’s a bit wrongly labeledModel

View

Controller

DOM

Routing-Engine

Controller

View

+ Collection

• I call it a “dirty” MVC

Freitag, 11. März 2011

THE MODELvar Tweet = Backbone.Model.extend({

! // Overrides! initialize: function(params) {! ! if(params.id && !params.text)! ! ! this.fetch();! },!! url: function() {! ! return "http://twitter.com/statuses/show/" + this.id +".json";! },!! defaults: {!! ! highlighted: false! },!! // Custom function! highlight: function() {! ! this.set({! ! ! highlighted: !this.get("highlighted")! ! });! }

});

Freitag, 11. März 2011

THE MODEL

• Easy to auto generate

• Holds data better then the DOM

• Throws change events

• Can connect to a URL to populate from or persist to the server

• – extend• – constructor / initialize• – get• – escape• – set• – unset• – clear• – id• – cid• – attributes• – defaults• - toJSON• – fetch• – save• – destroy• – validate• – url• – parse• – clone• – isNew• – change• – hasChanged• – changedAttributes• – previous• – previousAttributes

Functions/Params

Freitag, 11. März 2011

THE COLLECTION

var UserTweets = Backbone.Collection.extend({

! // Overrides! model: Tweet,!! url: function() {! ! return "http://twitter.com/statuses/user_timeline/" + this.user + ".json?count=10";! },!! // Custom function! highlighted: function() { ! return this.filter(function(tweet) { ! ! return tweet.get('highlighted'); ! }); }

});

Freitag, 11. März 2011

THE COLLECTION

• Easy to auto generate, as well

• For bulk handling model objects

• Throws change events

• Can connect to a URL to populate from the server

• Tons of query functions

• – extend• – model• – constructor / initialize• – models• – toJSON• – Underscore Methods (25)• – add• – remove• – get• – getByCid• – at• – length• – comparator• – sort• – pluck• – url• – parse• – fetch• – refresh• – create

Functions/Params◦ forEach (each)

◦ map

◦ reduce (foldl, inject)

◦ reduceRight (foldr)

◦ find (detect)

◦ filter (select)

◦ reject

◦ every (all)

◦ some (any)

◦ include

◦ invoke

◦ max

◦ min

◦ sortBy

◦ sortedIndex

◦ toArray

◦ size

◦ first

◦ rest

◦ last

◦ without

◦ indexOf

◦ lastIndexOf

◦ isEmpty

◦ chain

Freitag, 11. März 2011

THE VIEWvar TweetView = Backbone.View.extend({!! initialize: function() {! ! _.bindAll(this, "render");! ! this.model.bind("change", this.render);! },! !! events: {! ! "click": "highlight"! },!! render: function() {! ! this.el = this.make("li", {! ! ! className: this.model.get("highlighted") ? "highlighted" : "normal"! ! }, this.model.get("text"));! ! return this;! },!! highlight: function() {! ! this.model.highlight();! }!});

or the controller

Freitag, 11. März 2011

• Changes the DOM

• Delegates DOM events

• Subscribes Model/Collection change events

• – extend• – constructor / initialize• – el• – $ (jQuery or Zepto)• – render• – remove• – make• – delegateEvents

Functions/Params

THE VIEWor the controller

Freitag, 11. März 2011

THE CONTROLLER

var Workspace = Backbone.Controller.extend({

! routes: {! ! "help":! ! ! ! ! "help",! ! // #help! ! "search/:name":! ! ! "search",!! // #search/serrynaimo

! "search/:name/t:tweet":! "search"!! // #search/serrynaimo/t36732 ! },! ! help: function() {! ! ... ! },

! search: function(name, tweet) {! ! ... ! }

});

new Workspace();Backbone.history.start(); ! ! ! ! ! ! // Start url-change listener

or the routing-engine

Freitag, 11. März 2011

• Useful to initiate application states like

• Enables go back/forward browser functionality

• Makes application states bookmarkable

• - extend• – routes• – constructor / initialize• – route• – saveLocation

Functions/Params

THE CONTROLLERor the routing-engine

window.location.hash = "help";

Freitag, 11. März 2011

DEMO

Download files here

Freitag, 11. März 2011

WHAT ELSE?

• Make many small JavaScript files for big dev teams

• Comment your code (e.g. yDoc compatible)

• Works absolutely great with html5boilerplate.com

Freitag, 11. März 2011

@SERRYNAIMOfor JavaScript related fuzziness

Mail me: thomas@adzcentral.comWE’RE HIRING!

Freitag, 11. März 2011