diff --git a/README.md b/README.md index aecdc6d3..118ffc5a 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ Are you new to Owl? This is the place to start! - [Comparison with React/Vue](doc/miscellaneous/comparison.md) - [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md) - [Changelog (from owl 1.x to 2.x)](CHANGELOG.md) +- [Notes on compiled templates](doc/miscellaneous/compiled_template.md) ## Installing Owl diff --git a/doc/miscellaneous/compiled_template.md b/doc/miscellaneous/compiled_template.md new file mode 100644 index 00000000..f6b246ca --- /dev/null +++ b/doc/miscellaneous/compiled_template.md @@ -0,0 +1,98 @@ +# 🦉 Notes On Owl Compiled Templates 🦉 + +This page will explain what an Owl compiled template look like. This is a +technical document intended for developers interested in understanding how Owl +works internally. + +Broadly speaking, Owl compiles templates into a javascript function (a closure) +that returns a function (the "render" function). The point of the closure is to +have a place to store all values specific to the template (in particular, "blocks"). +Once a template is compiled, its closure function is called once to get the +render function, and from then on, only the render function is used. + +The render function takes some context (and some additional information) and +return a virtual dom representation of the rendered template, as a block tree. +A block tree is a very light weight representation that only contains the dynamic +part of the template, and its structure. It is actually independant of the +static part of the templates (which are contained in the blocks captured by the +closure). This means that the work performed at render time is only to collect +dynamic data, and to describe the block structure of the result. + +It looks like this, in pseudo code: + +```js +function closure(bdom, helpers) { + // here is some place to put stuff specific to the template, such as + // blocks + ... + + return function render(context, node, key) { + // only build here all dynamic parts of the template + // build a block tree + return tree; + } +} +``` + +Now, let us see an example. Consider the following template: + +```xml +
+