Mini-SPA, a formalized architecture for web applications
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.
Original article, 2018:
Why should you care?
This is where a simplified approach could greatly benefit us. In walk the Mini-SPA pattern. It’s a pattern of development meant to simplify frontend development while being compatible with backend MVC 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.”
Let’s follow a browser request to see the full picture:
- User visits your web application.
- The request hits your backend router which servers a HTML template.
- 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.
- The mini-SPA then makes AJAX requests to the same backend router to populate it’s page. (JSON API)
- 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.
Maintainability — A single page isn’t doing too much. This makes it easy to find issues and fix them. It makes it easier to find the code you are looking for. It makes it easier to reason about the page.
Learning curve — This is an easy pattern to teach to new developers working on the project because it’s not complicated. You don’t need to worry about long lasting state since each page only lives as long as the user is on it.
Flexibility— Since it’s not a SPA, you can use multiple frameworks without any conflicts. Have a page that doesn’t require a Mini-SPA approach? No problem. Want to try a new library? Again, no problem.
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.
I hope you benefit from this excellent approach.
This pattern would not be possible without the work of Kellen Presley, a developer at PrimeRevenue in Atlanta, GA, 2018.