SlideShare a Scribd company logo
The What? Why? And How?
Single Page Applications
The beginning of the beginning…
(early 1990s)
Request (GET) for a
Static HTML Page
Respond with requested
Static HTML Page
STATIC HTML PAGE
The beginning of the beginning…
(early 1990s)
Request (GET) for
another Static HTML
Page by clicking on a
Hyperlink
Respond with requested
Static HTML Page
FROM ONE PAGE TO ANOTHER
A little after the beginning of the beginning….
(mid 1990s)
Submit new order to the
server using an HTML
form
Store the order and respond
with a confirmation HTML
page.
FORM SUBMISSION (POST)
A little after the beginning of the beginning….
(mid 1990s)
Request for a Dynamic
Page showing all orders
so far…
Generate a dynamic html page
based on current data and
respond with that page.
DYNAMIC PAGES (GET)
Birth of a star… (1995)
Request for a Page
Respond with the page along
with its corresponding
JavaScript which adds
behavior to the otherwise
extremely boring and inactive
page.
JavaScript
Birth of another star… (1996)
Request for a Page
Respond with the page along
with its corresponding CSS
which gives a way to separate
structure from presentation.
CSS
The 3 stars that became super stars…
Structure Presentation Behavior
Exchange of new information with the server, after a page is
loaded, required a page refresh or use of browser plug-ins such as
Macromedia Flash, Java Applets, etc.
• Eg: While following a game, the sports page needed a refresh every 30
seconds so that a whole new page was generated by the server with the
latest scores.
• Eg: A chat session required a browser plug-in such as Java Applets which
allowed the display of new messages on the page.
• Eg: An interactive video game page required a browser plug-in such as
Macromedia Flash to allow the page to interact with other users.
The Big Limitation…
Enter the game changer (2005)…
Request for latest information
behind the scenes without
reloading the parent page using
just plain JavaScript and no
plug-ins.
Respond with information
requested that can be quickly
integrated into the parent page
by the browser without
reloading.
Enter the devilry… Native Apps (2007)
Request or send data in
the form of XML or JSON
while all the screens and
their rendering is handled
client-side.
Respond with the requested
data or acknowledge receipt
of new data from the client.
Too much happening server-side…
With the entry of Native Apps web applications now needed to
maintain two sets of code on the server-side…
1) One set of code to continue supporting web browsers which
required..
1) rendering of HTML pages with data pulled from the database.
2) acceptance of form data and responding with an acknowledgement
page.
2) Another set of code to exchange just data with Native Apps via
APIs. Pretty much every major feature that a web application
provided had to be made available also in the form of an API.
Need for better life…
Maintaining two sets of code doing more or less the same thing is
always a pain. How can we avoid it? Is it possible to come up with a
way where we only need to maintain one or the other?
Well… let’s think about it… all we have to do is make the web browser
behave like a Native App.
How can we do that?
Well… we have JavaScript which can render new elements based on
data. It can also allow content to be changed within an element in the
DOM.
And we have AJAX which allows new content to be brought in without
reloading the page…
So, all we need to do is to combine all these features!
Single Page Applications
A much better life…
Request or send data in
the form of XML or JSON
while all the screens and
their rendering is handled
client-side.
Respond with the requested
data or acknowledge receipt
of new data from the client.

More Related Content

What's hot

Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
Daiwei Lu
 
My cool new Slideshow!
My cool new Slideshow!My cool new Slideshow!
My cool new Slideshow!
rommel_gagasa
 
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Mark Roden
 
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
Microsoft
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flex
Joseph Khan
 
Chapter 1 (asp.net over view)
Chapter 1 (asp.net over view)Chapter 1 (asp.net over view)
Chapter 1 (asp.net over view)
let's go to study
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
Joseph Khan
 
Hybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJSHybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJS
Hamdi Hmidi
 
Website Design, Development & Maintenance | Foundations | Week 01
Website Design, Development & Maintenance | Foundations | Week 01Website Design, Development & Maintenance | Foundations | Week 01
Website Design, Development & Maintenance | Foundations | Week 01
Jason Fields
 
Mobile web apps in pure Java
Mobile web apps in pure JavaMobile web apps in pure Java
Mobile web apps in pure Java
Thomas Mattsson
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of Tomorrow
Mike Crabb
 
