Samuel Degueldre
4a761a7403
Previously, when having a long lived reactive object and writing a lot of keys to it, clearing the reactive subscriptions on that object would slow down as time went on. This is because when clearing a target's subsctiptions for a callback, we look at all the keys that are observed, and for all the observed keys, we remove the callback from the set of callbacks observing that key. The problem arises from the fact that after doing that, even if the set of callbacks observing that key is now empty, we don't remove the key from the observed keys, meaning that any further clearing of subscriptions will have to iterate over that key to attempt to clear the callbacks even if there are none. This commit fixes this problem by simply removing the key from the observedKeys if there are no longer any callbacks observing it. This commit also improves performance for bare reactives (reactives created with no callback). The initial implementation simply creates a default empty callback when creating a reactive, and treats it like any other, meaning it can observe keys and be notified of changes even though we know in advance that it does nothing. This can compound with the previous issue when you're doing a lot of manipulations on a bare reactive internally for the sole purpose of notifying outside observers, as this creates a lot of useless work in the reactivity system.
🦉 Owl Framework 🦉
Class based components with hooks, reactive state and concurrent mode
Try it online! you can experiment with the Owl framework in an online playground.
Project Overview
The Odoo Web Library (Owl) is a smallish (~<20kb gzipped) UI framework built by Odoo for its products. Owl is a modern framework, written in Typescript, taking the best ideas from React and Vue in a simple and consistent way. Owl's main features are:
- a declarative component system,
- a fine grained reactivity system similar to Vue,
- hooks
- fragments
- asynchronous rendering
Owl components are defined with ES6 classes and xml templates, uses an underlying virtual DOM, integrates beautifully with hooks, and the rendering is asynchronous.
Quick links:
- documentation,
- changelog (from Owl 1.x to 2.x),
- playground
Example
Here is a short example to illustrate interactive components:
const { Component, useState, mount, xml } = owl;
class Counter extends Component {
static template = xml`
<button t-on-click="() => state.value = state.value + props.increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = useState({ value: 0 });
}
class Root extends Component {
static template = xml`
<span>Hello Owl</span>
<Counter increment="2"/>`;
static components = { Counter };
}
mount(Root, document.body);
Note that the counter component is made reactive with the useState hook.
Also, all examples here uses the xml helper to define inline templates.
But this is not mandatory, many applications will load templates separately.
More interesting examples can be found on the playground application.
Documentation
Learning Owl
Are you new to Owl? This is the place to start!
Reference
- Overview
- App
- Component
- Component Lifecycle
- Concurrency Model
- Dev mode
- Dynamic sub components
- Environment
- Error Handling
- Event Handling
- Form Input Bindings
- Fragments
- Hooks
- Loading Templates
- Mounting a component
- Portal
- Precompiling templates
- Props
- Props Validation
- Reactivity
- Rendering SVG
- Refs
- Slots
- Sub components
- Sub templates
- Templates (Qweb)
- Translations
- Utils
Other Topics
- Notes On Owl Architecture
- Comparison with React/Vue
- Why did Odoo build Owl?
- Changelog (from owl 1.x to 2.x)
- Notes on compiled templates
Installing Owl
Owl is available on npm and can be installed with the following command:
npm install @odoo/owl
If you want to use a simple <script> tag, the last release can be downloaded here: