User:Cardiffman/Single-page Application
Draft of a different page for the main wiki on Single-page application. I put this forward as a way to communicate ideas for modifying the existing page. I believe that sources or examples may be found for anything contentious.
The single-page application (SPA) is an implementation technique for dynamic websites. The technique may be thought of as maintaining the tuple (DOM, script state) continuously despite major changes to the screen appearance. The non-SPA model requires rebuilding the (DOM, script state) tuple as different pages are loaded.
SPA is
- A scripted dynamic page
- Some script libraries exist which can come close to eliminating the need for further JavaScript code to be written. A site written in such a way would still be running hundreds of lines of script.
- Can be initiated by a load from one or more URIs
- Using multiple URIs to load the SPA requires functionality called a router.
- The fact that multiple URIs may show in the URL bar or the fact that the user's browser history may show a sequence of URIs does not violate this model.
- Scripts or data that are defined initially or are added over time continue to be available as the application runs.
- Strongly concerned with continuity of context within the application model.
SPA is NOT
- Not merely a single URI
- Clearly a static page with no script of any kind has one URI.
- Not a collection of related pages implementing an application through a sequence of page loads.
- In such a collection of related pages, changing from one page to another causes an HTML page to load, formerly available scripts to be unloaded, scripts to be newly fetched, and state if any has to be reconstructed.
- Not strongly about whether user experience is smooth.
- Not by definition implemented using MVC.
- Of course having a good organizational principle doesn't hurt.
- Does not by definition use some particular framework or a framework from some class of frameworks.
Example
[edit]Imagine a video playback front-end. As the user performs various tasks a video should play continuously. This is easy enough if a video element does not have to be recreated continuously. This establishes a force in favor of a page that contains the video element and changes the UI around the video element without destroying it. The video element would be destroyed if the video program has to change, but this can be accomplished without reloading the page. Now suppose the user wants to see which videos are available. The user might press a certain defined key and in response, the UI moves the video element to one side and displays some sort of directory in the space made available. If the user decides not to change to a new video, they press some other defined key and the UI moves the video element back to full-screen status.
Alternatively, applications have been designed around such methods as frames. One frame might hold the same DOM and scripts continuously while the other frames might change over time. Since web sites are not commonly designed around framesets today, it would be unconventional to pursue such a technique.