You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- [Add-ons tagged with the trove classifier `Framework :: Plone` on PyPI](https://pypi.org/search/?c=Framework+%3A%3A+Plone)
175
+
176
+
Volto configuration loader
171
177
A function with signature `config => config`.
172
-
It gets the Volto Configuration registry, and it must return it back after mutating it.
173
-
It is similar to `GenericSetup` profiles in Plone Backend.
178
+
It gets the Volto configuration registry, and it must return it back after mutating it.
179
+
It is similar to `GenericSetup` profiles in the Plone backend.
174
180
An add-on must provide a default configuration loader that is always loaded when Volto runs.
175
181
An add-on can have multiple configuration loaders, and they can be loaded optionally from the Volto configuration.
176
182
177
-
Configuration registry (Volto)
178
-
A singleton object modeled using JavaScript modules.
183
+
Configuration registry
184
+
In Plone and in general, the configuration registry is where resources are registered for an application.
185
+
186
+
In Volto, it is a singleton object modeled using JavaScript modules.
179
187
It is accessible from the Volto project by importing the module `@plone/volto/config` with `import registry from '@plone/volto/config'`.
180
188
It contains the configuration of the Volto app.
189
+
190
+
In Plone core, [`plone.app.registry`](https://pypi.org/project/plone.app.registry/) provides Plone UI and `GenericSetup` integration for [`plone.registry`](https://pypi.org/project/plone.registry/), which in turn implements a configuration registry for Zope applications.
181
191
182
-
Shadowing (Volto)
183
-
Webpack provides an "alias" mechanism, where the path for a module can be aliased to another module.
184
-
By using this mechanism Volto enables customization (file overrides), similar to `z3c.jbot.`
192
+
component shadowing
193
+
shadowing
194
+
Volto uses a technique called component shadowing to override an existing Volto component with our local custom version, without having to modify Volto's source code.
195
+
196
+
Volto's source components are located in the filepath stem of `omelette/src/components/`.
197
+
Custom components that shadow Volto's source would be located in the filepath stem of `src/customizations/components/`.
198
+
Shadow components would have the same filepath as Volto's source compenents, excluding the stem.
199
+
Thus `omelette/src/components/theme/Header/Header.jsx` would be shadowed by `src/customizations/components/theme/Header/Header.jsx`.
200
+
201
+
Webpack provides an alias mechanism that allows component shadowing in Volto, where the path for a module can be aliased to another module.
202
+
By using this mechanism of file overrides, or component shadowing, Volto enables customization, similar to `z3c.jbot.`
185
203
186
204
Razzle
187
-
A tool that simplifies SPA and SSR configuration for React projects.
205
+
A tool that simplifies {term}`SPA` and {term}`SSR` configuration for React projects.
188
206
189
207
Webpack
190
208
A tool that loads and bundles code and web resources using loaders.
@@ -201,14 +219,39 @@ Express
201
219
A JavaScript HTTP server with a simple API to build custom applications.
202
220
Volto uses it as its server.
203
221
204
-
Server-Side Rendering (SSR)
205
-
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.
222
+
SSR
223
+
server-side rendering
224
+
When a web browser or other HTTP client sends a request, the HTML markup for the page is created on the server, which sends a response consisting of HTML markup back to the client.
225
+
226
+
In Volto, SSR returns HTML markup that closely matches the final {term}`DOM` structure of the React components used to render that page, but it is not the complete page.
227
+
After the client loads the initial response, then the {term}`hydration` mechanism performs additional rendering on the client side, populating the DOM with additional HTML markup.
206
228
207
-
Single Page Application (SPA)
208
-
A type of JavaScript application that aims to provide a better user experience by avoiding unnecessary reloading of the browser page, instead using AJAX to load backend information.
229
+
In Classic UI, SSR returns the complete page back to the client in the response.
230
+
In some rare cases, additional HTML snippets may be loaded, such as in overlays or dialogs.
209
231
210
-
Hot Module Replacement (HMR)
211
-
A development feature provided by Webpack that automatically reloads, in the browser, the JavaScript modules that have changed on disk.
232
+
SSR enables a developer to customize a website per request and per user.
233
+
In addition, SSR can improve performance and search engine optimization (SEO) for a website.
234
+
235
+
DOM
236
+
Document Object Model
237
+
The Document Object Model (DOM) is a programming interface for web documents.
238
+
It represents the page so that programs can change the document structure, style, and content.
239
+
The DOM represents the document as nodes and objects; that way, programming languages, such as JavaScript and React, can interact with the page.
240
+
241
+
SPA
242
+
single page application
243
+
A type of JavaScript application that aims to provide a better user experience by avoiding unnecessary reloading of the browser page, instead using {term}`AJAX` to load backend information.
244
+
245
+
HMR
246
+
hot module replacement
247
+
[Hot module replacement](https://webpack.js.org/guides/hot-module-replacement/) (HMR) is a development feature provided by Webpack that automatically reloads, in the browser, the JavaScript modules that have changed on disk.
248
+
249
+
Ajax
250
+
AJAX
251
+
Asynchronous JavaScript and XML
252
+
AJAX allows web applications to change parts of the page dynamically without reloading the entire page.
253
+
In Plone, after a page with JavaScript is loaded, the JavaScript will send an asynchronous request to the server.
254
+
The server will send a response back to the client, which is then rendered on the client side.
212
255
213
256
Yeoman
214
257
A popular scaffolding tool similar to Plone's `mr.bob` or `ZopeSkel`.
@@ -232,8 +275,8 @@ mrs-developer
232
275
Yarn
233
276
[Yarn](https://classic.yarnpkg.com/) is a JavaScript package manager.
234
277
235
-
Hydration (SSR)
236
-
After loading an HTML page generated with SSR in the browser, React can "populate" the existing DOM elements, recreate and attach their coresponding components.
278
+
Hydration
279
+
After loading an HTML page generated with {term}`SSR` in the browser, React can populate the existing {term}`DOM` elements, and recreate and attach their coresponding components.
237
280
238
281
JSX
239
282
A dialect of JavaScript that resembles XML, it is transpiled by Babel to JavaScript functions.
@@ -242,16 +285,20 @@ JSX
242
285
Scoped packages
243
286
Namespace for JavaScript packages, they provide a way to avoid naming conflicts for common package names.
244
287
245
-
middleware (Redux)
246
-
Custom wrappers for the Redux store dispatch methods.
247
-
They allow customizing the behavior of the data flow inside the redux store.
288
+
Redux
289
+
Redux middleware
290
+
Custom wrappers for the [Redux](https://redux.js.org/) store dispatch methods.
291
+
They allow customizing the behavior of the data flow inside the Redux store.
292
+
293
+
hook
294
+
hooks
295
+
In general, a hook in programming is a place in code that allows you to tap in to a module to either provide different behavior or to react when something happens.
248
296
249
-
hooks (React)
250
-
Hooks are a React API that allow function components to use React features such as lifecycle methods, states, and so on.
297
+
**React [Hooks](https://reactjs.org/docs/hooks-overview.html)** are a React API that allow function components to use React features, such as lifecycle methods, states, and so on.
251
298
252
-
hoisting (Yarn)
253
-
An optimization provided by Yarn.
254
-
By default JavaScript packages will directly include dependencies inside their local node_modules.
299
+
hoisting
300
+
[Hoisting](https://yarnpkg.com/advanced/lexicon#hoisting) is an optimization provided by Yarn.
301
+
By default JavaScript packages will directly include dependencies inside their local `node_modules`.
255
302
By hoisting we're "lifting" these inner dependencies to the top level `node_modules` directory, and thus optimize the generated bundles.
256
303
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.
Copy file name to clipboardExpand all lines: docs/i18n-l10n/translating-text-strings.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -155,7 +155,7 @@ It will use the text content of the element as `msgid`.
155
155
Use attributes `i18n:translate`, `i18n:attributes`, and so on.
156
156
For examples, look at any core Plone `.pt` files.
157
157
158
-
The `i18n:translate` attribute will hook into the translation machinery, and will look up the corresponding translated string to the one stated there, while looking in the relevant `domain.po` file corresponding to the `i18n:domain` stated in the file and the language negotiated by Plone.
158
+
The `i18n:translate` attribute will {term}`hook` into the translation machinery, and will look up the corresponding translated string to the one stated there, while looking in the relevant `domain.po` file corresponding to the `i18n:domain` stated in the file and the language negotiated by Plone.
Copy file name to clipboardExpand all lines: docs/overview/index.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ Plone is easy to set up compared to other CMSs in its category, extremely flexib
74
74
Plone is a content management platform with its backend written in Python.
75
75
It is built on top of the open source Zope web application server and development system.
76
76
Plone makes use of the pluggable Zope Component Architecture (ZCA) to provide a highly modular and extensible system.
77
-
Throughout its history, Plone has used server-side rendering to generate HTML-based content, with advanced resource management features for adding and bundling CSS and JavaScript.
77
+
Throughout its history, Plone has used {term}`server-side rendering` to generate HTML-based content, with advanced resource management features for adding and bundling CSS and JavaScript.
78
78
Additionally, Plone's use of a component architecture makes it easy to extend and customize, allowing users to create unique, feature rich websites that are tailored to their specific needs.
79
79
80
80
With the release of Plone 6, you now have the option to choose from two different out-of-the-box supported configurations when setting up a new Plone website.
@@ -86,7 +86,7 @@ It may be used as a base image, adding customizations, to make a derivative imag
86
86
The default and recommended configuration for new websites in Plone is the new React-based JavaScript frontend called "Volto".
87
87
For this setup you still need to run the Python-based backend server, as well as enable the REST API, and update the configuration profile.
88
88
These settings and profile are applied automatically when you select the {guilabel}`Create Plone Site` option in the Plone website creation form.
89
-
In addition a separate NodeJS based frontend server will serve the JavaScript frontend resources and provide SSR with hydration.
89
+
In addition a separate NodeJS based frontend server will serve the JavaScript frontend resources and provide {term}`SSR` with {term}`hydration`.
90
90
To deploy this setup using containers, you will need the `plone-frontend` image for the frontend server.
91
91
92
92
Beginning with Plone 6, we now support two programming language stacks, one each for Python and JavaScript.
0 commit comments