Guidelines

You will find here a list of coding guidelines, useful to unify the look of your Owl code. This is only a suggestion, but this is what we will try to follow for Odoo code.

Add lifefycle methods on top

class MyComponent extends owl.Component {
  constructor(parent, props) {}
  ...
  mounted() {
  }

  // Rest

  doSomething() {
  }

}

Use a convention to have unique component name

This is useful because templates can be inferred from the component name, but only if it is unique. In Odoo, we will prefix component names with the name of the odoo addon. For example, POSWidget, or WebActionManager.

Use directly props in your template

It is ok to read directly from props in a template. It helps to understand where a value come from:

<div><t t-if="props.someFlag">Hello</t></div>

Create getters for complicated values

It may happen that you need to process some derived value, from the props and possibly other part of your component. A nice way to do that is to use a getter:

class MyComponent extends owl.Component {
  get derivedInfo() {
    // some complicated calculation involving props
    return someResult;
  }
}

<div><t t-esc="derivedInfo"/></div>