5.4 Single Page Applications

  1. Motivations
    • Example of non-SPA - Weather in Kamloops Try '7 Days' and '14 Days' options.
    • When the result of 'SearchQuestions' is displayed in TRUQA, all the content for MainPage should be sent from the server and redisplayed.
    • Why isn't it possible to get just data from the server and display it?
  2. What is SPA?
    • Read the first paragraph in Single-page application.
    • A single web page with all necessary code of HTML, CSS, and JS is loaded.
    • This single web page provides the users with UI.
    • Responding to the user's actions, requests are sent to the server-side script, and data come back. Now the server works like a library or a service provider. APIs can be defined.
    • With the data sent from the server, some content can be changed/deleted or new content can be added.
    • The control is done at the client-side, not by the server-side script.
    • Thin server architecture
    • Traditional model vs. SPA
  3. Related technical approaches
    • iFrame
    • Server-sent event
    • Ajax
    • JSON and XML
    • WebSockets - real time bidirectional communications; statefull architecture; discussed in COMP 4620
  4. Issues
      From "Challenges with the SPA model" in https://en.wikipedia.org/wiki/Single-page_application:
    • Browser history - Forward/back buttons in SPA?
    • Search engine optimization (SEO) - not discussed in this course
    • Analytics - not discussed in this course
    • Speed of initial load
  5. Some review questions and learning outcomes
    • Define what SPA is.
    • List the four technical approaches used in SPA.