• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Single Page Application Development with backbone.js and Simple.Web

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






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.
  • Loading text documents as dependencies

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

  • Single Page Application Development withbackbone.js and Simple.Web Chris 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 GET Webserver
  • Web 1.0 GET GET Webserver
  • AJAX (Web 2.0?) GET GET Webserver
  • AJAX (Web 2.0?) GET GET Webserver
  • AJAX (Web 2.0?) GET GET API Application
  • MV*
  • MV*• MVPresenter• MVController• MVPresentationModel• MVViewModel• MVHandler
  • Serverside MV*
  • Small TalkFirst implentation of MVC
  • Ruby on RailsMVC
  • Cake PHPMVC
  • WebFormsWut?
  • Castle MonorailMVC
  • 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!