SELA DEVELOPER PRACTICE
December 15-19, 2013

Gil Fink

Single Page Apps (SPAs)
Agenda
•
•
•

•
•
•

The Road to Single Page Apps
What is a SPA?
SPA Building Blocks and Architecture
AMD and RequireJS
MV...
The Road to Single Page Apps
Native
Apps

ClickOnce

Thin
Clients
and App
Stores

Embedded
Objects (Flash,
Silverlight, Ja...
Traditional Web Apps
HTTP requests translated into user actions
The state persisted in the server side
The server translat...
Traditional Native Apps
State is persisted in the client-side
Compiled programming language is used
The application is pla...
What is a Single Page App (SPA)?
A web application
No need for full page submit
No full refresh
No embedded objects
Client...
Why to Develop SPAs?
Feature

Web App

Native App

Single Page App

Cross Platform

V

X

V

Client State
Management

X

V...
SPA Building Blocks
Web API

SPA

REST
AJAX

JavaScript Libraries
HTML5
HTML5
Supported by most modern browsers
Include variety of new JavaScript APIs that can
help to:
Store data locally
Save d...
AJAX
Asynchronously call server endpoints
Non blocking operations

You can maintain state on the client and go to
the serv...
JavaScript Libraries/Frameworks
REST
Stands for REpresntational State Transfer
Architecture style
Designed to work with HTTP
Using HTTP verbs (POST, GET, ...
Web API
The server is used only as API
Each API Function is an endpoint in the server

No need for server rendering
No nee...
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
Sup...
RequireJS

Demo
MVC using BackboneJS
BackboneJS is a small MV* library
Enforces structure in your JavaScript code
Includes only 5 main obj...
MVC using BackboneJS – Cont.
Extending one of BackboneJS main objects
To have built-in BackboneJS functionality
To create ...
A Simple SPA

Demo
Questions
Summary

•

SPAs are web apps built upon one page and
JavaScript interactions
Very suitable for mobile development

•

SPA...
Thank You
Upcoming SlideShare
Loading in...5
×

Single Page Apps

1,869

Published on

A session I delivered in SDP December 2013 conference

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,869
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single Page Apps

  1. 1. SELA DEVELOPER PRACTICE December 15-19, 2013 Gil Fink Single Page Apps (SPAs)
  2. 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. 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. 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. 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. 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. 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. 8. SPA Building Blocks Web API SPA REST AJAX JavaScript Libraries HTML5
  9. 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. 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. 11. JavaScript Libraries/Frameworks
  12. 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. 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. 14. SPA Architecture
  15. 15. Async Module Definitions (AMD) Define modules such that the module and its dependencies can be asynchronously loaded
  16. 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. 17. RequireJS Demo
  18. 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. 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. 20. A Simple SPA Demo
  21. 21. Questions
  22. 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. 23. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×