Understanding Single-Page Applications

Sep 23, 2024

Single-Page Applications (SPAs) Lecture Notes

Introduction

  • Presenter: Shad Sluder, Professor of Software Development at Grand Canyon University
  • Topic: Single-page Applications (SPAs) and their advantages

Overview of Full-Stack Applications

  • N-Layer Design:
    • Top Layer: Front-end
    • Bottom Layer: Database
    • Multiple layers in between
  • Tutorials available for building full-stack applications in different languages (Java, C#, PHP, JavaScript)

Types of Applications

  • Two Main Types:
    1. Full Page Application
    2. Single Page Application
  • Focus: Differences between Full Page Apps and Single Page Apps (SPAs)

Traditional Web App Cycle

  1. Client requests data (GET request)
  2. Server renders a page and responds with HTML
  3. Browser parses and displays HTML
  4. User submits data (POST request)
  5. Server processes the request and generates a new HTML page
  6. Browser refreshes and displays new data
    • Drawback: Full page refreshes (as illustrated by the blue arrows pointing to the client)

Single Page Application (SPA) Cycle

  1. Client initiates a GET request for a page
  2. Server responds with HTML for the initial page
  3. JavaScript manages form submissions
    • No full page refresh: Uses Ajax for requests
  4. Client sends a request to server using Ajax (e.g., ajax.post)
  5. Server responds with JSON data instead of HTML
    • Advantage: Only sends necessary data, reducing the volume of data sent
  6. Client processes JSON and updates the page dynamically without a full refresh
    • Partial updates: Only specific parts of the page are updated

Advantages of Single Page Applications

  • Improved performance due to reduced data transfer
  • Better user experience with smooth transitions and updates
  • Less work for the server to generate HTML

Client-Side Programming for SPAs

  • JavaScript Tools:
    • Older approach: jQuery
    • Modern frameworks:
      • React (most popular)
      • Vue
      • Angular
    • Other options include Blazor with C# (web assembly)
  • Framework choice depends on personal or company preference

Conclusion

  • Encouragement to explore further tutorials for full-stack application development
  • Resources linked in the video for additional learning opportunities