Difference between revisions of "Single-page application"
Karl Jones (Talk | contribs) (→URL in address bar) |
Karl Jones (Talk | contribs) (→See also) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 26: | Line 26: | ||
Modern web technologies -- such as those included in the [[HTML5]] [https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)#APIs pushState()] [[Application programming interface|API]] -- can help provide the perception and navigability of separate logical pages in the application. | Modern web technologies -- such as those included in the [[HTML5]] [https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)#APIs pushState()] [[Application programming interface|API]] -- can help provide the perception and navigability of separate logical pages in the application. | ||
| + | |||
| + | == Functions == | ||
| + | |||
| + | Key functions of single-page applications: | ||
| + | |||
| + | * Communication with the server | ||
| + | * Data binding | ||
| + | * Templating system | ||
| + | * Layout and partials | ||
| + | * Routing | ||
== See also == | == See also == | ||
| Line 39: | Line 49: | ||
* [https://en.wikipedia.org/wiki/Single-page_application Single-page application] @ Wikipedia | * [https://en.wikipedia.org/wiki/Single-page_application Single-page application] @ Wikipedia | ||
| + | * [http://singlepageappbook.com/ Single page apps in depth] | ||
[[Category:Web design and development]] | [[Category:Web design and development]] | ||
Latest revision as of 14:01, 11 November 2016
A single-page application (SPA) is a web application with a single web page.
Contents
Description
In SPA, the user navigates through content much like navigating from one web page to another, but in fact the browser remains on a single page.
In an SPA, all of the necessary code -- HTML, JavaScript, and CSS -- is either retrieved with a single page load, or added dynamically (via JavaScript).
The page loads once, the web application is ready to use, with additional code added dynamically as needed.
The page does not reload at any point in the process, nor does control transfer to another page.
URL in address bar
The URL in the browser address bar may change. This is done with JavaScript.
Process
Interaction with the single page application typically involves dynamic communication with a web server.
- The application makes a request to the server (typically because of a user action, or a timer)
- The server responds with some data
- The web application uses this data to update the browser
User perception of separate pages
Modern web technologies -- such as those included in the HTML5 pushState() API -- can help provide the perception and navigability of separate logical pages in the application.
Functions
Key functions of single-page applications:
- Communication with the server
- Data binding
- Templating system
- Layout and partials
- Routing
See also
- AngularJS
- Application programming interface
- Backbone.js
- Dynamic web page
- Dynamic web site
- Web application
External links
- Single-page application @ Wikipedia
- Single page apps in depth
