SlideShare une entreprise Scribd logo
1  sur  24
Web Applications
Come of Age
Presented By : Gaurav Gawande
Insides
•
•
•
•
•
•
•
•
•

A Brief History of Web Development.
What is a Web App
Working of Web App
What is a Single Page Apps?
Examples
Why switch to Single Page Apps?
JavaScript Frame work
Advantages
Conclusion
The Web
Years of Development
• WWW 1st took off in mid 1990
• netScape introduce JavaScript In 1995

•

“Web App“ Servlets Specification version 2.2.
In 1999
The Web App
Web App : Allow user to
retrieve data
Browser : A Computer
program that allow
user to interact
with web.
REQUEST-RESPONSE
MODEL
Server side Script
The Person coding the
interface and the person
writing server side both
must have detail of each
others requirements.
But..
Very slow
&

Need to Reload Every
time
Consider Example..
Index.html

Greed.html

• Greed.html

• Details.html

Details.html
Not Any More..
Model Changed in mid2000
 2005 -- AJAX
Rise of Single Page
Application
• A single-page application (SPA), also known as
single-page interface (SPI), is a web application or
web site that fits on a single web site with the goal
of providing a more fluid user experience akin to a
desktop application.

..Wikipedia
Examples
Twitter

Google Mail
What is Single Page App.
•

As AJAX gained in popularity, we started
seeing a major reversal instead of

•

"dynamically-generated static web
pages"

•

"statically-generated dynamic web
pages"

•

This gave birth to something new:
serve simple static content and do all the
dynamic stuff with JavaScript.

•

In theory, you could run a whole app with
a single page load...
Key Difference
• Here’s a simple server-side web page template with
a PHP script that makes some
• SQL queries, plus HTML formatting for a table that
contains the results of those .
Request-Response Mode
Working
JavaScript Web App Mode
Working Of Java Script Model
JavaScript Frameworks
WHY USE SPA?
SPA PERFORMANCE
•
•
•
•
•
•
•
•

SPAs can improve performance in several ways:
Load time: 1 file each of HTML, CSS, JS,
static files not dynamic
Less data transfer: XHR calls only send
raw data, not HTML markup
Load distribution: dramatically less load
on your server, by distributing it to clients
Caching gets a lot easier and more beneficial
Final Thoughts
• !dea is simple
• Server Up the Base Presentation Document and
• Manipulate it with JS.
• All these benefits explain why developer may want
to develop next app on single page App.
<Thank You..!! >
Web Applications Come of Age: Understanding Single Page Apps

Contenu connexe

Tendances

Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Yuriy Shapovalov
 
Iseltech17 - Single Page Applications
Iseltech17 - Single Page ApplicationsIseltech17 - Single Page Applications
Iseltech17 - Single Page ApplicationsMonica Rodrigues
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talkDaiwei Lu
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Boris Livshutz
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppRavi Teja
 
Web jobs, Azure Functions and Serverless Computing
Web jobs, Azure Functions and Serverless ComputingWeb jobs, Azure Functions and Serverless Computing
Web jobs, Azure Functions and Serverless ComputingParis Polyzos
 
Single page applications
Single page applicationsSingle page applications
Single page applicationsDiego Cardozo
 
Single Page Apps
Single Page AppsSingle Page Apps
Single Page AppsGil Fink
 
Client side vs server side
Client side vs server sideClient side vs server side
Client side vs server sideabgjim96
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsJose Javier Columbie
 
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Waldek Mastykarz
 
Workflow driven development
Workflow driven developmentWorkflow driven development
Workflow driven developmentDmitryDemyankov
 
Office script labs
Office script labsOffice script labs
Office script labsMark Roden
 

Tendances (20)

Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
 
Iseltech17 - Single Page Applications
Iseltech17 - Single Page ApplicationsIseltech17 - Single Page Applications
Iseltech17 - Single Page Applications
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
A Gentle Introduction to Blazor
A Gentle Introduction to BlazorA Gentle Introduction to Blazor
A Gentle Introduction to Blazor
 
Azure Serverless Conf
Azure Serverless ConfAzure Serverless Conf
Azure Serverless Conf
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside App
 
Web jobs, Azure Functions and Serverless Computing
Web jobs, Azure Functions and Serverless ComputingWeb jobs, Azure Functions and Serverless Computing
Web jobs, Azure Functions and Serverless Computing
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Single Page Apps
Single Page AppsSingle Page Apps
Single Page Apps
 
Client side vs server side
Client side vs server sideClient side vs server side
Client side vs server side
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
 
Benefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJSBenefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJS
 
How to ease the learning curve
How to ease the learning curveHow to ease the learning curve
How to ease the learning curve
 
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
 
Workflow driven development
Workflow driven developmentWorkflow driven development
Workflow driven development
 
Why XAF and XPO?
Why XAF and XPO?Why XAF and XPO?
Why XAF and XPO?
 
Office script labs
Office script labsOffice script labs
Office script labs
 
ASP.NET MVC 4
ASP.NET MVC 4ASP.NET MVC 4
ASP.NET MVC 4
 

Similaire à Web Applications Come of Age: Understanding Single Page Apps

Advanced Web Technology.pptx
Advanced Web Technology.pptxAdvanced Web Technology.pptx
Advanced Web Technology.pptxssuser35fdf2
 
introduction to js
introduction to jsintroduction to js
introduction to jsSireesh K
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRafael Casuso Romate
 
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularEscaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularMark Leusink
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web applicationOliver N
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and ReactMike Melusky
 
Ppt for Online music store
Ppt for Online music storePpt for Online music store
Ppt for Online music storeADEEBANADEEM
 
Isomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityIsomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Eric Greene
 
How angularjs saves rails
How angularjs saves railsHow angularjs saves rails
How angularjs saves railsMichael He
 
Introduction tosinglepageapplications
Introduction tosinglepageapplicationsIntroduction tosinglepageapplications
Introduction tosinglepageapplicationsNabeel Khan
 
The Thick Front-End
The Thick Front-EndThe Thick Front-End
The Thick Front-EndJeff Dickey
 

Similaire à Web Applications Come of Age: Understanding Single Page Apps (20)

Javascript 01 (js)
Javascript 01 (js)Javascript 01 (js)
Javascript 01 (js)
 
Advanced Web Technology.pptx
Advanced Web Technology.pptxAdvanced Web Technology.pptx
Advanced Web Technology.pptx
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
introduction to js
introduction to jsintroduction to js
introduction to js
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
 
Client server 01
Client server 01Client server 01
Client server 01
 
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularEscaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
Ppt for Online music store
Ppt for Online music storePpt for Online music store
Ppt for Online music store
 
Isomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityIsomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And Scalability
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
 
Evolution of java script libraries
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
 
How angularjs saves rails
How angularjs saves railsHow angularjs saves rails
How angularjs saves rails
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
 
Introduction tosinglepageapplications
Introduction tosinglepageapplicationsIntroduction tosinglepageapplications
Introduction tosinglepageapplications
 
Mean stack
Mean stackMean stack
Mean stack
 
The Thick Front-End
The Thick Front-EndThe Thick Front-End
The Thick Front-End
 

Dernier

Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Food processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsFood processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsManeerUddin
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Seán Kennedy
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptshraddhaparab530
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 

Dernier (20)

Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptxRaw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Food processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsFood processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture hons
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 

Web Applications Come of Age: Understanding Single Page Apps