What are some best practices for developing a multi-page application using modern JavaScript frameworks?
Multi-page Application
In a multi-page application, we utilize multiple templates with "template syntax" to retrieve backend data and handle AJAX (if necessary), while advanced UX features are often managed by jQuery.
Single Page Application
In a single page application, backend data is fetched through AJAX requests and all routing and frontend logic is handled by JavaScript. Typically, JS frameworks like Angular or React are used, along with task runners/bundlers such as webpack or gulp.
Hybrid Application
The hybrid app seems to be the most popular choice nowadays. What is the typical workflow when working on such an app? I have been unable to find any tutorials or guides on this topic.
To be more specific, imagine a web app where each page needs to be compiled and can share certain resources. Each page has its own JS routing, like wizards or subcomponents, and data is loaded during both page load and via AJAX.
For example, my web app may consist of 3 pages:
- Guest page - providing limited content to website users to encourage them to sign up
- User page - offering full content to signed-up users, with additional resources beyond the guest content
- Admin page - sharing only styles and the core functionality of the web app
Task Runners/Bundlers
In webpack, is there a way to define multiple entry and output points? Perhaps having multiple webpack/gulp configurations would make more sense. If I have numerous pages, do I need to create webpack/gulp configurations for each one, even if some could be identical? How should this build process be executed?
Shared Resources
If a browser already has a cached JS bundle with the same hash, such as bundle.a2k4jn2.js, within the same domain but different address, will it be loaded? How can this behavior be specified in tools like webpack or gulp? I've heard about the CommonsChunkPlugin, but I'm unsure about how to use it or if I'm heading in the right direction.
Templates
What if I want to load some backend data not via AJAX, but during the initial page load? While every templating engine allows us to include native code directly into HTML templates, situations where routing is managed by JS and template tags are not visible until after initial loading exist. Sometimes, conflicts can arise when server-side and client-side template engines use the same special tag, like Blade and Angular.
Directory Structure
In a hybrid app, the frontend and backend are closely linked. Sharing JS in a hybrid app could result in complex imports (in ES6 or HTML script tags). How can complexity be kept at bay?
Deployment
When it comes to deploying an application, Java makes it simple by specifying directories (compiled pages) in build tools like Maven or Gradle, which are then copied to a JAR/WAR file. However, PHP source code is not compiled. Is there a sensible solution to keep the "JS source" separate from production, other than writing a custom batch/bash script?
Summary
I've referenced specific technologies and frameworks here, but my focus is on general approaches to managing a web app rather than simply how-to instructions for particular tools. That being said, I welcome any code examples that could aid in understanding.