MPA or Multi Page Architecture.
I know there are some beginners on here so for those who don’t know there are two basic types of hybrid (html5) architectures:
- SPA - In a Single Page Architecture, all of your app pages are held in one file which is usually index.html. When a user goes to a page, the current page is hidden and the new page is unhidden (displayed). This usually involves some form of animation that makes it look like a page is coming in from the left or right.
- MPA - In a Multi Page Architecture, only one page is in the index.html and the others reside externally. The external pages don’t have all the “stuff” that’s in the index.html file. For instance the head and body tags are missing as is the javascript.
In either case, when the user navigates from one page to the next, this navigation is handled by a router. JQuery Mobile has a GREAT router that works with both SPA and MPA apps. React as a router as does Vue. However, once you get away from those frameworks, you loose the router. For instance, Bootstrap doesn’t have a router.
There are several open source SPA routers available but there are no MPA routers.
So, the question I get asked the most is “Why MPA? Why not just use SPA?” The answer to that has to do with size. The webview that runs your app only supports “about” 2700 HTML elements. This includes everything not displayed such as all those div and span elements. In one app I have 20 pages plus the index.html and I still have 3 pages left to write. Each of those pages also have javascript files and the index.html file has 8 javascript files PLUS all the .css files. An app can grow quite large and, when that happens, when the app loads (if it will load) the user interface looks like hell and it gives a very bad user experience.
Granted, most people only use a few pages (I think the study was 6 or 8) so they’re generally fine but once you’ve written several apps you start adding more pages (help, feedback, tutorials, about, settings etc. etc. etc.) and the size can stack up quickly. Also, why keep all these pages in memory when they’re not used very often? For instance, how often do you think a user will run the tutorial? Once? Twice? (if more than twice you may want to rethink your design a bit.)