Salesforce composite api mule soft connector
Salesforce composite api mule soft connectorSalesforce composite api mule soft connector
Salesforce composite api mule soft connector
pqrs1234
 
Concocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for AzureConcocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for Azure
Saltmarch Media
 
Introduction to asp
Introduction to aspIntroduction to asp
Introduction to asp
Madhuri Kavade
 

What's hot (14)

Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
My cool new Slideshow!
My cool new Slideshow!My cool new Slideshow!
My cool new Slideshow!
 
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
 
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
ASP.NET Loves HTML5, Javascript and CSS3, or what's new in VS2013 for Web Dev...
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flex
 
Chapter 1 (asp.net over view)
Chapter 1 (asp.net over view)Chapter 1 (asp.net over view)
Chapter 1 (asp.net over view)
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Hybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJSHybrid Mobile Apps | Ionic & AngularJS
Hybrid Mobile Apps | Ionic & AngularJS
 
Website Design, Development & Maintenance | Foundations | Week 01
Website Design, Development & Maintenance | Foundations | Week 01Website Design, Development & Maintenance | Foundations | Week 01
Website Design, Development & Maintenance | Foundations | Week 01
 
Mobile web apps in pure Java
Mobile web apps in pure JavaMobile web apps in pure Java
Mobile web apps in pure Java
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of Tomorrow
 
Salesforce composite api mule soft connector
Salesforce composite api mule soft connectorSalesforce composite api mule soft connector
Salesforce composite api mule soft connector
 
Concocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for AzureConcocting an MVC, Data Services and Entity Framework solution for Azure
Concocting an MVC, Data Services and Entity Framework solution for Azure
 
Introduction to asp
Introduction to aspIntroduction to asp
Introduction to asp
 

Viewers also liked

Riscopriamo il mondo contadino della Maremma Settentrionale
Riscopriamo il mondo contadino  della Maremma SettentrionaleRiscopriamo il mondo contadino  della Maremma Settentrionale
Riscopriamo il mondo contadino della Maremma Settentrionale
scuolabloggando
 
Tarea 5 motivacion_judithazuaje
Tarea 5 motivacion_judithazuajeTarea 5 motivacion_judithazuaje
Tarea 5 motivacion_judithazuaje
yudy7777
 
No morebullconferencefeb2015
No morebullconferencefeb2015No morebullconferencefeb2015
No morebullconferencefeb2015
AlbertaHelpingAnimalsSociety
 
CloudComputing
CloudComputingCloudComputing
CloudComputing
Adi Challa
 
Presentation 4
Presentation 4Presentation 4
Presentation 4
Meerwise Joya
 
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
Ashley Holst
 
CHURCH AND SOCIETY--Table and Intoduction
CHURCH AND SOCIETY--Table and IntoductionCHURCH AND SOCIETY--Table and Intoduction
CHURCH AND SOCIETY--Table and Intoduction
Rudi Maier
 
Scuolasicura
ScuolasicuraScuolasicura
Scuolasicura
scuolabloggando
 
In-Vitro Paper
In-Vitro PaperIn-Vitro Paper
In-Vitro Paper
Jennifer Quinn
 
Basic android
Basic androidBasic android
Basic android
Dharmendra Kushwaha
 
NoSQLDatabases
NoSQLDatabasesNoSQLDatabases
NoSQLDatabases
Adi Challa
 
J.Levy Persentation - M3
J.Levy Persentation - M3J.Levy Persentation - M3
J.Levy Persentation - M3
Jacob Levy
 
Presentation 2
Presentation 2Presentation 2
Presentation 2
Meerwise Joya
 
NJ Wrestling Region 4 Champions
NJ Wrestling Region 4 ChampionsNJ Wrestling Region 4 Champions
NJ Wrestling Region 4 Champions
JIm Traxinger
 
Pennsylvanian 1-19-79
Pennsylvanian 1-19-79Pennsylvanian 1-19-79
Pennsylvanian 1-19-79
JIm Traxinger
 
Garden State HS Wrestling Champions
Garden State HS Wrestling ChampionsGarden State HS Wrestling Champions
Garden State HS Wrestling Champions
JIm Traxinger
 
El sueno
El suenoEl sueno
El sueno
yudy7777
 
