single page apps
DESCRIPTION
A session I delivered in SDP December 2013 conferenceTRANSCRIPT
![Page 1: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/1.jpg)
SELA DEVELOPER PRACTICE December 15-19, 2013
Gil Fink
Single Page Apps (SPAs)
![Page 2: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/2.jpg)
• 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
![Page 3: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/3.jpg)
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 …)
![Page 4: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/4.jpg)
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
![Page 5: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/5.jpg)
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
![Page 6: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/6.jpg)
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
![Page 7: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/7.jpg)
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
![Page 8: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/8.jpg)
SPA Building Blocks
HTML5
JavaScript Libraries
AJAX
REST
SPA
Web API
![Page 9: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/9.jpg)
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
![Page 10: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/10.jpg)
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
![Page 11: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/11.jpg)
JavaScript Libraries/Frameworks
![Page 12: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/12.jpg)
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
![Page 13: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/13.jpg)
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
![Page 14: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/14.jpg)
SPA Architecture
![Page 15: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/15.jpg)
Async Module Definitions (AMD)
Define modules such that the module and its dependencies can be asynchronously loaded
![Page 16: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/16.jpg)
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
![Page 17: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/17.jpg)
Demo
RequireJS
![Page 18: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/18.jpg)
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
![Page 19: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/19.jpg)
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 } });
![Page 20: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/20.jpg)
Demo
A Simple SPA
![Page 21: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/21.jpg)
Questions
![Page 22: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/22.jpg)
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!
![Page 23: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022052822/554f96beb4c905ad218b4696/html5/thumbnails/23.jpg)
Thank You