PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder: Timo Stollenwerk (@tisto)

@sneridagh UPDATE 02/01/2025

I've been exploring the actual implementation of this PLIP during the last months. I want to share my experience and findings of this task. You can find the result of the PoC I've managed to put together in #6543. If you want to try it, you are welcome to do so.

If you want the TL;DR summary, jump to the "conclussion" section if you want to skip the nitty gritty details.

The PoC works, both in the client and in SSR, RAZZLE has been removed from the build, and Volto runs powered with Vite. We created a Vite plugin that had all the customizations that we did to the RAZZLE build. We had to rewrite some parts of Volto, because how Vite works internally, and because we were using some libraries that were Webpack-only.

• Remove @loadable/component and start using React.lazy instead.
• Remove all the barrel imports, move to use direct imports everywhere.
• Swich the use of some legacy libraries that are not ESM-ready to a more modern ones

We discovered in the process that AsyncConnect (the library that makes possible Redux requests in SSR) was incompatible with React.lazy so we cannot lazy load any of the routes, and that we will have to remove it in favor of the new data acqurire system described in #6324 and #4347.

At the same time, while trying to start to fix the Cypress tests (since it was the next step after the build "worked"), that I realised that all the component lifecycle rendering timings were off. React.lazy and Suspense does its job well, but they do not work the same way that @loadable/component do, therefore, the timing issues. Also, we opted by lazy load everything in Volto at some point, and this kind of worked because of the barrel imports. Once all the components have to be lazy imported, then components start to pop up at a different time everywhere. This is dramatic, because the user experience gets spoiled as well, because of this.

The outcome from this is that we should deal with a complete different app, with different timings, having to think from scratch what and when to lazy load a component, and the rationale behind, while fixing the user experience as well.
If we were to do so, we would have need to do other changes that we want to do also to the app, because, these changes will change again the shape of the app, forcing (again) to recheck the timings and tame yet another different app.

In summary, these are the changes that must happen at the same time of this PLIP:

• @plone/client - Modernize Data Fetching API #4347
• React Router 7 #6324
• Remove Semantic UI from CMSUI #6321
• Complete removal of Semantic UI from Volto #6323
• Seven Theming System #6322
• Remove any usage of barrel files from core #6507

Conclusion

If we have to achive all of the above items, we have to "literally" rewrite not only the internal architecture of Volto but the full set of components while taking care that the user "feel" experience of the app continues to be the same. By doing this, we will be replacing every single piece of code from Volto with a new one ending up with a complete different thing.

Therefore, in the wake of a complete revisit of the whole app from the ground up, and given our limited resources, it would be quicker to already put all this effort in building a completely new app. In my opinion, this would be more efficient, clearer, and effective than refactor the whole Volto in a multi-year-long effort.

So my proposal is to close this PR, and continue towards this new app.

Abstract

Volto, as any other modern JS application, relies on a bundler for producing builds of the transpiled and transformed code for production deployments and support for a full fledged development environment.

Volto is using currently Razzle as a bundler, however it has become obsolete and completely abandoned in the last years. This situation created a huge technical debt in a key element of the product. Volto can’t use some of the latest tooling or development experience improvements that the React ecosystem has provided during the last years.

After a study of the alternatives in the React ecosystem, it’s been decided to use Vite. This bundler has become the standard “de facto” bundler of many modern JS frameworks and apps. It’s flexible, pluggable, extensible and fast. It does not use Webpack (since Webpack is becoming problematic lately), but ESbuild and Rollup for the production bundling.

Assumptions

Vite is ESM, so it’s also future ready. This, along with the fact that it does not uses Webpack forced us to take some decisions and push for some breaking changes. All of them have a good reason behind them and in summary, it will resut in better and modern code using ESM and React artifacts, instead of relying on Razzle and Webpack magic.

Breaking changes

• Config from project - create-addons-loader will no longer load the config from the project itself.
• lodash-es must be used instead of lodashbecause the latter is not compatible with ESM.
• @loadable/component and Volto’s Loadables support only works for Webpack based builds, so they will be replaced them with standard React lazy instances.
• The index.js barrel import files are removed for allowing the build to better chunk splitting thanks to the above.
• doesNotContainClick from semantic-ui-react will be adopted in now core
• Globals __CLIENT__ and __SERVER__ have to be replaced with import.meta.env.SSR

All of them will be deprecated in Volto 18 so their use is already discouraged from Volto 18 on.

Deliverables

Removal of all Razzle artifacts, Webpack plugins, unused Babel plugins and config. Removal of related libraries from the devDependencies.

Except for the above deprecations and breaking changes the code and libraries used in Volto should not be changed, defining a baseline in which base future improvements that will be taking place in other PRs.

The result must pass all the existing tests and be linted following the existing configuration.

Risks

The breaking changes introduced will force to run upgrade steps not only in the project's code, but also in add-ons. All Razzle artifacts will have to be removed or updated. Add-ons maintainers will have to release major versions of them, and maintain compatibility matrixes to communicate properly which versions are ready for the new Vite buids.

We need to write outstanding documentation in order to make the process the smoothest possible.

Proposal & Implementation

The current work is at 70% and done in this PR:
#6050

Participants

Víctor Fernández de Alba (@sneridagh)
Piero Nicolli (@pnicolli)
Volto Team (@plone/volto-team)