Why should you care about Single Page Applications and how to get help from Backbone.js

1. Single Page
Applications
Why and how of modern front-end development
through the lens of Backbone
www.dotnettoscana.org
#jsfullMassimo Iacolare
@iacoware
info@massimoiacolare.it
Tuesday, April 23, 13

2. Thanks to our sponsor
Tuesday, April 23, 13

3. 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 ...”
me
Tuesday, April 23, 13

4. Context
Web Apps Web Sites
not
means javascript is on and graceful
degradation doesn’t matter
Tuesday, April 23, 13

5. Do you have an example?
Tuesday, April 23, 13

6. Do we need SPA?
Luca Mascaro - Better Software
Tuesday, April 23, 13

7. 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

8. Code complexity
Tuesday, April 23, 13

9. I’m a jQuery ninja
Why should I care?
Tuesday, April 23, 13

10. 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

11. Yay, Task done. Coffee time!
Tuesday, April 23, 13

12. 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

13. using objects-to organize your jquery code
“Houston we might have a problem”
Tuesday, April 23, 13

14. Sad ninja
Tuesday, April 23, 13

15. 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

16. Our Goals
• Keep things simple (vs easy)
• Some kind of modularity (vs deps hell)
• Single Responsibility Principle
• Structure
Tuesday, April 23, 13

17. 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

18. MV* - Who are they?
Tuesday, April 23, 13

19. Backbone Intro
• Created by J. Ashkenas
+coffeescript
+underscorejs
• Born on October 2010
• Only dependencies are
underscorejs + jQuery or
Zepto
Tuesday, April 23, 13

20. Tuesday, April 23, 13

21. 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

22. Backbone components
Model Collection
View
Template
HTML
Fragment
Router
contains
use
use
Events
use
Data
+
=
Template EngineBackbone
Tuesday, April 23, 13

23. Backbone.Events
• Publish and Subscribe events
• Inherited by all other components
Tuesday, April 23, 13

24. Backbone.Model
• Keep app state
• Persistent or
Transient
• Data access/
manipulation
through get() & set()
• REST friendly
Tuesday, April 23, 13

25. Backbone.Collection
• Sorted set of models
• Set manipulation
functions (provided by
underscorejs)
• Set manipulation
events (add, remove)
• REST friendly
Tuesday, April 23, 13

26. 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

27. 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

28. 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

29. UI Decomposition
Tuesday, April 23, 13

30. Backbone tips &
tricks
aka lessons from the trenches
Tuesday, April 23, 13

31. Changes propagation
SearchView
save new
search
Propagate changes through state manipulation
add
Searches
SavedSearchesView
nope!
Tuesday, April 23, 13

32. View *-------1 Model
TweetsView TweetsCountView
TweetsCollection
Tuesday, April 23, 13

33. Everyone has a Base
Tuesday, April 23, 13

34. Don’t leave crumbs around
TweetsView
TweetView
TweetView
TweetView
Remove nested
views recursively to
avoid memory leaks
Tuesday, April 23, 13

35. Evolve & Adapt
TweetsView
TweetController
aka Glue Code
ComposeTweetView
Don’t feel constrained to use
only what Backbone provide.
Javascript is still there...
OMG
, it’s
not
from
Backbone!
Tuesday, April 23, 13

36. Precipitation pattern
View
Controller aka Glue Code
Model/Collection
Router
Follow the gravity
References Events
Tuesday, April 23, 13

37. Communication patterns
TrendsView EventsBus
Trends SearchController
tweets:search
tweets:search
Observer PubSub aka Mediator
aka EventBus
Tuesday, April 23, 13

38. Who uses it?
Tuesday, April 23, 13

39. 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

40. Thanks!
#jsfull
www.dotnettoscana.org/javascript-full-immersion.aspx
Slides on:
Tuesday, April 23, 13