Upload
chris-canal
View
4.954
Download
2
Embed Size (px)
Citation preview
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!