Development mode without node or npm

Describe your motivation

When you are starting an application in development mode, a couple of things that are not fast have to happen:

1. If there is no node installed or the installed node is not of a suitable version, node needs to be installed
2. The modules defined in package.json needs to be installed using npm install which downloads and copies the files into node_modules. This is slow even if the files have been previously downloaded and only need to be copied into node_modules
3. Vite is started and processes the files in frontend and used files from node_modules into a suitable format so the browser can load them

Describe the solution you’d like

There should be a serverless development mode that mostly skips all 3 mentioned tasks.

The serverless development mode would load frontend files from two possible locations:

1. A “default app bundle” which contains all Vaadin components and possibly some other components. It is produced as part of the Flow/Vaadin build for each version and the JavaScript/resources are included in a jar. A Flow application without frontend customizations, templates or addons (which do frontend customizations) can use this bundle directly for all development and never need any tooling for the frontend when developing.
2. A bundle that is maintained as part of the project, inside src/main/resources

How this would work is:

1. When starting the server, check if the default app bundle can be used (no extra dependencies or newer dependency versions, no extra frontend files contributed from addons or the frontend folder). If ok, load the default app bundle in the browser
2. If there are extra frontend files or dependency changes, check if there is an app bundle in src/main/resources. If there is, check if that has been compiled with the same frontend files and dependencies that are currently in use. If there is a match, load this bundle in the browser.
3. If there are modifications and the app bundle is not in sync, remove the app bundle, install frontend tooling, compile a new bundle into src/main/resources. Then use the new bundle.

Use cases where this is good:

1. You start a new project - no need for any frontend tooling except checking the frontend files and dependencies in the project and comparing to the default app bundle. Startup time reduced dramatically.
2. You add an add-on to a project - the person adding the addon restarts the server which recompiles the bundle. It takes some time. The addon dependency + new bundle is commited to the repository and the other developers in the project do not need to compile the frontend at all.
3. You customize a file in the frontend folder. Same as adding an addon. You compile once, other devs do not.

Use cases which are bad unless we make them good:

1. The theme is processed as part of the frontend bundle. We would need to change that so that the theme can be separately processed and modified/loaded without a frontend build.
2. You modify files inside the frontend folder many times per day, e.g. you are using templates. Before you can see the change, you recompile the frontend. This is much slower than a Vite hot reload would be as the Vite server only recompiles one file. If you are using templates, you should use the dev server dev mode and not the serverless mode. This can probably be improved also but would be a separate feature on top of this.

Additional context

This is what starting a new app potentially could look like

https://user-images.githubusercontent.com/260340/190645365-89bf01ec-92f6-45ff-86bf-10b36c587c99.mov

[knoobie]

But I can tell from my work with clients that they rarely have issues with node/npm.

Personally I never had problems as well that couldn’t be solved by a little bit of googling but we’ve seen so many problems here, on stack overflow or discord where people can’t handle it or it randomly broke - often I haven’t seen these people coming back to ask other questions, which got me thinking if they just stopped using Vaadin because of this bad start.

welcome as long as it no complicate the overall framework.

I think the introduction of automatically downloading and installing / updating node/npm was already a huge complexity for the framework.

But “forcing” people to install both by hand is really hard as well to gather new people. So this new mode could be a way to get rid of this complexity (I don’t think that Artur planned this, but it would be possible) by providing a (hopefully) way more simpler way for people to build their app locally.

But still allowing people who want to do “advanced” / frontend stuff with the option to do so with a configuration change and automatically or manuel installation of node/npm if needed.

[simasch]

1. I support the statement of @knoobie that src/main/resources is the wrong location. Everything in there will be copied into the JAR/WAR.

2. Please don’t call it “serverless development mode” because serverless is FaaS like AWS Lambda.