single page applications with backbone
DESCRIPTION
Building sites using the Single Page Application approach has become the default options for many developers. In this talk we'll talk about why this trend has caught on, how you can create complete client side applications using Backbone.js hooking into any server side language, and what additional considerations exist when taking this approach.TRANSCRIPT
![Page 1: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/1.jpg)
Single page applications with backbone.js
Cork ALT.NET March 2014
![Page 2: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/2.jpg)
LEAD Architect
@SUGRUE www.jamessugrue.ie
AUthor of Beginning Backbone.js
Published Dec 2013
SIDE PROJECT
www.donatecode.com
![Page 3: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/3.jpg)
THE HISTORY !
CHARACTERISTICS OF A SINGLE PAGE APPLICATION !
ADVANTAGES AND PITFALLS !
BACKBONE.JS AND OTHER JS LIBRARIES !
SINGLE PAGE APPLICATIONS and .NET
SINGLE PAGE APPLICATIONS
![Page 4: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/4.jpg)
HISTORY
![Page 5: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/5.jpg)
2005
![Page 6: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/6.jpg)
2006
![Page 7: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/7.jpg)
THE WILDERNESS YEARS
2006 -2010
![Page 9: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/9.jpg)
CHARACTERISTICS
![Page 10: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/10.jpg)
Makes websites more APP-lIKE LESS WAITING ALL RESOURCES LOADED AT THE START !
PAGE NEVER RELOADS !
BOOKMARKABLE SECTIONS !
CHARACTERISTICS
![Page 11: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/11.jpg)
MODEL VIEW * REQUIRED
REDRAW UI WITHOUT SERVER ROUND-TRIP !
Server
Views
View 1
View 2
Model
Model 1
Model 2
Client
![Page 12: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/12.jpg)
![Page 13: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/13.jpg)
WHAT DOES THE SERVER DO?
BECOMES A PURE DATA API or a WEB SERVICE
THIN SERVER
HANDLES SECURE or SENSITIVE CODE
![Page 14: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/14.jpg)
WHAT DOES THE SERVER DO?
THICK STATEFUL SERVER
Server RENDERS HTML and Executes LOGIC RECORDS STATE AND UPDATES CLIENT
![Page 15: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/15.jpg)
ADVANTAGES PITFALLS
![Page 16: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/16.jpg)
EMBRACE THE ADVANTAGES
NATURAL USER FLOW
PARALLEL DEVELOPMENT
EXPERIENCE on MOBILE DEVICES
STATE HANDLED ON CLIENT
OFFLINE EXPERIENCE POSSIBLE
![Page 17: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/17.jpg)
BEWARE OF PITFALLS
SEARCH ENGINE OPTIMISATION
JAVASCRIPT MUST BE ENABLED
LOADING TIME
JAVASCRIPT MEMORY LEAKS
![Page 18: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/18.jpg)
USE THE SERVER LUKE
RENDER FIRST PAGE ON THE SERVER
INITIAL LOAD TIME ISSUE
POPULATE INITIAL MODELS
![Page 19: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/19.jpg)
BACKBONE.JS AND OTHER LIBRARIES
![Page 20: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/20.jpg)
![Page 21: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/21.jpg)
HELPS STRUCTURE CODEMODEL VIEW CONTROLLER
LIGHTWEIGHT6.4KB
MATURE2010
UNOPINIONATED
![Page 22: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/22.jpg)
DEPENDS ON
OPTIONAL
![Page 23: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/23.jpg)
REpRESENts A SINGLE DATA OBJECT !
CONNECTS TO SERVER URL TO POPULATE / PERSIST !
WHEN DATA CHANGES, EVENTS FIRE
BACKBONE MODEL
![Page 24: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/24.jpg)
BACKBONE MODEL
Tweet = Backbone.Model.extend({ });
![Page 25: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/25.jpg)
BACKBONE MODEL: BASICS
DEFAULT VARIABLES
CONSTRUCTOR
BUILT-IN FUNCTIONS
YOUR OWN FUNCTIONS
![Page 26: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/26.jpg)
BACKBONE MODEL: USAGE
![Page 27: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/27.jpg)
BACKBONE MODEL: CHANGE EVENTS
![Page 28: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/28.jpg)
BACKBONE COLLECTIONBULK OPERATIONS ON MODELS !
CONNECTS TO SERVER URL TO POPULATE / PERSIST !
WHEN DATA CHANGES, EVENTS FIRE !
LOTS OF QUERY and FILTER FUNCTIONS
![Page 29: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/29.jpg)
BACKBONE COLLECTION
Timeline = Backbone.Collection.extend({ });
![Page 30: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/30.jpg)
BACKBONE COLLECTION: BASICS
MODEL
CONSTRUCTOR
URL
![Page 31: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/31.jpg)
BACKBONE VIEWCHANGES THE DOM !
CAN HANDLE DOM EVENTS !
SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER !
USE TEMPLATE FOR EFFICIENT RENDERING
![Page 32: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/32.jpg)
BACKBONE VIEW: THE DOM
![Page 33: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/33.jpg)
BACKBONE VIEW: THE TEMPLATE
![Page 34: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/34.jpg)
BACKBONE VIEW
TimelineView = Backbone.View.extend({ });
![Page 35: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/35.jpg)
BACKBONE VIEW: BASICSDOM ELEMENT
TEMPLATE
DOM EVENT HANDLING
RETRIEVE THE COLLECTION
![Page 36: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/36.jpg)
BACKBONE VIEW: RENDERING
APPEND TO DOM
![Page 37: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/37.jpg)
BACKBONE ROUTER
HANDLES APPLICATION STATE !
PROVIDES BOOKMARKABLE STATE !
SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER
[CONTROLLER]
![Page 38: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/38.jpg)
BACKBONE ROUTER CONTROLLER
AppRouter = Backbone.Router.extend({ });
![Page 39: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/39.jpg)
BACKBONE ROUTER: BASICSROUTES
EVENTS
HANDLERS
![Page 40: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/40.jpg)
DOM
Model Collection
ROUTER
VIEW
![Page 41: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/41.jpg)
UNOPINIONATED ===
CONTROL
![Page 42: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/42.jpg)
ECO SYSTEM
![Page 43: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/43.jpg)
MATURITY
![Page 44: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/44.jpg)
TOOLING
![Page 45: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/45.jpg)
.NET
![Page 46: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/46.jpg)
http://www.asp.net/single-page-application/overview/introduction
TEMPLATES FOR THE MOST POPULAR
![Page 47: Single Page Applications With Backbone](https://reader033.vdocument.in/reader033/viewer/2022051110/54b7a2574a795993718b4744/html5/thumbnails/47.jpg)
@SUGRUE www.jamessugrue.ie
AVAILABLE ON AMAZON
WIN IT NOW!
JOIN UP AT
www.donatecode.com
HIRING JAVASCRIPT / MOBILE DEVELOPERS