SELA DEVELOPER PRACTICE

Gil Fink

Single Page Applications

with Backbone.js

• The Road to Single Page Apps

• What is a SPA?

• SPA Building Blocks and Architecture

• AMD and RequireJS

• MVC using Backbone.js

• A Simple SPA

Agenda

RIA Web Apps

Websites

Thin Clients

and App Stores

The Road to Single Page Apps

Native Apps

Click-Once

SPA

Embedded Objects (Flash, Silverlight, Java

Applets …)

Traditional Web Apps

HTTP requests translated into user actions

The state persisted in the server side

The server translates the user action

The server translates its response to HTML

The browser displays the HTML response

Traditional Native Apps

State is persisted in the client-side

Compiled programming language is used

The application is platform dependent

An installation may be required

What is a Single Page App (SPA)?

A web application

No need for full page submit

No full refresh

No embedded objects

Client-side routing

Why to Develop SPAs?

Feature Web App Native App Single Page App

Cross Platform V X V

Client State Management

X V V

No Installation required

V X V

Web App

Native App

SPA

SPA Building Blocks

HTML5

JavaScript Libraries

Ajax

REST

SPA

Web API

HTML5

Supported by most modern browsers

Include variety of new JavaScript APIs that can help to:

Store data locally

Save data across application shutdowns

Communicate with the server in new ways

Such as CORS and Web Sockets

Increase web performance with new APIs and new mechanisms

Ajax

Asynchronously call server endpoints

Non blocking operations

You can maintain state in the client and go to the server without refreshing the whole page

Has opened the road for richer client-side UX

JavaScript Libraries/Frameworks

REST

Stands for REpresntational State Transfer

Architecture style

Designed to work with HTTP

Using HTTP verbs (POST, GET, PUT, DELETE)

Performs Create, Read, Update and Delete operations respectively

Can also use other HTTP verbs

Can receive and send data in variety of formats

JSON, XML, HTML, XHTML, Blob and more

Web API

The server is used only as API

Each API Function is an endpoint in the server

No need for server rendering

No need for server routing

Client-Side Routing

The main building block in a SPA

All routing is done in the client-side

You use a routing library/framework

When a route change happens, the library/framework intercepts the navigation and impose your functionality

SPA Architecture

Asynchronous Module Definitions (AMD)

Define modules such that the module and its dependencies can be asynchronously loaded

RequireJS Library

A module framework in the browser

Can be downloaded from http://requirejs.org/

Browser friendly API Concepts supported in Node.js as well

Defines a structure for files layout Uses conventions to perform lookups for dependencies

Demo

RequireJS

MVC using Backbone.js

Backbone.js is a small MVW library

Enforces structure to your JavaScript code

Includes only 5 main objects:

Models

Collections

Views

Routers

Events

MVC using Backbone.js – Cont.

Extending one of Backbone.js main objects

To include built-in Backbone.js functionality

To create your own custom functionality

var myModel = Backbone.Model.extend({ defaults: { myModelID: 0, myModelName: ‘’ } }); Var myCollection = Backbone.Collection.extend({ model: myModel }); var myRouter = Backbone.Router.extend({ routes: { ‘’: home }, home: function() { // create the home view } });

Demo

A Simple SPA

Questions

Summary

• SPAs are entire web apps built upon one page and JavaScript interactions

• Very suitable for mobile development

• SPAs are the way to build your next web apps!

Thank You