Single Page Application (SPA)

Lernziele

• Was ist eine Single Page Application (SPA)?
• Wie funktioniert einer SPA (in der Theorie)?
• Was sind Vorteile und Nachteile einer SPA?

“A single-page application is exactly what its name implies: a JavaScript-driven web application that requires only a single page load.”

JavaScript - The Definitive Guide

5th ed., O'Reilly, Sebastopol, CA, 2006

Single Page Application Konzept

          
              @startuml
              participant "Client" as client
              participant "Web Server" as webServer
              participant "Web Service" as webService
  
              group Initializing
              activate client
              client -> webServer: GET /index.html
              activate webServer
              webServer -> client: index.html
              webServer -> client: styles.css
              webServer -> client: script.js
              deactivate webServer
              client -> client: start application
              end
  
              group Runtime
              client -> webService: GET /some-id
              deactivate client
              activate webService
              webService -> client: some-data
              deactivate webService
              activate client
              client -> client: rerender
              end
              @enduml
          
      

Wieso gibt es SPA's?

Findet ihr Gründe dafür, warum man sowas machen sollte?

• Reduktion der übertragenen Daten
• Bessere User Experience
• Weniger Serverressourcen
• Session clientseitig (Server ist stateless)
• Hybride Anwendung auch mobil einsetzbar

Lernziele

• Was ist eine Single Page Application (SPA)?
• Wie funktioniert einer SPA (in der Theorie)?
• Was sind Vorteile und Nachteile einer SPA?

Das nächste Mal ...

• Backend für eine SPA
• Wie baut man einen Web Service?