Mini-SPA, a formalized architecture for web applications

For a more extensive solution please see: Jamstack.org

Update 12/30/2020

When I wrote this article, I had no name to give this approach so Mini-SPA was used. The goals of Mini-SPA were: performance, simplicity, and developer productivity. To that end, another group of devs has independently formalized the architecture and given it a name, Jamstack.org. They have gone well beyond my initial efforts to include pre-rendering, static site hosting, and much more. To support their efforts, I’ve added this update and retitled the article.

Why should you care?

Writing JavaScript is getting more and more complicated. It takes weeks instead of days to get feature out. You read through documentation for days only gaining a small familiarity with frontend frameworks, libraries, and build tools needed. Frontend frameworks have made this increasingly confusing. If you want to hear more about the pain then read How it feels to learn JavaScript in 2016 and A Framework Author’s Case Against Frameworks.

What is Mini-SPA?

Mini-SPA is an approach to frontend development which takes the best of two worlds: frontend and backend frameworks. The main principal is this: “Every page you serve is a Mini-SPA application.”

  1. The request hits your backend router which servers a HTML template.
  2. The template is a mini-SPA. At a minimum it loads the framework of your choice (Vue, React, Angular, etc.), the logic for the page the user is requesting, and any components needed by the page.
  3. The mini-SPA then makes AJAX requests to the same backend router to populate it’s page. (JSON API)
  4. When a user clicks a link we start from Step #1 again.

What are the benefits of using a Mini-SPA architecture?

Simplicity — There is no need to load a frontend router, or a state manager library such as Vuex and Redux. Your whole architecture get’s much easy to work with but you do not lose the benefits of a frontend framework. This benefit is key.

Conclusion

While it takes a little effort to set up your backend to serve the templates properly it’s a small price to pay for simplicity. I’m sure there are details I’m forgetting to mention I feel confident you won’t have trouble setting this up.

Part time mad computer scientist, full time lover of the extraordinary.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store