iteration
The SPA Episode (Single Page Apps)
Episode Summary
In this episode we walk through pros / cons of SPA's. Pros / Cons, when to use them, what they are good at, frameworks, alternatives and more.
Episode Notes
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
- The main UI is built & updated in JavaScript using React or something similar.
- 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?
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