Jump to content

Single-page application: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
No edit summary
No edit summary
Line 1: Line 1:
A '''single-page application''' (SPA), also known asuyiop '''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 <ref name="Flanagan2006">Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., ''O'Reilly, Sebastopol, CA, 2006'', p.497</ref>, 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.<ref>{{cite web | url=http://devedge-temp.mozilla.org/viewsource/2003/inner-browsing/index_en.html | title=Inner-Browsing: Extending Web Browsing the Navigation Paradigm | accessdate=2011-2-3}}</ref>
A '''single-page application''' ([[SPA]]), also known asuyiop '''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 <ref name="Flanagan2006">Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., ''O'Reilly, Sebastopol, CA, 2006'', p.497</ref>, 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.<ref>{{cite web | url=http://devedge-temp.mozilla.org/viewsource/2003/inner-browsing/index_en.html | title=Inner-Browsing: Extending Web Browsing the Navigation Paradigm | accessdate=2011-2-3}}</ref>


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 <ref name="spimanifesto">{{cite web | url=http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php | title=The Single Page Interface Manifesto | accessdate=2010-11-12}}</ref>.
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 <ref name="spimanifesto">{{cite web | url=http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php | title=The Single Page Interface Manifesto | accessdate=2010-11-12}}</ref>.

Revision as of 05:08, 5 July 2011

A single-page application (SPA), also known asuyiop 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 [1], 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.[2]

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 [3].

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 [4]. 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 [1] 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 applets 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[3] and some web frameworks are being focused on this kind of single-page interface web sites[5]. Regarding to web search engines, Google's bots currently crawl URLs containing hash fragments starting with #! [6], 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 singe-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.

TiddlyWiki or Sudoku are known examples of an SPA.

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.

Notes and References

  1. ^ a b Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497
  2. ^ "Inner-Browsing: Extending Web Browsing the Navigation Paradigm". Retrieved 2011-2-3. {{cite web}}: Check date values in: |accessdate= (help)
  3. ^ a b "The Single Page Interface Manifesto". Retrieved 2010-11-12.
  4. ^ "TheServerSide.com News: The Single Page Interface Manifesto". Retrieved 2010-11-12.
  5. ^ "Tutorial: Single Page Interface Web Site With ItsNat". Retrieved 2011-1-13. {{cite web}}: Check date values in: |accessdate= (help)
  6. ^ "Making AJAX Applications Crawlable". Retrieved 2011-1-13. {{cite web}}: Check date values in: |accessdate= (help)
Retrieved from "https://en.wikipedia.org/w/index.php?title=Single-page_application&oldid=437818639"