Single Page Applications Serverless

An introduction of Single Page Applications and the change of web app architectures in the first class of IT 4203/4403 Advanced Web Development at Kennesaw State University.
About Jack Zheng

Faculty of IT at Kennesaw.edu
web development web application architecture single page application AJAX Web API http Web service Page http www application
An introduction of Single Page Applications and the change of web app architectures in the first class of IT 4203/4403 Advanced Web Development at Kennesaw State University.
About Jack Zheng

Faculty of IT at Kennesaw.edu
web development web application architecture single page application AJAX Web API http Web service Page http www application
SPA, Web API, Serverless
the change of web app architectures
IT 4403 Advanced Web and Mobile 
Applications
Jack G. Zheng
Fall 2019
https://www.edocr.com/v/j23zyenr/jgzheng/Single-Page-Applications-Serverless
Overview
2
 This lecture notes provides a high level overview 
of single page applications in the context of web 
application architecture changes
 The context: web application architectures
 What is SPA
 Key principles and concepts
 Enabling technologies
The Context
3
 Rise of JavaScript/HTML5
 JavaScript/HTML5 handle the user interface and 
interaction functionalities
 Changing of web application architectures
 Backend and frontend is even more loosely coupled.
Rise of JavaScript
4
 #1 in GitHub since 2014

https://octoverse.github.com/projects#languages
 #1 in StackOverflow since 2013

https://insights.stackoverflow.com/survey/2018
 Most in demand and salaries, 2015

https://gooroo.io/GoorooTHINK/Article/16300/Programming-languages--salaries-and-demand-May-
2015

http://www.techrepublic.com/article/here-are-the-3-most-in-demand-coding-languages-and-where-
you-can-find-a-developer-job/
 Other rankings

#1 The RedMonk Programming Language Rankings since 2015 
https://redmonk.com/sogrady/2018/08/10/language-rankings-6-18/

#2 in student programmers in hackathon (#1 is HTML/CSS) 
http://studenthackers.devpost.com/2015.html

#2 in Developer Economics survey 
https://dashboard.developereconomics.com/?survey=de15#mobile
 SharePoint/WordPress is moving to JavaScript

https://arc.applause.com/2015/11/24/wordpress-javascript-calypso/

https://developer.wordpress.com/calypso/

https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com/
Change of Web App Architecture
5
 Wave 1: multi-layer/tier systems
 Rich (multiple) servers
 Wave 2: service oriented
 Further separation of server side and client side
 Services are more among servers
 Wave 3: growing focus on the client side and widely 
use of AJAX
 Rich client development, SPA
 More open service model; clients consume services
 Wave 4: consuming services from the cloud (third 
parties)
 BaaS and serverless; the client is not tied to its own initiating 
server
Multi-Tier Web Architectures
6
 Two tier
 Three tier (web app)
 Four tier web app
http://msdn.microsoft.com/en-us/library/ee658109.aspx
In the first wave of 
architecture change, 
there was no
significant change on 
the client side
Changes were 
more focused 
on the server 
side
Service Oriented Architecture
7
The service layer effectively 
makes clients more like an 
independent and 
autonomous service 
consumer, and less owned 
by its server part – making 
things “loosely coupled”.
Data can 
also be 
services
Presentation 
layer can flexibly 
moved to the 
client side.
Changing of C/S Interaction
8
http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/
UI and data 
logic move to 
the client
Server 
provides
service
Can also be 
called the AJAX 
service model
Placement of Logic
9
http://www.openajax.org/
member/wiki/images/8/89
/NexawebAjaxCharacteris
tics.pdf
Not all business 
logic is appropriate 
to move to the 
client side.
Transfer of UI Logic
10
 UI logic moves to the client side, which can include
 Layout
 User interaction
 Dynamic effects
 Animation
 Content presentation update/refresh
 These functionalities are handled by HTML5/JavaScript 
https://stackoverflow.com/questions/1059832/is-client-side-ui-
rendering-via-javascript-a-good-idea
 The server’s diminished role
 The server maintains no UI state. 
 The server, however, does provide resources to the client. 
Those resources start out with the initial HTML for the web 
page (the shell) and may in response to client HTTP requests 
for data in the form of HTML fragments, JSON data, or on-
demand JavaScript/CSS.
AJAX + (RESTful) Services
11
http://stage.vambenepe.com/archives/1801
This can be any 
server from any
domain
Serverless
12
 The term serverless application has two distinct but related meanings 
(https://docs.microsoft.com/en-us/azure/architecture/reference-
architectures/serverless/web-app):
 Backend as a service (BaaS). Backend cloud services, such as databases and storage, provide 
APIs that enable client applications to connect directly to these services.

Functions as a service (FaaS). In this model, a "function" is a piece of code that is deployed to the 
cloud and runs inside a hosting environment that completely abstracts the servers that run the code.
 Both definitions have in common the idea that developers and DevOps personnel 
don't need to deploy, configure, or manage servers.
 Serverless applications are event-driven cloud-based systems where application 
