OWL JS Prerequisites – What JavaScript You Need to Know First

// You must understand this class syntax before OWL
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

const dog = new Dog("Rex");
console.log(dog.speak()); // Rex barks.

// OWL uses exactly this pattern:
// class MyComponent extends Component { ... }

// Destructured import — used constantly with OWL
import { Component, mount, xml, useState } from "@odoo/owl";

// Exporting your component for use in other files
export class MyCounter extends Component {
  state = useState({ count: 0 });
  static template = xml`<div><t t-esc="state.count"/></div>`;
}

// Default export
export default class App extends Component { /* ... */ }

// In another file:
import App from "./App.js";
import { MyCounter } from "./MyCounter.js";

// Arrow functions — concise syntax
const add = (a, b) => a + b;            // implicit return
const double = x => x * 2;              // single param, no parens needed
const greet = () => "Hello!";           // no params

// Arrow functions in event handlers (very common in OWL templates):
// t-on-click="() => state.count++"
// t-on-click="(ev) => handleClick(ev)"

// Arrow functions vs regular functions — this binding
class Counter extends Component {
  increment = () => {
    // Arrow function — 'this' refers to the component instance
    this.state.count++;
  };
}

// Object destructuring — used to import from OWL
const { Component, mount, xml, useState, onMounted } = owl;

// Destructuring props in component methods
class UserCard extends Component {
  get displayName() {
    const { firstName, lastName } = this.props;
    return `${firstName} ${lastName}`;
  }
}

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// Spread — useful when creating new state objects
const newState = { ...oldState, count: oldState.count + 1 };

// Regular template literal (string interpolation)
const name = "Alice";
const greeting = `Hello, ${name}! You are ${2026 - 1995} years old.`;

// Tagged template literal — the xml`` helper in OWL uses this pattern
// The tag is a function that receives the template parts
function tag(strings, ...values) {
  return strings.raw.join('');
}
const result = tag`Hello ${name}!`;

// In OWL:
static template = xml`
  <div>
    <h1>Hello, OWL!</h1>
  </div>
`;
// xml is a function that compiles the XML template string into a template ID

import { Component, xml, useState, onWillStart } from "@odoo/owl";

class UserList extends Component {
  state = useState({ users: [], loading: true });

  setup() {
    // onWillStart runs before the first render — OWL awaits the Promise
    onWillStart(async () => {
      const response = await fetch("/api/users");
      const data = await response.json();
      this.state.users = data;
      this.state.loading = false;
    });
  }

  static template = xml`
    <div>
      <p t-if="state.loading">Loading...</p>
      <ul t-else="">
        <li t-foreach="state.users" t-as="user" t-key="user.id">
          <t t-esc="user.name"/>
        </li>
      </ul>
    </div>
  `;
}

// DOM concepts you must understand before OWL:

// 1. Selecting elements
const root = document.getElementById("root");
const btn = document.querySelector(".my-button");

// 2. OWL mounts into a DOM element
// mount(MyApp, document.body);      // Mounts to body
// mount(MyApp, document.getElementById("app")); // Mounts to #app

// 3. OWL creates, updates, and removes DOM nodes for you
// You never call document.createElement() or element.textContent
// inside OWL components — the template handles it declaratively.

<!-- Block elements -->
<div class="container">
  <h1>Title</h1>
  <p>A paragraph of text.</p>
</div>

<!-- Inline elements -->
<span class="badge">New</span>
<strong>Bold text</strong>

<!-- Lists -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Form elements (important for t-model binding) -->
<input type="text" placeholder="Enter text" />
<select>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>
<textarea rows="4"></textarea>
<button type="button">Click me</button>