Single Page Applications

Enrique Barra
Evolution of the Web Technologies
 HTTP -> HTTP1.1, HTTPS (HTTP + SSL), HTTP2, …
– New protocols to create new types of apps

 JavaScript -> ES6 and ES7

 HTML/CSS -> HTML5, CSS3

 Web Client (Browser) -> They evolve a lot including the new
standards, tabs, tools, …

 Web server -> dynamic, connected to databases, …

2
History
 90s
– Little JS. Static pages. Server side
computation
 2000s
– AJAX
 200X
– SPA

3
Static pages Request

 Process HTTP
– The client (browser) requests
information, the web page (.html) Response
that the user wrote in the
navigation bar or where he got
through a link
– The server sends that page
– The client asks for the rest of the
page resources (CSS, JS, images,
videos, …) and renders (draws) the
page

 Characteristics
– Logic is in the server
– Full pages
– HTTP protocol
• HTTP GET: to request page
• HTTP POST: To send forms
4
Ajax
 Asynchronous JavaScript and XML
 Briefly: use of JavaScript to communicate in an
asynchronous way with the server and bring pieces of
pages without reloading and without a new full page
request

 Characteristics:
– Logic is still in the server, small part in the client (browser)
– First request asks for the complete page and further requests
ask for parts
– HTTP protocol
• HTTP GET: to request page
• HTTP POST: To send forms
• XMLHttpRequest, asynchronous interchange of information
– With the server response the complete page that we brought in
the first place is modified, maybe hiding some part, showing a
new piece, …

5
SPA
 Single-Page Application
 Architecture of web applications
 More similar to web applications
 Examples: Gmail, Google Maps, Drive, Trello…

 Characteristics
– Most of the logic is in the client (the server is
only to store data and not much more)
– With the first request the browser brings the
web application
– Subsequently other technologies are used to
communicate with the server and send and
receive data
• AJAX
• Websockets

 Important Idea:
– DOM manipulation is very expensive

6
SPA vs MPA
 Many comparisons
– http://merehead.com/blog/single-page-application-vs-multi-
page-application/
– https://medium.com/@NeotericEU/single-page-application-
vs-multiple-page-application-2591588efe58

 Each model has pros and cons

7
Single Page Applications
Enrique Barra