Download - Single Page Applications With Backbone
![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