Single page App
-
Upload
gaurav-gawande -
Category
Education
-
view
320 -
download
0
description
Transcript of Single page App
![Page 1: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/1.jpg)
Web Applications Come of Age
Presented By : Gaurav Gawande
![Page 2: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/2.jpg)
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
![Page 3: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/3.jpg)
The Web
![Page 4: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/4.jpg)
Years of Development• WWW 1st took off in mid 1990
• netScape introduce JavaScript In 1995
• “Web App“ Servlets Specification version 2.2. In 1999
![Page 5: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/5.jpg)
The Web App
Web App : Allow user to retrieve data
Browser : A Computer program that allow user to interact with web.
![Page 6: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/6.jpg)
REQUEST-RESPONSE
MODEL
![Page 7: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/7.jpg)
Server side Script
The Person coding the interface and the person writing server side both must have detail of each others requirements.
![Page 8: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/8.jpg)
But..
Very slow
&
Need to Reload Every time
![Page 9: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/9.jpg)
Consider Example..
Index.html• Greed.html
Greed.html• Details.html Details.ht
ml
![Page 10: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/10.jpg)
Not Any More..
Model Changed in mid- 2000
2005 -- AJAX
![Page 11: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/11.jpg)
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
![Page 12: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/12.jpg)
ExamplesTwitter Google Mail
![Page 13: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/13.jpg)
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...
![Page 14: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/14.jpg)
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 .
![Page 15: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/15.jpg)
Request-Response Mode
![Page 16: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/16.jpg)
Working
![Page 17: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/17.jpg)
JavaScript Web App Mode
![Page 18: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/18.jpg)
Working Of Java Script Model
![Page 19: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/19.jpg)
JavaScript Frameworks
![Page 20: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/20.jpg)
WHY USE SPA?
![Page 21: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/21.jpg)
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
![Page 22: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/22.jpg)
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.
![Page 23: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/23.jpg)
<Thank You..!! >
![Page 24: Single page App](https://reader035.fdocuments.us/reader035/viewer/2022081413/54708799b4af9fb90a8b4797/html5/thumbnails/24.jpg)