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:
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 OWL?
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 OVERVIEW
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).
EXAMPLE
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"/>]
</button>`;
state = useState({ value: 0 });
}
class App extends Component {
static template = xml`
<div>
<span>Hello Owl</span>
<Counter />
</div>`;
static components = { Counter };
}
const app = new App();
app.mount(document.body);
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.
COMPONENT STATES
class Counter extends Component {
static template = xml`
<button t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = { value: 0 };
increment() {
this.state.value++;
this.render();
}
}
As we mentioned above, Every component can have its own local states. Owl framework uses Hooks to dynamically interact templates with components. Whenever a change is made to a state, it re-renders the template. In this example, there is nothing to say it is a magic dynamic. We should always manually call the render method in order to update the state values changes. It will be a difficult thing when there are a lot of state changes. We will be needing to call the render method each time to have a change in view. To overcome this difficulty, we can use the useState hook Which renders the view each time when there is a change in state. That's why Owl is called a reactive framework.
Take a look at the below code lines to understand how hooks work(Here uses useState).
const { useState } = owl.hooks;
class Counter extends Component {
static template = xml`
<button t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = useState({ value: 0 });
increment() {
this.state.value++;
}
}
There are some important and most used hooks used by Owl framework like useState. We will discuss more about it in the upcoming sections.Take a look at what are hooks in the OWL framework and how do we use it by referring to our latest blog about Hooks in Odoo OWL Framework.
Watch our Odoo OWL Framework Webinar Video: