Single Page Application Development with backbone.js and Simple.Web
-
Upload
chris-canal -
Category
Documents
-
view
4.946 -
download
2
Transcript of Single Page Application Development with backbone.js and Simple.Web
![Page 1: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/1.jpg)
Single Page Application Development with
backbone.js and Simple.WebChris Canal
![Page 2: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/2.jpg)
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
![Page 3: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/3.jpg)
Agenda
• Introduction• Backbone• Backbone Marionette• Underscore• Handlebars• RequireJS
• Simple.Web
![Page 4: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/4.jpg)
Single Page Applications
![Page 5: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/5.jpg)
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
![Page 6: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/6.jpg)
Gmailmail.google.com
![Page 7: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/7.jpg)
Twittertwitter.com
![Page 8: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/8.jpg)
Facebookfacebook.com
![Page 9: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/9.jpg)
Spinspin.com
![Page 10: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/10.jpg)
A Quick Web App History
![Page 11: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/11.jpg)
Web 1.0
Webserver
GET
![Page 12: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/12.jpg)
Web 1.0
Webserver
GET
GET
![Page 13: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/13.jpg)
AJAX, BOOYA
![Page 14: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/14.jpg)
![Page 15: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/15.jpg)
AJAX (Web 2.0?)
Webserver
GET
GET
![Page 16: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/16.jpg)
AJAX (Web 2.0?)
Webserver
GET
GET
![Page 17: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/17.jpg)
AJAX (Web 2.0?)
API
GET
GET
Application
![Page 18: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/18.jpg)
![Page 19: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/19.jpg)
![Page 20: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/20.jpg)
MV*
![Page 21: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/21.jpg)
MV*
• MVPresenter• MVController• MVPresentationModel• MVViewModel• MVHandler
![Page 22: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/22.jpg)
Serverside MV*
![Page 23: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/23.jpg)
Small TalkFirst implentation of MVC
![Page 24: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/24.jpg)
Ruby on RailsMVC
![Page 25: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/25.jpg)
Cake PHPMVC
![Page 26: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/26.jpg)
WebFormsWut?
![Page 27: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/27.jpg)
Castle MonorailMVC
![Page 28: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/28.jpg)
ASP.NET MVCMVC
![Page 29: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/29.jpg)
FubuMVCMVC
![Page 30: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/30.jpg)
Simple.WebMVHandler
![Page 31: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/31.jpg)
Simple.Web
![Page 32: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/32.jpg)
Conventions & Structure
![Page 33: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/33.jpg)
Clientside MV*
![Page 34: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/34.jpg)
YUI
![Page 35: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/35.jpg)
Ember JS
![Page 36: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/36.jpg)
Knockout
![Page 37: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/37.jpg)
AngularJS
![Page 38: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/38.jpg)
Backbone.js
![Page 39: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/39.jpg)
Backbone.js
![Page 40: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/40.jpg)
What is it?
• Event driven MV* Framework
![Page 41: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/41.jpg)
Annotated Source
![Page 42: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/42.jpg)
Github
![Page 43: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/43.jpg)
Who uses Backbone.js?
• Hulu• Foursquare• Stripe• Khan Academy• Wordpress.com• Many more…
![Page 44: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/44.jpg)
Code Structure
• Events• Models• Collections• Views• Router
![Page 45: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/45.jpg)
Eventsonofftrigger
![Page 46: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/46.jpg)
on
![Page 47: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/47.jpg)
off
![Page 48: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/48.jpg)
trigger
![Page 49: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/49.jpg)
Beware memory leaks!
![Page 50: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/50.jpg)
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
![Page 51: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/51.jpg)
Modelsextendconstructor/initializeurl/urlRootdefaultsget/setvalidatetoJSONState!saveand more…
![Page 52: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/52.jpg)
extend
![Page 53: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/53.jpg)
extendOverriding base methods
![Page 54: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/54.jpg)
constructor/initialize
![Page 55: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/55.jpg)
initialize
![Page 56: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/56.jpg)
url/urlRoot
![Page 57: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/57.jpg)
defaults
![Page 58: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/58.jpg)
get/set
![Page 59: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/59.jpg)
validate
![Page 60: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/60.jpg)
toJSON
![Page 61: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/61.jpg)
State!
![Page 62: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/62.jpg)
save
![Page 63: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/63.jpg)
More!
![Page 64: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/64.jpg)
Collectionsmodelurlcreateaddgetwherefetchresetand more…
![Page 65: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/65.jpg)
model
![Page 66: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/66.jpg)
url
![Page 67: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/67.jpg)
create
![Page 68: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/68.jpg)
add
![Page 69: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/69.jpg)
get
![Page 70: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/70.jpg)
where
![Page 71: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/71.jpg)
fetch
![Page 72: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/72.jpg)
reset
![Page 73: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/73.jpg)
More!
![Page 74: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/74.jpg)
Viewsel/tagName/$elrenderremoveevents
![Page 75: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/75.jpg)
el/tagName/$el
![Page 76: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/76.jpg)
render
![Page 77: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/77.jpg)
remove
![Page 78: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/78.jpg)
events
![Page 79: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/79.jpg)
routerroutesRoutenavigateHistory
![Page 80: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/80.jpg)
routes
![Page 81: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/81.jpg)
route
![Page 82: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/82.jpg)
navigate
![Page 83: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/83.jpg)
Demo?
![Page 84: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/84.jpg)
Questions?
![Page 85: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/85.jpg)
Backbone Marionette
![Page 86: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/86.jpg)
What is it?Application Library for Backbone
![Page 87: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/87.jpg)
What does it give you?
• Backbone.Marionette.Application• Backbone.Marionette.AppRouter• Backbone.Marionette.ItemView• Backbone.Marionette.CollectionView• Backbone.Marionette.EventAggregator• And more…
![Page 88: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/88.jpg)
Backbone.Marionette.ApplicationStarting An ApplicationeventsaddInitializerregions
![Page 89: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/89.jpg)
Starting
![Page 90: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/90.jpg)
events
![Page 91: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/91.jpg)
addInitializer
![Page 92: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/92.jpg)
regions
![Page 93: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/93.jpg)
Backbone.Marionette.AppRoutercontroller
![Page 94: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/94.jpg)
controller
![Page 95: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/95.jpg)
Backbone.Marionette.ItemViewon*eventsserializeData
![Page 96: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/96.jpg)
On*
![Page 97: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/97.jpg)
events
![Page 98: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/98.jpg)
serializeData
![Page 99: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/99.jpg)
Backbone.Marionette.CollectionViewitemViewemptyViewon*events
![Page 100: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/100.jpg)
itemView
![Page 101: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/101.jpg)
emptyView
![Page 102: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/102.jpg)
on*
![Page 103: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/103.jpg)
events
![Page 104: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/104.jpg)
Backbone.Marionette.EventAggregator
![Page 105: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/105.jpg)
Demo?
![Page 106: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/106.jpg)
Questions?
![Page 107: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/107.jpg)
Underscore
![Page 108: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/108.jpg)
What is it?Batman utility belt
![Page 109: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/109.jpg)
Handlebars
![Page 110: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/110.jpg)
What is it?Mustache templating implemetation
![Page 111: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/111.jpg)
Basic
![Page 112: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/112.jpg)
Compiling
![Page 113: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/113.jpg)
Using it with Backbone.Marionette
![Page 114: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/114.jpg)
RequireJS
![Page 115: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/115.jpg)
What is it?Clientside Dependency ManagementAMD/CommonJS implentation
![Page 116: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/116.jpg)
What does it give you?
• Dependency Management
![Page 117: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/117.jpg)
Config
![Page 118: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/118.jpg)
Config
![Page 119: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/119.jpg)
require()
![Page 120: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/120.jpg)
define()
![Page 121: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/121.jpg)
Text plugin
![Page 122: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/122.jpg)
Using it with Backbone.Marionette
![Page 123: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/123.jpg)
r.js
![Page 124: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/124.jpg)
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.
![Page 125: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/125.jpg)
Getting it…
• You have Node.js installed, yea?• npm install –g requires• node r.js path/tp/buildscript.js
![Page 126: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/126.jpg)
Config
![Page 127: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/127.jpg)
Config
![Page 128: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/128.jpg)
Demo?
![Page 129: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/129.jpg)
Questions?
![Page 130: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/130.jpg)
Simple.Web
![Page 131: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/131.jpg)
What is it?SOLID Driven RESTful web frameworkModel-View-Hander
![Page 132: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/132.jpg)
What does it give you?
• Proper Separation on Concerns – One class per action• Easily Testable• SOLID Compliant
![Page 133: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/133.jpg)
Interfaces
• IGet• IPost• IPost<T>• IDelete• IPut• IPut<T>• IOutput• And more…
![Page 134: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/134.jpg)
IGet
![Page 135: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/135.jpg)
IPost
![Page 136: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/136.jpg)
IPost<T>
![Page 137: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/137.jpg)
IDelete
![Page 138: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/138.jpg)
IPut<T>
![Page 139: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/139.jpg)
IOutput<T>
![Page 140: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/140.jpg)
DemoWiring it all up!
![Page 141: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/141.jpg)
Questions?
![Page 142: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/142.jpg)
Resources
• http://backbonetraining.net/resources Loads of Backbone resources• https://github.com/markrendle/Simple.Web• http://blog.markrendle.net/2012/06/01/simple-web/
![Page 143: Single Page Application Development with backbone.js and Simple.Web](https://reader036.fdocuments.us/reader036/viewer/2022062702/554bcd23b4c9058f6c8b4844/html5/thumbnails/143.jpg)
Thanks!