Single page application
Encyclopedia
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 page
.
In an SPA, either all necessary code – HTML
, JavaScript
, and CSS
– is retrieved with a single page load, or partial changes are performed loading new code on demand from web servers, usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page. Necessary updates to the page display may or may not involve interaction with a server. The term single-page application was coined by Steve Yen in 2005, though the concept was discussed at least as early as 2003.
Traditional web applications involve page changes, where the browser is required to fetch a new page from the server, in order to advance the interaction of the user with the application. But page changes in the browser disrupt the user experience, since there is a perceivable transition from one page, which has to be unloaded, to the next page, which has to be retrieved from the server and displayed from scratch. This can involve the unnecessary re-transmission and re-display of already existing unchanged page elements (e.g. a navigation bar, or results from a database query), and suffers from the fact that network latencies cannot be hidden from the user.
Single page applications address these issues by requiring no page change of the browser during an application session. All user interaction and changes of the application state are handled in the context of a single Web document. The user experience becomes more continuous and fluid, and network latencies can be hidden more easily. There are various techniques available to allow the browser to stay with a single page even when the application requires server communication, the most prominent currently being Ajax
techniques and other techniques like using iframe or script HTML elements. Other possibilities to achieve a similar effect are browser plug-in technologies such as Java applet
s or Flash
. Server requests usually involve loading new HTML markup to be inserted into the page by client JavaScript code or new JavaScript code with the required actions to perform partial updating.
Some SPAs may be executed from a local file using the file URI scheme
. This gives users the ability to download the SPA from a server and run the file from a local storage device, without depending on server connectivity. If such a SPA wants to store and update data, it must be self-modifying. That is, the SPA must be capable of writing itself to disk, including a representation of the state that is to be persisted. Such applications benefit from advances available with HTML5, particularly Web Storage.
With the advent of Ajax, single-page interface is becoming mainstream in intranet web applications with no Search Engine Optimization
(SEO), history navigation or accessibility requirements. Because of the lack of JavaScript execution on crawlers of all popular Web search engines, SEO has been one of the most prominent problems to adopt the single-page interface paradigm in public web sites, alongside the lack of history navigation (mainly using back and forward buttons of the web browser) very popular browsing technique of end users, apparently lost in single-page interface sites, and accessibility usually granted allowing the same functional behavior of the web site with JavaScript disabled. All of these problems have an effective solution and some web frameworks are being focused on this kind of single-page interface web sites. Regarding to web search engines, Google
's bots currently crawl URLs containing hash fragments starting with #!, this is important because use of hash fragments in URLs is the cornerstone technique to provide history navigation and "state" bookmarking in single-page web sites, but they are usually invisible to web search engines with no specific support of hash fragments as Google Search
provides.
A single-page interface web site or application is fully loaded in the initial page load or page zones are replaced with new page fragments loaded from server on demand. The latter approach is the most effective for big sites (when the equivalent page based web site would need a significative number of pages), to avoid loading too much code in the same time, in this case an analogy exists between "states" in the case of SPI and pages. Because "state navigation" in the same page is analogous to page navigation, in theory any page based web site could be converted to single-page replacing in the same page only the changed parts result of comparing consecutive pages in a non-SPI web site.
The single-page interface approach in web is very similar to the Single Document Interface
(SDI) presentation technique very popular in desktop, however typical requisites like SEO compatibility, accessibility and history navigation of public web sites make SPI development even more challenging.
Web application
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
or web site that fits on a single web page
Web page
A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...
.
In an SPA, either all necessary code – HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
, JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
, and CSS
CSS
-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...
– is retrieved with a single page load, or partial changes are performed loading new code on demand from web servers, usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page. Necessary updates to the page display may or may not involve interaction with a server. The term single-page application was coined by Steve Yen in 2005, though the concept was discussed at least as early as 2003.
Traditional web applications involve page changes, where the browser is required to fetch a new page from the server, in order to advance the interaction of the user with the application. But page changes in the browser disrupt the user experience, since there is a perceivable transition from one page, which has to be unloaded, to the next page, which has to be retrieved from the server and displayed from scratch. This can involve the unnecessary re-transmission and re-display of already existing unchanged page elements (e.g. a navigation bar, or results from a database query), and suffers from the fact that network latencies cannot be hidden from the user.
Single page applications address these issues by requiring no page change of the browser during an application session. All user interaction and changes of the application state are handled in the context of a single Web document. The user experience becomes more continuous and fluid, and network latencies can be hidden more easily. There are various techniques available to allow the browser to stay with a single page even when the application requires server communication, the most prominent currently being Ajax
Ajax (programming)
Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...
techniques and other techniques like using iframe or script HTML elements. Other possibilities to achieve a similar effect are browser plug-in technologies such as Java applet
Java applet
A Java applet is an applet delivered to users in the form of Java bytecode. Java applets can run in a Web browser using a Java Virtual Machine , or in Sun's AppletViewer, a stand-alone tool for testing applets...
s or Flash
Adobe Flash
Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...
. Server requests usually involve loading new HTML markup to be inserted into the page by client JavaScript code or new JavaScript code with the required actions to perform partial updating.
Some SPAs may be executed from a local file using the file URI scheme
File URI scheme
The file URI scheme is a URI scheme specified in RFC 1630 and RFC 1738, typically used to retrieve files from within one's own computer.- Format :A file URL takes the form of file://host/path...
. This gives users the ability to download the SPA from a server and run the file from a local storage device, without depending on server connectivity. If such a SPA wants to store and update data, it must be self-modifying. That is, the SPA must be capable of writing itself to disk, including a representation of the state that is to be persisted. Such applications benefit from advances available with HTML5, particularly Web Storage.
With the advent of Ajax, single-page interface is becoming mainstream in intranet web applications with no Search Engine Optimization
Search engine optimization
Search engine optimization is the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid search results...
(SEO), history navigation or accessibility requirements. Because of the lack of JavaScript execution on crawlers of all popular Web search engines, SEO has been one of the most prominent problems to adopt the single-page interface paradigm in public web sites, alongside the lack of history navigation (mainly using back and forward buttons of the web browser) very popular browsing technique of end users, apparently lost in single-page interface sites, and accessibility usually granted allowing the same functional behavior of the web site with JavaScript disabled. All of these problems have an effective solution and some web frameworks are being focused on this kind of single-page interface web sites. Regarding to web search engines, Google
Google
Google Inc. is an American multinational public corporation invested in Internet search, cloud computing, and advertising technologies. Google hosts and develops a number of Internet-based services and products, and generates profit primarily from advertising through its AdWords program...
's bots currently crawl URLs containing hash fragments starting with #!, this is important because use of hash fragments in URLs is the cornerstone technique to provide history navigation and "state" bookmarking in single-page web sites, but they are usually invisible to web search engines with no specific support of hash fragments as Google Search
Google search
Google or Google Web Search is a web search engine owned by Google Inc. Google Search is the most-used search engine on the World Wide Web, receiving several hundred million queries each day through its various services....
provides.
A single-page interface web site or application is fully loaded in the initial page load or page zones are replaced with new page fragments loaded from server on demand. The latter approach is the most effective for big sites (when the equivalent page based web site would need a significative number of pages), to avoid loading too much code in the same time, in this case an analogy exists between "states" in the case of SPI and pages. Because "state navigation" in the same page is analogous to page navigation, in theory any page based web site could be converted to single-page replacing in the same page only the changed parts result of comparing consecutive pages in a non-SPI web site.
The single-page interface approach in web is very similar to the Single Document Interface
Single document interface
In graphical user interfaces, a single document interface or SDI is a method of organizing graphical user interface applications into individual windows that the operating system's window manager handles separately. Each window contains its own menu or tool bar, and does not have a "background"...
(SDI) presentation technique very popular in desktop, however typical requisites like SEO compatibility, accessibility and history navigation of public web sites make SPI development even more challenging.
Client Side Libraries for Building Single Page Apps
- SugarSkull A lightweight client side router.
- Sammyjs A client side router in the form of a jquery plugin.
External links
- Single-page applications page with definitions and SPA examples
- Migrating Multi-page Web Applications to Single-page Ajax Interfaces (Delft University of Technology): http://arxiv.org/abs/cs/0610094
- The Single Page Interface Manifesto