development rely solely on a combination of third-party services, client-side 
logic and cloud-hosted remote procedure calls (Functions as a Service).
 Serverless architectures are application designs that incorporate third-party “Backend 
as a Service” (BaaS) services, and/or that include custom code run in managed, 
ephemeral containers on a “Functions as a Service” (FaaS) platform. By using these 
ideas, and related ones like single-page applications, such architectures remove 
much of the need for a traditional always-on server component. Serverless
architectures may benefit from significantly reduced operational cost, complexity, and 
engineering lead time, at a cost of increased reliance on vendor dependencies and 
comparatively immature supporting services. 
https://martinfowler.com/articles/serverless.html
Is it good?
13
 See some discussion here
 https://softwareengineering.stackexchange.com/ques
tions/140036/is-it-a-good-idea-to-do-ui-100-in-
javascript-and-provide-data-through-an-api
What is SPA
14
 A single-page application (SPA) is a web 
application or web site (the whole application or 
site) that fits on a single web page with the goal of 
providing a more fluid user experience similar to a 
desktop application.
 The page does not reload at any point in the 
process, nor does control transfer to another page.
 The application or the page involves dynamic 
communications with the server behind the scenes.
 It’s an extreme version of rich client focused web 
application architecture
SPA Key Principles and Concepts
15
 Page/shell
 View
 Data/resource
https://johnpapa.net/pageinspa/
Page/Shell
16
 The “page” in SPA is the single web page that the server sends 
to the browser when the application starts. It’s the server 
rendered HTML that gets everything started. No more, no less.

Initial page acted as a holder for content, UI, style, and other 
logic.
 The shell is the layout and structure of your app. The visual 
parts that rarely change. 
 The shell is generally loaded on the initial page load from the 
server and serves as the placeholder for all of your views. It 
can also be dynamically loaded progressively.
 The page/shell does not reload at any point in the process, nor 
does control transfer to another page.
https://johnpapa.net/pageinspa/
https://developers.google.com/web/fundam
entals/architecture/app-shell
View
17
 The Views are HTML (UI) fragments that make up 
what the users commonly call screens or pages.
 A particular “sub-page” “partial page” within the 
shell.
 Could be the complete page, a section (div) of the page, 
or just certain areas all round the page.
 Different views can be presented at the same time and do 
not interfere each other (multi-view, multi-doc interface)
 Transition (navigation) between views
 URL routing by simulating HTTP request
https://johnpapa.net/pageinspa/
User Interactions
18
 All user interactions and actions happen within 
the page.
 All results (view changes) due to these actions 
are presented directly in the page.
 Multiple actions/interactions are possible and 
should not interfere one other (multi-tasking).
Data/Resources
19
 SPA makes requests for resources from the 
server on-demand
 Those resources may be JSON data, HTML 
fragments, JavaScript or CSS
 The server provides resources/data, not pages 
(except for the initial page)
https://johnpapa.net/pageinspa/
Applications
20
 SPA is good for many applications that try to 
replicate desktop app experience where user 
interactions are more intensive
 Examples
 Many email apps
 Google Gmail, Outlook Web
 Office/editing apps
 Office 365
 Google Docs
 http://www.zillow.com
 http://cc-ng-z.azurewebsites.net
SPA is not (Exactly) Single Page Website
21
 Single or one page web site is a website designed in one 
(physical) web page
 Rooted from the web design community as a UI design style.
 Focus on content and the flow of content; does not focus on 
interactions between server and client
 Definitions did have changed to accommodate trends; and 
more recently came across SPA
 https://onepagelove.com/what-exactly-is-a-one-page-website
 Typical examples
 http://desrist2017.kit.edu
 http://www.100yearsofnps.com
 More examples: https://onepagelove.com, 
http://www.awwwards.com/websites/single-page/
Technical Approaches
22
 AJAX – the focus of this course
 WebSocket
 Browser Plugin
Driving Technologies
23
 Key elements (this course will focus on bare-
bone SPA without frameworks)
 JavaScript
 AJAX
 Standard data transfer format especially JSON
 RESTful web services (APIs)
 More (a research project?)
 HTML 5 (web storage, web sockets, history)
 Data model/storage
 Frameworks
 Browser plugin
Three Key Parts
24
 Server side: services, APIs
 A server provides data or functionalities through 
standard service APIs (RESTful service APIs)
 Communication: AJAX
 Client communicates with service providers via AJAX
 AJAX provides dynamic and continuous user 
experience
 Client side: JavaScript (jQuery)
 handles communication and consumes services
 controls logic (UI, data, business) and events
Web API Overview
25
 Web APIs are interfaces exposed based on web technologies
 http://code.tutsplus.com/articles/the-increasing-importance-of-apis-in-web-
development--net-22368
 Server side: similar as web services, interface exposed through HTTP 