La storia è di tutti
La storia è di tuttiLa storia è di tutti
La storia è di tutti
scuolabloggando
 
1979 EIWA Championship
1979 EIWA Championship1979 EIWA Championship
1979 EIWA Championship
JIm Traxinger
 

Viewers also liked (20)

Un fantasma a...scuola
Un fantasma a...scuolaUn fantasma a...scuola
Un fantasma a...scuola
 
Riscopriamo il mondo contadino della Maremma Settentrionale
Riscopriamo il mondo contadino  della Maremma SettentrionaleRiscopriamo il mondo contadino  della Maremma Settentrionale
Riscopriamo il mondo contadino della Maremma Settentrionale
 
Tarea 5 motivacion_judithazuaje
Tarea 5 motivacion_judithazuajeTarea 5 motivacion_judithazuaje
Tarea 5 motivacion_judithazuaje
 
No morebullconferencefeb2015
No morebullconferencefeb2015No morebullconferencefeb2015
No morebullconferencefeb2015
 
CloudComputing
CloudComputingCloudComputing
CloudComputing
 
Presentation 4
Presentation 4Presentation 4
Presentation 4
 
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
Caminante Proyecto Educativo and The Re...Dominican Republic - Global Ministr...
 
CHURCH AND SOCIETY--Table and Intoduction
CHURCH AND SOCIETY--Table and IntoductionCHURCH AND SOCIETY--Table and Intoduction
CHURCH AND SOCIETY--Table and Intoduction
 
Scuolasicura
ScuolasicuraScuolasicura
Scuolasicura
 
In-Vitro Paper
In-Vitro PaperIn-Vitro Paper
In-Vitro Paper
 
Basic android
Basic androidBasic android
Basic android
 
NoSQLDatabases
NoSQLDatabasesNoSQLDatabases
NoSQLDatabases
 
J.Levy Persentation - M3
J.Levy Persentation - M3J.Levy Persentation - M3
J.Levy Persentation - M3
 
Presentation 2
Presentation 2Presentation 2
Presentation 2
 
NJ Wrestling Region 4 Champions
NJ Wrestling Region 4 ChampionsNJ Wrestling Region 4 Champions
NJ Wrestling Region 4 Champions
 
Pennsylvanian 1-19-79
Pennsylvanian 1-19-79Pennsylvanian 1-19-79
Pennsylvanian 1-19-79
 
Garden State HS Wrestling Champions
Garden State HS Wrestling ChampionsGarden State HS Wrestling Champions
Garden State HS Wrestling Champions
 
El sueno
El suenoEl sueno
El sueno
 
La storia è di tutti
La storia è di tuttiLa storia è di tutti
La storia è di tutti
 
1979 EIWA Championship
1979 EIWA Championship1979 EIWA Championship
1979 EIWA Championship
 

Similar to SinglePageApplications

Walther Ajax4
Walther Ajax4Walther Ajax4
Walther Ajax4
rsnarayanan
 
single page application
single page applicationsingle page application
single page application
Ravindra K
 
Dynamic web pages in java
Dynamic web pages in javaDynamic web pages in java
Dynamic web pages in java
vishal choudhary
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
CodeValue
 
Languages and tools for web programming
Languages and tools for web  programmingLanguages and tools for web  programming
Languages and tools for web programming
Alamelu
 
Languages and tools for web programming
Languages and tools for web  programmingLanguages and tools for web  programming
Languages and tools for web programming
alamelumani
 
9781423903055 ppt ch08
9781423903055 ppt ch089781423903055 ppt ch08
9781423903055 ppt ch08
临枫 盖
 
Build Web Applications
Build Web ApplicationsBuild Web Applications
Build Web Applications
Tom Crombez
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
John Coggeshall
 
Ajax
AjaxAjax
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
Ajax
AjaxAjax
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
.toster
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
Mohammed Hussein
 
AJAX
AJAXAJAX
Evolution of Applications & Web
Evolution of Applications & WebEvolution of Applications & Web
Evolution of Applications & Web
Himanshu Jindal
 
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JSFestUA
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
Randy Connolly
 
Lecture 1 (2)
Lecture 1 (2)Lecture 1 (2)
Lecture 1 (2)
erick chuwa
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
Stefano Di Paola
 

Similar to SinglePageApplications (20)

