Learning Owl Framework - Introduction

What is Owl framework?

Odoo Web Library (owl) is a modern framework written in typescript built by odoo that combines some of the best features from React and Vue in a modular and simple way that you are going to love it.

Basic core features that you might need to know about Owl:

• Decelerative component system
• Hooks
• Input bindings
• Event system bus
• Qweb Template Engine based on XML
• Asynchronous and dynamic rendering
• Reactive component system
• Monkey patching on runtime
• Dynamic routing
• Universal translation

Let’s see an example of how to define a component using Owl:

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);

As noticed the component syntax is pretty similar to react if you have used react before. The template engine for the component is based on XML Qweb.

If you are not familiar with the Qweb template engine it is ok, Qweb is a template engine used by odoo applications to generate HTML fragments based on XML and it has its own directive which can be used to dynamically generate HTML UI components.

To Whom is this tutorial?

This tutorial is for developers that use odoo as a development platform pretty much like Django and love to build stuff using component design-based user interfaces (UI).

Or

If you are using Owl as a standalone library pretty much like react, angular, or Vue.

Let’s fire it up!

• Your First Component.
• Component Properties.
• Component Lifecycle.
• Define Nested Components.
• Dynamic Components Design.
• Communication Between Components.
• Component Hooks.
• Dom References.
• Event Handling.
• Generic Component Design.
• Reactive Components.
• Environment and Components Mounting.
• Owl Template Engine.
• Owl Utils.