Single Page Applications

Why and how of modern front-end development through the lens of Backbone

www.dotnettoscana.org

#jsfullMassimo Iacolare@iacowareinfo@massimoiacolare.it

Tuesday, April 23, 13

Thanks to our sponsor

Tuesday, April 23, 13

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

Context

Web Apps Web Sitesnot

means javascript is on and graceful degradation doesn’t matter

Tuesday, April 23, 13

Do you have an example?

Tuesday, April 23, 13

Do we need SPA?

Luca Mascaro - Better Software

Tuesday, April 23, 13

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

Code complexity

Tuesday, April 23, 13

I’m a jQuery ninjaWhy should I care?

Tuesday, April 23, 13

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

Yay, Task done. Coffee time!

Tuesday, April 23, 13

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

using objects-to organize your jquery code

“Houston we might have a problem”

Tuesday, April 23, 13

Sad ninja

Tuesday, April 23, 13

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

Our Goals

• Keep things simple (vs easy)

• Some kind of modularity (vs deps hell)

• Single Responsibility Principle

• Structure

Tuesday, April 23, 13

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

MV* - Who are they?

Tuesday, April 23, 13

Backbone Intro• Created by J. Ashkenas

+coffeescript +underscorejs

• Born on October 2010

• Only dependencies are underscorejs + jQuery or Zepto

Tuesday, April 23, 13

Tuesday, April 23, 13

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

Backbone components

Model Collection

View

Template

HTML Fragment

Router

contains

use

useEvents

use

Data

+

=

Template EngineBackbone

Tuesday, April 23, 13

Backbone.Events• Publish and Subscribe events

• Inherited by all other components

Tuesday, April 23, 13

Backbone.Model• Keep app state

• Persistent or Transient

• Data access/manipulation through get() & set()

• REST friendly

Tuesday, April 23, 13

Backbone.Collection• Sorted set of models

• Set manipulation functions (provided by underscorejs)

• Set manipulation events (add, remove)

• REST friendly

Tuesday, April 23, 13

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

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

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

UI Decomposition

Tuesday, April 23, 13

Backbone tips & tricks

aka lessons from the trenches

Tuesday, April 23, 13

Changes propagation

SearchView

save new search

Propagate changes through state manipulation

add

Searches

SavedSearchesViewno

pe!

Tuesday, April 23, 13

View *-------1 Model

TweetsView TweetsCountView

TweetsCollection

Tuesday, April 23, 13

Everyone has a Base

Tuesday, April 23, 13

Don’t leave crumbs around

TweetsView

TweetView

TweetView

TweetView

Remove nested views recursively to

avoid memory leaks

Tuesday, April 23, 13

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

Precipitation pattern

View

Controller aka Glue Code

Model/Collection

Router

Follow the gravity

References Events

Tuesday, April 23, 13

Communication patterns

TrendsView EventsBus

Trends SearchController

tweets:search

tweets:search

Observer PubSub aka Mediator aka EventBus

Tuesday, April 23, 13

Who uses it?

Tuesday, April 23, 13

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

Thanks!

#jsfull

www.dotnettoscana.org/javascript-full-immersion.aspx

Slides on:

Tuesday, April 23, 13