SELA DEVELOPER PRACTICE December 15-19, 2013

Gil Fink

Single Page Apps (SPAs)

• The Road to Single Page Apps

• What is a SPA?

• SPA Building Blocks and Architecture

• AMD and RequireJS

• MVC using BackboneJS

• 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

Like CORS and Web Sockets

Increase performance

AJAX

Asynchronously call server endpoints

Non blocking operations

You can maintain state on 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

SPA Architecture

Async 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 Supports NodeJS as well

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

Demo

RequireJS

MVC using BackboneJS

BackboneJS is a small MV* library

Enforces structure in your JavaScript code

Includes only 5 main objects:

Models

Collections

Views

Routers

Events

MVC using BackboneJS – Cont.

Extending one of BackboneJS main objects

To have built-in BackboneJS 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 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