Published in


Introduction to Odoo OWL Framework

An application(Especially a web application) tells user friendly if and if only it is attractive and easy to the user to handle. JavaScript takes the main role to do it. Odoo has a well structured and attractive user interface. That’s why Odoo is known as one of the easiest ERPs in the world.
Right now(V13.0 and below) Odoo uses Backbone JS to handle its front end. Backbone is a modern JavaScript library that is based on the model-view design paradigm. So, it is unsure of a structured user interface for a large project(By providing building blocks like widgets). Even Though, Backbone has stopped its support to the users as it has stopped migrations and upgrades. So Odoo decided to change it’s front end from Backbone JS to the OWL framework.

In this blog, you will learn:
1. What is Odoo OWL Framework
2. Why OWL
3. OWL Overview

Odoo OWL Framework
As Odoo’s definition “The Odoo Web Library (OWL) is a smallish (~<20kb gzipped) UI framework intended to be the basis for the Odoo Web Client. The OWL is a modern framework, written in Typescript, taking the best ideas from React and Vue in a simple and consistent way.”

OWL uses Odoo’s powerful template engine ”Qweb” to handle front end HTML fragments and pages.

Why did Odoo decide to change its framework to Owl while it has an attractive and responding interface?. The reason behind it is, Current framework is awesome, but it is not completely converted to Odoo’s needs. It is not optimized for what Odoo exactly wants for its use cases. It can increase response time and can be the wastage of time. That’s why Odoo introduced the Owl framework which is completely under Odoo’s requirements.

Owl uses components as it’s building blocks, the same as React JS. Simply, components are JavaScript classes and functions to describe how UI(or a part of UI) should appear on the screen. It helps to keep a structured view(tree view) to the building blocks. Even though Owl uses JS classes to build components rather than JS functions. And it is super dynamic too(by the help of Qweb engine).


const { Component, useState } = owl;
const { xml } = owl.tags;
class Counter extends Component {
static template = xml`
<button t-on-click=”state.value++”>
Click Me! [<t t-esc=”state.value”/>]
state = useState({ value: 0 });
class App extends Component {
static template = xml`
<span>Hello Owl</span>
<Counter />
static components = { Counter };
const app = new App();

All the newly created child-components will be extended from the Component. OWL components are structured in a tree view model. Each component can have its own local state. Here you can see that a state object is defined to set state values. There is an Observer class which always observes the changes happening to an object or array and reacts to it properly. If any changes occur in hooks like useState, it re-rendering the view. Hooks are always helpful to reuse stateful logics between components. This is a simple example and you can see there is a helper called XML(xml helper) which is used to design inline xml templates. You can directly define xml codes using this helper. However, it is not a good way of creating inline xml templates as it is not convenient when you consider a large project. You can load the xml template separately.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cybrosys Technologies

Cybrosys Technologies

We are Odoo Gold Partners standing par excellence in Odoo implementation, customization and allied services.