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.

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/