Walther Ajax4
Walther Ajax4Walther Ajax4
Walther Ajax4
 
single page application
single page applicationsingle page application
single page application
 
Dynamic web pages in java
Dynamic web pages in javaDynamic web pages in java
Dynamic web pages in java
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
 
Languages and tools for web programming
Languages and tools for web  programmingLanguages and tools for web  programming
Languages and tools for web programming
 
Languages and tools for web programming
Languages and tools for web  programmingLanguages and tools for web  programming
Languages and tools for web programming
 
9781423903055 ppt ch08
9781423903055 ppt ch089781423903055 ppt ch08
9781423903055 ppt ch08
 
Build Web Applications
Build Web ApplicationsBuild Web Applications
Build Web Applications
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
Ajax
AjaxAjax
Ajax
 
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
 
Ajax
AjaxAjax
Ajax
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
 
AJAX
AJAXAJAX
AJAX
 
Evolution of Applications & Web
Evolution of Applications & WebEvolution of Applications & Web
Evolution of Applications & Web
 
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Lecture 1 (2)
Lecture 1 (2)Lecture 1 (2)
Lecture 1 (2)
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 

SinglePageApplications

  • 1. The What? Why? And How? Single Page Applications
  • 2. The beginning of the beginning… (early 1990s) Request (GET) for a Static HTML Page Respond with requested Static HTML Page STATIC HTML PAGE
  • 3. The beginning of the beginning… (early 1990s) Request (GET) for another Static HTML Page by clicking on a Hyperlink Respond with requested Static HTML Page FROM ONE PAGE TO ANOTHER
  • 4. A little after the beginning of the beginning…. (mid 1990s) Submit new order to the server using an HTML form Store the order and respond with a confirmation HTML page. FORM SUBMISSION (POST)
  • 5. A little after the beginning of the beginning…. (mid 1990s) Request for a Dynamic Page showing all orders so far… Generate a dynamic html page based on current data and respond with that page. DYNAMIC PAGES (GET)
  • 6. Birth of a star… (1995) Request for a Page Respond with the page along with its corresponding JavaScript which adds behavior to the otherwise extremely boring and inactive page. JavaScript
  • 7. Birth of another star… (1996) Request for a Page Respond with the page along with its corresponding CSS which gives a way to separate structure from presentation. CSS
  • 8. The 3 stars that became super stars… Structure Presentation Behavior
  • 9. Exchange of new information with the server, after a page is loaded, required a page refresh or use of browser plug-ins such as Macromedia Flash, Java Applets, etc. • Eg: While following a game, the sports page needed a refresh every 30 seconds so that a whole new page was generated by the server with the latest scores. • Eg: A chat session required a browser plug-in such as Java Applets which allowed the display of new messages on the page. • Eg: An interactive video game page required a browser plug-in such as Macromedia Flash to allow the page to interact with other users. The Big Limitation…
  • 10. Enter the game changer (2005)… Request for latest information behind the scenes without reloading the parent page using just plain JavaScript and no plug-ins. Respond with information requested that can be quickly integrated into the parent page by the browser without reloading.
  • 11. Enter the devilry… Native Apps (2007) Request or send data in the form of XML or JSON while all the screens and their rendering is handled client-side. Respond with the requested data or acknowledge receipt of new data from the client.
  • 12. Too much happening server-side… With the entry of Native Apps web applications now needed to maintain two sets of code on the server-side… 1) One set of code to continue supporting web browsers which required.. 1) rendering of HTML pages with data pulled from the database. 2) acceptance of form data and responding with an acknowledgement page. 2) Another set of code to exchange just data with Native Apps via APIs. Pretty much every major feature that a web application provided had to be made available also in the form of an API.
  • 13. Need for better life… Maintaining two sets of code doing more or less the same thing is always a pain. How can we avoid it? Is it possible to come up with a way where we only need to maintain one or the other? Well… let’s think about it… all we have to do is make the web browser behave like a Native App. How can we do that? Well… we have JavaScript which can render new elements based on data. It can also allow content to be changed within an element in the DOM. And we have AJAX which allows new content to be brought in without reloading the page… So, all we need to do is to combine all these features!
  • 15. A much better life… Request or send data in the form of XML or JSON while all the screens and their rendering is handled client-side. Respond with the requested data or acknowledge receipt of new data from the client.