11. Glossary

Add-on (Volto)

a JS package that integrates with Volto’s configuration registry

Add-on configuration loader (Volto)

a function with signature config => config.

Babel

a Javascript compiler that “transpiles” newer standards JS to something that any browser can load.

CommonJS

a Javascript package standard, the equivalent of a Python wheel or egg. Enables Javascript modules.

Configuration registry (Volto)

a singleton object modeled using JS modules, accessible from the Volto project using the ~/config path.

ES6

ECMAScript 6, a newer version of the Javascript language.

Express

a Javascript HTTP server with a simple API to build custom applications. Volto uses it as its server.

hoisting (Yarn)

An optimization provided by Yarn. By default Javascript packages will directly include dependencies inside their local node_modules. By hoisting we’re “lifting” these inner dependencies to the top level node_modules and thus optimize the generated bundles. In case two dependencies have conflicting version dependencies of the same library, the hoisting will not be possible (for that conflicting dependency) and you’ll see multiple instances of the same library in the bundle, or you’ll see that the add-on receives its own node_modules folder.

hooks (React)

Hooks are a React API that allow function components to use React features such as lifecycle methods, states, etc.

Hot Module Replacement (HMR)

a development feature provided by Webpack that automatically reloads, in the browser, the JS modules that have changed

Hydration (SSR)

After loading an HTML page generated with SSR in the browser, React can “populate” the existing DOM elements, recreate and attach their coresponding components.

JSX

A dialect of Javascript that resembles XML, it is transpiled by Babel to JS functions. React uses JSX as its component templating.

middleware (Redux)

Custom wrappers for the Redux store dispatch methods, the allow customizing the behavior of the data flow inside the redux store.

mrs-developer

also called “missdev”, a tool similar to buildout’s mr.developer, automatically downloads and keeps up to date copies of software and add-ons under development based on definitions stored in mrs.developer.json. As a byproduct of its update operations, it also automatically adjusts jsconfig.json, which is used by Volto to configure webpack aliases.

NPM

the original NodeJS Package Manager. Also a registry of Javascript packages, similar to PyPI.

Project (Volto)

the product of running create-volto-app, a customizable instance of Volto

Razzle

a tool that simplifies SPA and SSR configuration for ReactJS projects.

Scoped packages

Namespace for Javascript packages, they provide a way to avoid naming conflicts for common package names.

Server-Side Rendering (SSR)

when first loading any Plone page, users will get HTML markup that closely matches the final DOM structure of the react components used to render that page

Shadowing (Volto)

webpack provides an “alias” mechanism, where the path for a module can be aliased to another module. By using this mechanism Volto enables customization (file overrides), similar to z3c.jbot

Single Page Application (SPA)

a type of Javascript application that aims to provide a better user experience by avoiding unnecessary reloading of the browser page, instead uses AJAX to load backend information

Transpilation

the transformation of Javascript code that uses advanced language features, unavailable for some browsers, to code rewritten to support them.

Webpack

a tool that loads and bundles code and web resources using loaders

Webpack entrypoint

the main files generated by webpack as a result. They typically contain the application source code based on modules bundled together, but it can also include other resources, such as static resources. It can contain code to automatically trigger the load of other JS code files called “chunks”

Yarn

a popular Javascript package manager similar to NPM.

Yeoman

a popular scaffolding tool similar to Plone’s mr.bob or ZopeSkel