DEV Community

Iteration Podcast

The SPA Episode (Single Page Apps)

John: Welcome to Iteration, a podcast about programming, development, and design.

  • John Intro — My name is John and I am a software developer for a home services startup.
  • JP Intro — Hi, I'm JP and I am a software developer at a small analytics startup

https://macwright.com/2020/05/10/spa-fatigue.html

Topics / Guiding Questions

What's a SPA?

From the article

  1. The main UI is built & updated in JavaScript using React or something similar.
  2. The backend is an API that that application makes requests against.

The more techincal one:

https://developer.mozilla.org/en-US/docs/Glossary/SPA

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as [XMLHttpRequest]() and Fetch when different content is to be shown.

This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.

Why do developers choose SPAs?

  •  

Do end-users care about SPAs?

What SPAs have you worked on / maintained?

  • 0 —

When should you reach for a SPA?

  • That's the right use case: Desktop app to the web.
  • Breaks REST might be a good time to consider
  • Community

What's wrong with this SPA's?

Increased complexity — Development and deployment

  • Often times: 2 repositories, 2 languages or frameworks
    • (Rails + Vue)
    • (Node + Angular)
    • (Rails + React)

SEO + Speed — Have to do "Server Side Rendering"

  • This reminds me of the light switches for "Smart" light bulbs. You've increased the complexity by a factor of 10 to get the exact same results.

Maintainability? Stability?

If not a SPA then what? (Is this a different Episode?)

What's good about server rendered?

  • How much you get for free
  • Async fetching
  • State management
  • URL's just work
  • Strong Conventions
  • Stable minimal maintenance

What's bad about Server Rendered?

  • Page Reload
  • Can feel clunky
  • Less Reactive
  • Mobile App — Now what? SPA lays a stronger groundwork

What's good about SPA's

  • Benefits are for the user
  • Developer Ego's
  • Data foundations
  • Breaks CRUD
  • Community
  • Pushing technology forward is a good thing.

What's bad about SPA's

  • How much of a pain in the ass it is to Manage URL's
  • Complexity — Front end + Back end
  • Authentication
  • Image Upload
  • Multiple API endpoints for a single page
  • State is way harder in a SPA
  • Debugging

Closing Thoughts

  • SPA's are great when you are breaking "REST / CRUD"
  • SPA's are great when you need multiple consumers of the same data
  • This is highly personal, you gotta go with what you love.
  • WiFi

Picks

Episode source