A session I delivered in SDP December 2013 conference

1. SELA DEVELOPER PRACTICE
December 15-19, 2013
Gil Fink
Single Page Apps (SPAs)

2. Agenda
•
•
•
•
•
•
The Road to Single Page Apps
What is a SPA?
SPA Building Blocks and Architecture
AMD and RequireJS
MVC using BackboneJS
A Simple SPA

3. The Road to Single Page Apps
Native
Apps
ClickOnce
Thin
Clients
and App
Stores
Embedded
Objects (Flash,
Silverlight, Java
Applets …)
Websites
Web
Apps
RIA
SPA

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

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

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

7. 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
SPA
Web
App
Native
App

8. SPA Building Blocks
Web API
SPA
REST
AJAX
JavaScript Libraries
HTML5

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

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

11. JavaScript Libraries/Frameworks

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

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

14. SPA Architecture

15. Async Module Definitions (AMD)
Define modules such that the module and its
dependencies can be asynchronously loaded

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

17. RequireJS
Demo

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

19. 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
}
});

20. A Simple SPA
Demo

21. Questions

22. 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!
•

23. Thank You