By Carrie Kellenberger from Banciao, Taiwan — San-Zhr Pod Village Uploaded by Pbdragonwang, CC BY 2.0

The MPA web application architecture.

I’d like to introduce a new pattern for front-end web application architecture. Multi-page applications.

But first... what do we have today?

SPA (single-page applications) are the current best practice. They’re promoted by most and have significant advantages over traditional server-side rendered content. They’re:

  • Fast.
  • They’re compatible with progressive web apps (application shell architecture).
  • They provide a good user experience and are compatible with SEO and accessibility (if you’re willing to jump through a few hoops).

However, they have a few downsides:

  • They’re monolithic.
  • Time consuming to upgrade to new versions of a framework.
  • Promote framework lock-in.

Why not consider what I’m calling the multi-page application pattern? This pattern promotes splitting up your application into multiple logical sections. Each of these sections are loaded the traditional way with a request to the server. Sure, there is a fine balance between too many and too few pages in your application.

MPAs benefits are the same as SPAs. However, they eschew the pitfalls of SPA as they make it easy to upgrade a particular part of your application to a new version of your framework or even an entirely new framework.

Want to give a new framework a try? Go for it. Take a part of your application and rewrite it in a new framework.

Is a particular part of your application more suitable to a particular framework over another? Great, use two frameworks to build your application.

Migrating from one major version to another? Great. Produce higher quality, shorter releases by migrating one page at a time.

Each page within an MPA would share:

  • Common authentication practices.
  • Common UI (navigation elements for example).
  • Server-side integrations (APIs).
  • Progressive web app code.

You’ll want to be careful not to spread yourself too thin with framework and version choices. Too many versions of the same framework and too many frameworks across your app would likely become unmanageable.

Why not follow the back-end oriented microservices architecture and apply it to your front-end architecture in the form of an MPA.

Get started. Build an MPA today.