methods
 https://en.wikipedia.org/wiki/Web_API
 Major API techniques
 SOAP web services
 RESTful web services
 JavaScript
 Major data/message format
 XML and XML-based: RSS/Atom (feeds)
 JSON
 Directory of web APIs
 http://www.programmableweb.com/apis/directory
 http://www.programmableweb.com/api-research
RESTful Web Services
26
 The RESTful Web Service is an approach for using REST as a 
communication technology to build SOA

In other words, services are exposed using REST style interfaces
 RESTful web services = REST + Web Services
 Key principles and practices
 Expose directory structure-like URIs.
 Use HTTP methods explicitly.
 Use multiple representations (XML, JSON, or both)
 Be stateless.
 More
 http://www.ibm.com/developerworks/webservices/library/ws-restful/
 http://www.drdobbs.com/web-development/restful-web-services-a-
tutorial/240169069
RESTful web services URI
27
 General format
 Examples
 http://MyService/Persons/1
 https://api.itbook.store/1.0/books/2279690981
 https://api.itbook.store/1.0/search/php/3
 Parameters
 Parameters are used for options to serve the 
representation, like
 http://MyService/Persons/1?format=xml&encoding=UTF8
 NOT for part of the resource
 http://MyService/Persons?id=1
Protocol://ServiceName/ResourceType/ResourceID
JSON
28
 JSON (JavaScript Object Notation) is a 
lightweight data-interchange format. 
 It is easy for humans to read and write. 
 It is easy for machines to parse and generate. 
 It is based on a subset of the JavaScript 
Programming Language.
 JSON is built on two structures:
 A collection of name/value pairs.
 An ordered list of values. In most languages, this is 
realized as an array, vector, list, or sequence.
 Detailed definition at http://www.json.org
AJAX
29
 AJAX (Asynchronous JavaScript and XML) is a group 
of interrelated web development techniques used on 
the client-side to create interactive web applications.
 Despite the name, the use of XML is not actually required, nor 
do the requests need to be asynchronous.
 AJAX incorporates:
 standards-based presentation using HTML and CSS;
 dynamic display and interaction using the Document Object 
Model;
 data interchange and manipulation using XML, JSON, or 
preformatted HTML;
 asynchronous operations and communications using 
XMLHttpRequest;
 JavaScript binding everything together.
Ajax Model
 With Ajax, web applications can communicate with servers in 
the background without a complete page loading after every 
request/response cycle.
30
http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html
The server prepares 
partial pages or just 
data without markups.
JavaScript/jQuery
31
 JavaScript unified everything together
 AJAX is handled by JavaScript and the browser
 JSON is a native JavaScript object and can be 
directly parsed and read by JavaScript once it is 
returned from the server
 UI (views) is managed by JavaScript through DOM 
manipulation (dynamic HTML)
 Actions/events are handled by JavaScript
 JavaScript consumes services
 https://stateofjs.com
A Simple Complete Cycle
32
Server
Browser
Service providers 
(can be same or 
another server)
1. Initial request
2. Initial response 
to load the shell
3. Load the shell
5. Ajax call 
for a service
6. Service response  
provided as JSON
4. User action to do 
something
7. JS parse the returned JSON 
and update page views (partial 
page update)
Benefits 
33
 Dynamic and interactive
 Loads quickly, smooth transition between views
 Client based processing, highly responsive
 See some discussion here
 https://stackoverflow.com/questions/21862054/single
-page-application-advantages-and-disadvantages
Challenges and More Issues
34
 Navigation, browser history
 Client data model/storage
 Session/state control - on the server or client?
 Two-way communication (duplex)? (Web socket, 
push)
 Data binding methods
 Frameworks
 Web analytics of SPA
 SEO, not search friendly
Good Resources
35

Core readings

JavaScript’s role: https://www.applause.com/blog/javascript-is-eating-the-world

The new Web application architectures and their impacts for enterprises

http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/

https://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-2/

Client centered web app architecture: http://www.slideshare.net/bastila/sencha-web-applications-come-of-age

An introduction to single page applications: http://www.johnpapa.net/pageinspa/ - SPA will be our focus of the course (project) throughout 
the semester. Get some initial conceptual understanding first. Read the comments as well.

What is Serverless Architecture? https://hackernoon.com/what-is-serverless-architecture-what-are-its-pros-and-cons-cc4b804022e9

JavaScript’s role:

https://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/comment-page-1/

https://www.itprotoday.com/web-development/explore-new-world-javascript-focused-client-side-web-development

The new Web application architectures and their impacts for enterprises

https://mobidev.biz/blog/3_types_of_web_application_architecture

http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/

https://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-2/

Client centered web app architecture: http://www.slideshare.net/bastila/sencha-web-applications-come-of-age

Single page app

https://johnpapa.net/spa/

http://singlepageappbook.com

http://tutorialzine.com/2015/02/single-page-app-without-a-framework/

https://en.wikipedia.org/wiki/Single-page_application

Serverless

https://www.fullstackfirebase.com/introduction/what-is-serverless

https://docs.microsoft.com/en-us/azure/architecture/reference-architectures/serverless/web-app