[2] Stuart Morris, a programming student at Cardiff University, Wales, wrote the self-contained website at slashdotslash.com with the same goals and functions in April 2002,[3] and later the same year Lucas Birdeau, Kevin Hakman, Michael Peachey and Clifford Yeh described a single-page application implementation in US patent 8,136,109.
Mature free libraries are available that support the building of a SPA, reducing the amount of JavaScript code developers have to write.
Web browser JavaScript frameworks and libraries, such as Angular, Ember.js, ExtJS, Knockout.js, Meteor.js, React, Vue.js, and Svelte have adopted SPA principles.
These frameworks often extend or enhance features available through native web technologies, such as routing, component-based development, and state management.
While native web standards, including Web Components, modern JavaScript APIs like Fetch and ES Modules, and browser capabilities like Shadow DOM, have advanced significantly, frameworks remain widely used for their ability to enhance developer productivity, offer structured patterns for large-scale applications, simplify handling edge cases, and provide tools for performance optimization.
[9][10][11] Frameworks can introduce abstraction layers that may contribute to performance overhead, larger bundle sizes, and increased complexity.
While these advancements improve rendering efficiency and resource management, their benefits depend on the specific application and implementation context.
Framework choice depends on an application’s requirements, including the team’s expertise, performance goals, and development priorities.
[1] Ajax involves using asynchronous requests to a server for XML or JSON data, such as with JavaScript's XMLHttpRequest or more modern fetch() (since 2017), or the deprecated ActiveX Object.
[16] Although this method is outdated, asynchronous calls to the server may also be achieved using browser plug-in technologies such as Silverlight, Flash, or Java applets.
In the case where HTML is returned by the server, JavaScript on the client updates a partial area of the DOM (Document Object Model).
Special behavior must be implemented by the SPA site to allow extraction of relevant metadata by the search engine's crawler.
These "hash-bang" URIs have been considered problematic by a number of writers including Jeni Tennison at the W3C because they make pages inaccessible to those who do not have JavaScript activated in their browser.
In 2018, Google introduced dynamic rendering as another option for sites wishing to offer crawlers a non-JavaScript heavy version of a page for indexing purposes.
This approach involves your web server detecting crawlers (via the user agent) and routing them to a renderer, from which they are then served a simpler version of HTML content.
Blogs, support forums, and other traditional page redraw artifacts often sit around the SPA that can seed search engines with relevant terms.
To avoid these problems, applications can use UI data bindings or granular DOM manipulation to only update the appropriate parts of the page instead of re-rendering entire templates.
The traditional solution for SPAs has been to change the browser URL's hash fragment identifier in accord with the current screen state.
As long as the SPA is capable of resurrecting the same screen state from information contained within the URL hash, the expected back-button behavior is retained.
To further address this issue, the HTML specification has introduced pushState and replaceState providing programmatic access to the actual URL and browser history.
Problems can include the lack of hypertext links, memory usage concerns and resources loaded by the SPA typically being made available by an Application Programming Interface or API.
The SPA approach on the web is similar to the single-document interface (SDI) presentation technique popular in native desktop applications.