Lorsque je débutais sur Odoo, je pensais que je n'allais jamais toucher au Javascript et celà me rendait heureux. Puis, lorsque j'ai dû personnalisé le point de vente, je me suis rendu compte à quel point le JS d'Odoo était compliqué. À l'époque, le client web tournait sur BackboneJS et JQuery tandis qu'au même moment, React, Angular et autre faisaient surfaces. J'enviais les développeurs web jusqu'à ce que OWL soit né

Odoo est un ERP moderne qui compte plus de 5 millions d'utilisateurs dans le monde. C'est une application un peu complexe avec des centaines de modules. Chacun de ces modules dépend des autres et vice-versa et c'est pourquoi Odoo est extrêmement modulaire : nous pouvons tout remplacer sur Odoo car il a un très bon système d'héritage.

Cependant, Odoo n'est pas vraiment une application avec une interface utilisateur. C'est une application qui génère une interface utilisateur dynamique. Lorsque vous cliquez sur un bouton, le système appelle un widget qui retourne les données et l'interface souhaitées. Aujourd'hui, le web est moderne et il existe de nombreux outils. Il existe plusieurs outils pour faciliter la génération de ces interfaces basées sur des composants web : nous avons par exemple des frameworks comme React et VueJS.

En général, les parties centrales du système ne savent pas, avant l'exécution, quels fichiers seront chargés/exécutés, ou quel sera l'état de l'interface utilisateur. Cela fait d'Odoo une application javascript non conventionnelle, et les besoins de ce logiciel sont très différents de ceux de la plupart des autres applications. Et c'est pourquoi Odoo SA introduit son propre framework frontend, OWL.

Qu'est-ce que OWL ?

Odoo Web Library (OWL) est le nouveau framework frontend de Odoo. C'est un framework moderne, écrit en Javascript et Typescript, reprenant les meilleures idées de React et Vue de manière simple et cohérente. OWL est :

un système de composants déclaratifs,
un système de réactivité basé sur des hooks,
un mode concurrent par défaut,
un storage et un routeur fontend
Les composants OWL sont définis avec des classes ES6, ils utilisent des templates QWeb, un DOM virtuel sous-jacent, s'intègrent parfaitement avec les hooks, et le rendu est asynchrone.

Parce que OWL est un système basé sur des composants, c'est la meilleure façon de faire du développement frontend sur Odoo.

Comprendre les composants (class components)

Les composants sont les blocs de construction des interfaces utilisateur. Avec OWL, les composants sont définis comme une sous-classe de la classe Component (owl.Component) et sont exclusivement rendus par le moteur de template QWeb. Lors du rendu, un dom virtuel du composant est généré et ensuite patché sur le DOM afin d'appliquer les changements de manière efficace.

Un composant est défini par une sous-classe de la classe Component et définit un autre composant ou un élément d'interface utilisateur. Si aucun modèle statique n'est défini dans le composant, OWL utilisera le nom du composant comme nom de modèle : à ce niveau, OWL cherchera dans QWeb un modèle avec le nom du composant (ou un de ses ancêtres).

Voici un exemple de composant (sub-component)

Fichier Component.js

import { Component } from "@odoo/owl" ;

export class OtherComponent extends Component {
  template = 'OtherComponent' ;
}

export class App extends Component {
  template = 'App'
}

Fichier Component.xml

<templates>
    <div t-name="App" class="main">Bonjour OWL ! <t t-call="OtherComponent"/> </div>
    <div t-name="OtherComponent">autre composant</div>
 </templates>

Principes de conception de OWL

OWL est conçu pour être utilisé dans de grandes applications comme Odoo. Ces applications nécessitent beaucoup de personnalisations, les exigences changent parfois et il y a des équipes qui travaillent dessus. C'est pourquoi OWL est :

Basé sur XML : vous écrivez vos modèles au format XML basé sur la syntaxe QWeb.
Les modèles sont compilés dans le navigateur afin que vous puissiez rendre votre élément d'interface utilisateur.
Aucun outil supplémentaire n'est nécessaire : une fois que vous avez importé OWL, vous pouvez faire tout ce que vous voulez.

Intégration d'OWL dans un module Odoo personnalisé

Dans cet exemple, nous allons montrer un hello world basique dans un module odoo personnalisé avec OWL.

Tout d'abord, créez un module Odoo de base

1- Dans /votre_module/static/src/js/component.js écrivez ce bout de code

odoo.define('votre_module.component', function(require) {

    'use strict' ;

    const { Component } = owl ;

    class App extends Component {
      template = 'App'
    }

    return App ;

})

2- Créez le fichier XML /votre_module/views/templates.xml et chargez le composant

<template id="assets_end" inherit_id="web.assets_backend">
   <xpath expr="." position="inside">
        <script src="/votre_module/static/src/js/component.js" type="text/javascript" />
   </xpath>
</template>

3- Vous pouvez maintenant définir votre modèle et afficher votre message "hello world".

<template id="index">
   <div t-name="App" class="main">
      <titre>Test component</titre>
      <h1>Hello world!</h1>
   </div>
</template>

4- N'oubliez pas d'écrire votre contrôleur dans main.py

class Hello(http.Controller) :
    @http.route('/hello', auth='public')
    def index(self, **kwargs) :
        return http.request.render('votre_module.index')

Vous pouvez maintenant installer ou mettre à jour le module et aller sur localhost:8069/hello pour voir le message !

NOTE FINALE

Dans cet article, je vous ai présenté de manière très brève ce que c'est qu'OWL. Dans la suite nous allons entrer un peu plus en profondeur. Restez tout simplement scotché à Peef pour ne rien rater, parce que de bonnes choses arrivent

Comprendre OWL, le nouveau framework JS d'Odoo