single page applications
DESCRIPTION
Why should you care about Single Page Applications and how to get help from Backbone.jsTRANSCRIPT
![Page 1: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/1.jpg)
Single Page Applications
Why and how of modern front-end development through the lens of Backbone
www.dotnettoscana.org
#jsfullMassimo Iacolare@[email protected]
Tuesday, April 23, 13
![Page 2: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/2.jpg)
Thanks to our sponsor
Tuesday, April 23, 13
![Page 3: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/3.jpg)
SPA - Definition“A Single Page Application is a web app that fits on a single page with a goal of providing a more fluid user experience”
from wikipedia
“... is a web app in which the majority of interactions are handled on the page without the need to reach a server ...”
meTuesday, April 23, 13
![Page 4: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/4.jpg)
Context
Web Apps Web Sitesnot
means javascript is on and graceful degradation doesn’t matter
Tuesday, April 23, 13
![Page 5: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/5.jpg)
Do you have an example?
Tuesday, April 23, 13
![Page 6: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/6.jpg)
Do we need SPA?
Luca Mascaro - Better Software
Tuesday, April 23, 13
![Page 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/7.jpg)
SPA - Definition
“A Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server with a goal of
providing a more fluid user experience”
Tuesday, April 23, 13
![Page 8: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/8.jpg)
Code complexity
Tuesday, April 23, 13
![Page 9: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/9.jpg)
I’m a jQuery ninjaWhy should I care?
Tuesday, April 23, 13
![Page 10: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/10.jpg)
It starts very simple...
using objects to organize your jquery code
1. Load some content when a list item is clicked
2. Hide the content for siblings list items
Tuesday, April 23, 13
![Page 11: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/11.jpg)
Yay, Task done. Coffee time!
Tuesday, April 23, 13
![Page 12: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/12.jpg)
Some time later you get a call...
• Url needs to be configurable
• We would like back button support
• Animations are so cool...
• We must mark the current item
• Let’s use a LightBox!
Tuesday, April 23, 13
![Page 13: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/13.jpg)
using objects-to organize your jquery code
“Houston we might have a problem”
Tuesday, April 23, 13
![Page 14: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/14.jpg)
Sad ninja
Tuesday, April 23, 13
![Page 15: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/15.jpg)
What’s the problem?• Application state kept on DOM
• State drives behavior. You’re coupling the logic of your app to how it’s presented on the screen
• They have different different reasons to change
• DOM => appearance
• App => logic
• An App’s appearance hopefully will change faster than its logic
Tuesday, April 23, 13
![Page 16: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/16.jpg)
Our Goals
• Keep things simple (vs easy)
• Some kind of modularity (vs deps hell)
• Single Responsibility Principle
• Structure
Tuesday, April 23, 13
![Page 17: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/17.jpg)
MV*, Here they comes
• Essentially they provide us with a pre-defined path towards success our goals
• They enforce structure by giving us a set of components (building blocks). Not to be confused with widgets
• Different levels of prescriptiveness
Tuesday, April 23, 13
![Page 18: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/18.jpg)
MV* - Who are they?
Tuesday, April 23, 13
![Page 19: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/19.jpg)
Backbone Intro• Created by J. Ashkenas
+coffeescript +underscorejs
• Born on October 2010
• Only dependencies are underscorejs + jQuery or Zepto
Tuesday, April 23, 13
![Page 20: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/20.jpg)
Tuesday, April 23, 13
![Page 21: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/21.jpg)
Why Backbone?
• “Use only what you need” approach
• Based on jQuery. Reuse the skill you already have
• Low learning curve, 1500 understandable LOC included comments -> High ROI
• Huge community
Tuesday, April 23, 13
![Page 22: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/22.jpg)
Backbone components
Model Collection
View
Template
HTML Fragment
Router
contains
use
useEvents
use
Data
+
=
Template EngineBackbone
Tuesday, April 23, 13
![Page 23: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/23.jpg)
Backbone.Events• Publish and Subscribe events
• Inherited by all other components
Tuesday, April 23, 13
![Page 24: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/24.jpg)
Backbone.Model• Keep app state
• Persistent or Transient
• Data access/manipulation through get() & set()
• REST friendly
Tuesday, April 23, 13
![Page 25: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/25.jpg)
Backbone.Collection• Sorted set of models
• Set manipulation functions (provided by underscorejs)
• Set manipulation events (add, remove)
• REST friendly
Tuesday, April 23, 13
![Page 26: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/26.jpg)
Backbone.View• Render/manipulate a
DOM fragment
• Sits between a model/collection and a DOM fragment
• Observe models
• Handle DOM events
Tuesday, April 23, 13
![Page 27: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/27.jpg)
Backbone.Router• Enable the association
of an intermediate app state as a URL
• You decide what states should be reachable as a URL
• It calls a callback whenever a URL is matched
Tuesday, April 23, 13
![Page 28: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/28.jpg)
Backbone Progression
• Decompose UI into Views
• Encapsulate state in models
• Add routing to mark intermediate states and support back button & bookmarks.
Tuesday, April 23, 13
![Page 29: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/29.jpg)
UI Decomposition
Tuesday, April 23, 13
![Page 30: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/30.jpg)
Backbone tips & tricks
aka lessons from the trenches
Tuesday, April 23, 13
![Page 31: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/31.jpg)
Changes propagation
SearchView
save new search
Propagate changes through state manipulation
add
Searches
SavedSearchesViewno
pe!
Tuesday, April 23, 13
![Page 32: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/32.jpg)
View *-------1 Model
TweetsView TweetsCountView
TweetsCollection
Tuesday, April 23, 13
![Page 33: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/33.jpg)
Everyone has a Base
Tuesday, April 23, 13
![Page 34: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/34.jpg)
Don’t leave crumbs around
TweetsView
TweetView
TweetView
TweetView
Remove nested views recursively to
avoid memory leaks
Tuesday, April 23, 13
![Page 35: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/35.jpg)
Evolve & Adapt
TweetsViewTweetControlleraka Glue Code
ComposeTweetView
Don’t feel constrained to use only what Backbone provide.
Javascript is still there...
OMG, it
’s
not f
rom
Back
bone
!
Tuesday, April 23, 13
![Page 36: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/36.jpg)
Precipitation pattern
View
Controller aka Glue Code
Model/Collection
Router
Follow the gravity
References Events
Tuesday, April 23, 13
![Page 37: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/37.jpg)
Communication patterns
TrendsView EventsBus
Trends SearchController
tweets:search
tweets:search
Observer PubSub aka Mediator aka EventBus
Tuesday, April 23, 13
![Page 38: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/38.jpg)
Who uses it?
Tuesday, April 23, 13
![Page 39: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/39.jpg)
Learn it :-)• http://backbonefu.com/
• http://lostechies.com/derickbailey/category/backbone/
• http://www.watchmecode.net/
• http://recipeswithbackbone.com/
• http://ricostacruz.com/backbone-patterns/
Tuesday, April 23, 13
![Page 40: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022052822/554f5bffb4c905b9508b543d/html5/thumbnails/40.jpg)
Thanks!
#jsfull
www.dotnettoscana.org/javascript-full-immersion.aspx
Slides on:
Tuesday, April 23, 13