https://nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/ Read the Tea Leaves Software and other dark arts, by Nolan Lawson [Search this Blog ] Search * Home * Apps * Code * Talks * About << The struggle of using native emoji on the web 21 May The balance has shifted away from SPAs Posted May 21, 2022 by Nolan Lawson in Web. 2 Comments There's a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years ago. Hip new frameworks like Astro, Qwik, and Elder.js are touting their MPA capabilities with "0kB JavaScript by default." Blog posts are making the rounds listing all the challenges with SPAs: history, focus management, scroll restoration, Cmd/Ctrl-click, memory leaks, etc. Gleeful potshots are being taken against SPAs. I think what's less discussed, though, is how the context has changed in recent years to give MPAs more of an upper hand against SPAs. In particular: 1. Chrome implemented paint holding - no more "flash of white" when navigating between MPA pages. (Safari already did this.) 2. Chrome implemented back-forward caching - now all major browsers have this optimization, which makes navigating back and forth in an MPA almost instant. 3. Service Workers - once experimental, now effectively 100% available for those of us targeting modern browsers - allow for offline navigation without needing to implement a client-side router (and all the complexity therein). 4. Shared Element Transitions, if accepted and implemented across browsers, would also give us a way to animate between MPA navigations - something previously only possible (although difficult) with SPAs. This is not to say that SPAs don't have their place. Rich Harris has a great talk on "transitional apps," which outlines some reasons you may still want to go with an SPA. For instance, you might want an omnipresent element that survives page navigations, such as an audio/ video player or a chat widget. Or you may have an infinite-loading list that, on pressing the back button, returns to the previous position in the list. Even teams that are not explicitly using these features may still choose to go with an SPA, just because of the "unknown" factor. "What if we want to implement navigation animations some day?" "What if we want to add an omnipresent video player?" "What if there's some customization we want that's not supported by existing browser APIs?" Choosing an MPA is a big architectural decision that may effectively cut off the future possibility of taking control of the page in cases where the browser APIs are not quite up to snuff. At the end of the day, an SPA gives you full control, and many teams are hesitant to give that up. That said, we've seen a similar scenario play out before. For a long time, jQuery provided APIs that the browser didn't, and teams that wanted to sleep soundly at night chose jQuery. Eventually browsers caught up, giving us APIs like querySelector and fetch, and jQuery started to seem like unnecessary baggage. I suspect a similar story may play out with SPAs. To illustrate, let's consider Rich's examples of things you'd "need" an SPA for: * Omnipresent chat widget: use Shared Element Transitions to keep the widget painted during MPA navigations. * Infinite list that restores scroll position on back button: use content-visibility and maybe store the state in the Service Worker if necessary. * Omnipresent audio/video player that keeps playing during navigations: not possible today in an MPA, but who knows? Maybe the Picture-in-Picture API will support this someday. To be clear, though, I don't think SPAs are going to go away entirely. I'm not sure how you could reasonably implement something like Photoshop or Figma as an MPA. But if new browser APIs and features keep landing that slowly chip away at SPAs' advantages, then more and more teams in the future will probably choose to build MPAs. Personally I think it's exciting that we have so many options available to us (and they're all so much better than they were 10 years ago!). I hope folks keep an open mind, and keep pushing both SPAs and MPAs (and "transitional apps," or whatever we're going to call the next thing) to be better in the future. Related 2 responses to this post. 1. # Posted by Carson Gross on May 21, 2022 at 11:50 AM I propose the term Hypermedia Driven Applications (HDAs) for a new generation of web apps built using both the old, web 1.0 approach, and not-really-new-but-resurging approach of using javascript to augment browser hypermedia capabilities: https://htmx.org/essays/hypermedia-driven-applications/ libs like turbo.dev, htmx and unpoly all fall into this category and attempt to enhance the native hypermedia abilities of browsers rather than replace the hypermedia model with what amounts to a thick-client-talking-to-a-data-api approach. Reply + # Posted by Nolan Lawson on May 21, 2022 at 12:38 PM Yeah, I think these hybrid approaches are super interesting. The lines will probably get increasingly blurred in the future. For me, the bright dividing line between MPAs and SPAs is whether it has a client-side router. I believe Turbolinks is an SPA by this definition, but HTMX is not. Although more and more frameworks might just make it optional, which would blur the lines further. Reply Leave a Reply Cancel reply Enter your comment here... [ ] Fill in your details below or click an icon to log in: * * * * Gravatar Email (required) (Address never made public) [ ] Name (required) [ ] Website [ ] WordPress.com Logo You are commenting using your WordPress.com account. ( Log Out / Change ) Twitter picture You are commenting using your Twitter account. ( Log Out / Change ) Facebook photo You are commenting using your Facebook account. ( Log Out / Change ) Cancel Connecting to %s [ ] Notify me of new comments via email. [ ] Notify me of new posts via email. [Post Comment] [ ] [ ] [ ] [ ] [ ] [ ] [ ] D[ ] This site uses Akismet to reduce spam. Learn how your comment data is processed. Recent Posts * The balance has shifted away from SPAs * The struggle of using native emoji on the web * Five years of quitting Twitter * Memory leaks: the forgotten side of web performance * 2021 book review About Me Nolan Lawson - photo of me flashing a peace sign Hi, I'm Nolan. I'm a web developer living in Seattle and working for Salesforce. Opinions expressed in this blog are mine and frequently wrong. Archives * May 2022 (1) * April 2022 (1) * February 2022 (1) * January 2022 (1) * December 2021 (3) * September 2021 (1) * August 2021 (6) * February 2021 (2) * January 2021 (2) * December 2020 (1) * July 2020 (1) * June 2020 (1) * May 2020 (2) * February 2020 (1) * December 2019 (1) * November 2019 (1) * September 2019 (1) * August 2019 (2) * June 2019 (4) * May 2019 (3) * February 2019 (2) * January 2019 (1) * November 2018 (1) * September 2018 (5) * August 2018 (1) * May 2018 (1) * April 2018 (1) * March 2018 (1) * January 2018 (1) * December 2017 (1) * November 2017 (2) * October 2017 (1) * August 2017 (1) * May 2017 (1) * March 2017 (1) * January 2017 (1) * October 2016 (1) * August 2016 (1) * June 2016 (1) * April 2016 (1) * February 2016 (2) * December 2015 (1) * October 2015 (1) * September 2015 (1) * July 2015 (1) * June 2015 (2) * October 2014 (1) * September 2014 (1) * April 2014 (1) * March 2014 (1) * December 2013 (2) * November 2013 (3) * August 2013 (1) * May 2013 (3) * January 2013 (1) * December 2012 (1) * November 2012 (1) * October 2012 (1) * September 2012 (3) * June 2012 (2) * March 2012 (3) * February 2012 (1) * January 2012 (1) * November 2011 (1) * August 2011 (1) * July 2011 (1) * June 2011 (3) * May 2011 (2) * April 2011 (4) * March 2011 (1) Tags accessibility alogcat android android market apple app tracker blobs boost bootstrap browsers bug reports catlog chord reader code contacts continuous integration copyright couch apps couchdb couchdroid databases developers development grails html5 indexeddb information retrieval japanese name converter javascript jenkins keepscore listview localstorage logcat logviewer lucene mobile web modules nginx nlp node nodejs npm offline-first open source passwords performance pokedroid pouchdb pouchdroid query expansion relatedness calculator relatedness coefficient s3 safari satire sectioned listview security semver social media socket.io software development solr supersaiyanscrollview synonyms twitter ui design ultimate crossword w3c webapp webapps web platform web sockets websql web workers Links * Mastodon * GitHub * npm * Keybase Blog at WordPress.com. * Follow Following + [05fe10] Read the Tea Leaves Join 1,171 other followers [ ] Sign me up + Already have a WordPress.com account? Log in now. * + [05fe10] Read the Tea Leaves + Customize + Follow Following + Sign up + Log in + Copy shortlink + Report this content + View post in Reader + Manage subscriptions + Collapse this bar [b]