Single Page Application Development with backbone.js and Simple.Web

Single Page Application Development with

backbone.js and Simple.WebChris Canal

Who am I?• Senior Developer at StormID• Developed our in-house SDK• Does too much Umbraco• Trying to stop my boss from crazy• Being opinionated• Been doing this for too long, 11 years!• Crap at making PowerPoint presentations• Probably wrong 90% of the time, so

please correct me when I made a stupid comment

Agenda

• Introduction• Backbone• Backbone Marionette• Underscore• Handlebars• RequireJS

• Simple.Web

Single Page Applications

Single Page Application?

• A software application• On a single web page• Pretty much exactly what it says on the tin, if it came in a tin

Gmailmail.google.com

Twittertwitter.com

Facebookfacebook.com

Spinspin.com

A Quick Web App History

Web 1.0

Webserver

GET

Web 1.0

Webserver

GET

GET

AJAX, BOOYA

AJAX (Web 2.0?)

Webserver

GET

GET

AJAX (Web 2.0?)

Webserver

GET

GET

AJAX (Web 2.0?)

API

GET

GET

Application

MV*

MV*

• MVPresenter• MVController• MVPresentationModel• MVViewModel• MVHandler

Serverside MV*

Small TalkFirst implentation of MVC

Ruby on RailsMVC

Cake PHPMVC

WebFormsWut?

Castle MonorailMVC

ASP.NET MVCMVC

FubuMVCMVC

Simple.WebMVHandler

Simple.Web

Conventions & Structure

Clientside MV*

YUI

Ember JS

Knockout

AngularJS

Backbone.js

Backbone.js

What is it?

• Event driven MV* Framework

Annotated Source

Github

Who uses Backbone.js?

• Hulu• Foursquare• Stripe• Khan Academy• Wordpress.com• Many more…

Code Structure

• Events• Models• Collections• Views• Router

Eventsonofftrigger

on

off

trigger

Beware memory leaks!

Event Types

• add – model, collection• remove – model, collection• reset – collection• change – model, options• change:[attribute] – model, value, options• destroy – model, collection• sync – model, collection• route:[name] – router• all

Modelsextendconstructor/initializeurl/urlRootdefaultsget/setvalidatetoJSONState!saveand more…

extend

extendOverriding base methods

constructor/initialize

initialize

url/urlRoot

defaults

get/set

validate

toJSON

State!

save

More!

Collectionsmodelurlcreateaddgetwherefetchresetand more…

model

url

create

add

get

where

fetch

reset

More!

Viewsel/tagName/$elrenderremoveevents

el/tagName/$el

render

remove

events

routerroutesRoutenavigateHistory

routes

route

navigate

Demo?

Questions?

Backbone Marionette

What is it?Application Library for Backbone

What does it give you?

• Backbone.Marionette.Application• Backbone.Marionette.AppRouter• Backbone.Marionette.ItemView• Backbone.Marionette.CollectionView• Backbone.Marionette.EventAggregator• And more…

Backbone.Marionette.ApplicationStarting An ApplicationeventsaddInitializerregions

Starting

events

addInitializer

regions

Backbone.Marionette.AppRoutercontroller

controller

Backbone.Marionette.ItemViewon*eventsserializeData

On*

events

serializeData

Backbone.Marionette.CollectionViewitemViewemptyViewon*events

itemView

emptyView

on*

events

Backbone.Marionette.EventAggregator

Demo?

Questions?

Underscore

What is it?Batman utility belt

Handlebars

What is it?Mustache templating implemetation

Basic

Compiling

Using it with Backbone.Marionette

RequireJS

What is it?Clientside Dependency ManagementAMD/CommonJS implentation

What does it give you?

• Dependency Management

Config

Config

require()

define()

Text plugin

Using it with Backbone.Marionette

r.js

What is it?

• Combines related scripts together into build layers and minifies them via UglifyJS• Optimizes CSS by inlining CSS files referenced by @import and

removing comments.

Getting it…

• You have Node.js installed, yea?• npm install –g requires• node r.js path/tp/buildscript.js

Config

Config

Demo?

Questions?

Simple.Web

What is it?SOLID Driven RESTful web frameworkModel-View-Hander

What does it give you?

• Proper Separation on Concerns – One class per action• Easily Testable• SOLID Compliant

Interfaces

• IGet• IPost• IPost<T>• IDelete• IPut• IPut<T>• IOutput• And more…

IGet

IPost

IPost<T>

IDelete

IPut<T>

IOutput<T>

DemoWiring it all up!

Questions?

Resources

• http://backbonetraining.net/resources Loads of Backbone resources• https://github.com/markrendle/Simple.Web• http://blog.markrendle.net/2012/06/01/simple-web/

Thanks!