How to work with hybrid webapp (MPA and SPA combined)

Question

What are good practices about building a multiple page application using modern JS frameworks?

Multiple page application

In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.

Single page application

In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.

Hybrid application

But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.

So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.

For example my webapp would have 3 pages:

• guest page - would provide website user with limited content and attract him to sign up
• user - would provide signed website user with full content, resources would be extended guest content
• admin - shares only styles and webapp “core”

Task Runners/Bundlers

For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?

Sharing resources

Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.

Templates

What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.

Directory structure

I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.

Deploy

What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script

Summary

I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.

Oxyacid

So what about angular in netflix and react in Facebook arent they example of what I'm talking about, I can quote plenty of webpages like these – Oxyacid

I need an answer to this? did you come up with something.. – Streamliner

I'm also interested in mixing MPA and SPA, Vue is progressive, this means we can use it from a CDN like jQuery, even replace jQuery with Vue when working with Bootstrap. Then replace parts of the MPA with SPA, it is great to migrate from MPA to SPA. I still haven't found good examples of these hybrid scenarios. In this blog: Mixing MPA and SPA: worst of both worlds the author does not recommend this mix. – Acidity

@Acidity - for the record, that blog post is 6 years old, which might as well be a hundred years old. – Unattended

Use history.pushState – Barcellona

Answer 1

Their is a lot in this question, as a starting point you can define multiple entry points in webpack.

https://webpack.js.org/concepts/entry-points/

If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.

The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here

https://webpack.js.org/guides/code-splitting/

Decarburize

If you were to implement a web app which also has other pages like terms of services – Pulsatile

What would be the directory structure and how would they share resources if there was another web app to be implemented on a different page ! – Pulsatile

Using node as backend , the app totally runs on client browser and makes few Ajax requests to server when needed , has two web apps & different pages for home,privacy policy , etc... What I don't know is , how to go about using the different tools to setup the whole thing as ONE – Pulsatile

You would make an entry point for each independent page in your WebPack config – Decarburize

Directory structure is really depended on what app framework you are using. If your doing React, then Create React App is a good example. It puts static pages in a html folder and the SPA in src – Decarburize

Where I have worked on projects like this in the past, we have had separate build processes for different parts of the app and the used a deployment tool to bring everything together for building the production system. I don’t think their is ONE tool to rule them all, rather you have to create production pipeline that brings the different things together. – Decarburize

Answer 2

Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview

Wormhole

This works for a single page , Architecture , Directory Structure & Organization for multiple SPA's in one single app (parent app/website) in javascript – Pulsatile