mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] add architecture notes on rendering pipeline
This commit is contained in:
@@ -0,0 +1,34 @@
|
|||||||
|
# 🦉 Rendering Pipeline 🦉
|
||||||
|
|
||||||
|
We explain here how Owl is designed, from the perspective of its rendering
|
||||||
|
pipeline.
|
||||||
|
|
||||||
|
Warning: these notes are technical by nature, and intended for people working
|
||||||
|
on Owl (or interested in understanding its design).
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
A rendering occurs in two phases:
|
||||||
|
|
||||||
|
- virtual rendering: this generates the virtual dom in memory, asynchronously
|
||||||
|
- patch: applies a virtual tree to the screen (synchronously)
|
||||||
|
|
||||||
|
|
||||||
|
There are several classes involved in a rendering:
|
||||||
|
|
||||||
|
- components
|
||||||
|
- a scheduler
|
||||||
|
- fibers: small objects containing some metadata, associated with a rendering of
|
||||||
|
a specific component
|
||||||
|
|
||||||
|
|
||||||
|
Components are organized in a dynamic component tree, visible in the user
|
||||||
|
interface. Whenever a rendering is initiated in a component `C`:
|
||||||
|
- a fiber is created on `C` with the rendering props information
|
||||||
|
- the virtual rendering phase starts on C (will asynchronously render all the
|
||||||
|
child components)
|
||||||
|
- the fiber is added to the scheduler, which will poll continuously, every
|
||||||
|
animation frame, if the fiber is done
|
||||||
|
- once it is done, the scheduler will call the task callback, which will apply
|
||||||
|
the patch (if it was not cancelled in the meantime).
|
||||||
|
|
||||||
+8
-1
@@ -62,7 +62,6 @@ Note that for convenience, the `useState` hook is also exported at the root of t
|
|||||||
- [Store](reference/store.md)
|
- [Store](reference/store.md)
|
||||||
- [Tags](reference/tags.md)
|
- [Tags](reference/tags.md)
|
||||||
- [Utils](reference/utils.md)
|
- [Utils](reference/utils.md)
|
||||||
- [Virtual DOM](architecture/vdom.md)
|
|
||||||
|
|
||||||
## Learning Resources
|
## Learning Resources
|
||||||
|
|
||||||
@@ -73,3 +72,11 @@ Note that for convenience, the `useState` hook is also exported at the root of t
|
|||||||
- [Comparison with React/Vue](comparison.md)
|
- [Comparison with React/Vue](comparison.md)
|
||||||
- [Tooling](tooling.md)
|
- [Tooling](tooling.md)
|
||||||
- [Templates to start Owl applications (external link)](https://github.com/ged-odoo/owl-templates)
|
- [Templates to start Owl applications (external link)](https://github.com/ged-odoo/owl-templates)
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
This section explains in more detail the inner workings of Owl. It is more
|
||||||
|
useful for people working on Owl code.
|
||||||
|
|
||||||
|
- [Virtual DOM](architecture/vdom.md)
|
||||||
|
- [Rendering](architecture/rendering.md)
|
||||||
|
|||||||
Reference in New Issue
Block a user