Mini-SPA, a formalized architecture for web applications

For a more extensive solution please see: Jamstack.org

Update 12/30/2020

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?

Let’s follow a browser request to see the full picture:

  1. User visits your web application.
  2. The request hits your backend router which servers a HTML template.
  3. 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.
  4. The mini-SPA then makes AJAX requests to the same backend router to populate it’s page. (JSON API)
  5. When a user clicks a link we start from Step #1 again.

That’s it.

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

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.

Look at all the things you won’t need: frontend router, frontend state manager, or a build tool such as Webpack. You’re serving static HTML, CSS, and Javascript. There’s no build step.

Conclusion

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.

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