From 62608cbb0d25fc0c82ef9b17fec1f80d44681bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Mon, 28 Oct 2019 13:35:55 +0100 Subject: [PATCH] [DOC] add architecture notes on rendering pipeline --- doc/architecture/rendering.md | 34 ++++++++++++++++++++++++++++++++++ doc/readme.md | 9 ++++++++- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 doc/architecture/rendering.md diff --git a/doc/architecture/rendering.md b/doc/architecture/rendering.md new file mode 100644 index 00000000..83ff05c6 --- /dev/null +++ b/doc/architecture/rendering.md @@ -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). + diff --git a/doc/readme.md b/doc/readme.md index 6cb81edd..a8324a3c 100644 --- a/doc/readme.md +++ b/doc/readme.md @@ -62,7 +62,6 @@ Note that for convenience, the `useState` hook is also exported at the root of t - [Store](reference/store.md) - [Tags](reference/tags.md) - [Utils](reference/utils.md) -- [Virtual DOM](architecture/vdom.md) ## 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) - [Tooling](tooling.md) - [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)