Skip to content

Commit

Permalink
[DOC] add architecture notes on rendering pipeline
Browse files Browse the repository at this point in the history
  • Loading branch information
ged-odoo committed Oct 28, 2019
1 parent 3035a9f commit 62608cb
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 1 deletion.
34 changes: 34 additions & 0 deletions doc/architecture/rendering.md
Original file line number Diff line number Diff line change
@@ -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).

9 changes: 8 additions & 1 deletion doc/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)

0 comments on commit 62608cb

Please sign in to comment.