# 🦉 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).