Odoo Experience 2020 https://youtu.be/OY-4p_J04tg

2. Owl JS
Framework
github.com/odoo/owl

3. Part 1
Why Owl?

4. 1. Based on XML templates (QWeb)
2. JIT template compilation
3. Easy to integrate in Odoo assets
pipeline

5. 1. Based on XML templates (QWeb)
2. JIT template compilation
3. Easy to integrate in Odoo assets
pipeline

6. 1. Based on XML templates (QWeb)
2. JIT template compilation
3. Easy to integrate in Odoo assets
pipeline

7. Part 2
Owl design principles

8. Small(ish)/Low level
framework
about 21 kb (minified/gzipped)

9. Modern UI toolset
● components
● hooks
● slots
● store
● ...

10. Strong
concurrency
management
async by default!
A
B C
D E F

11. Part 3
Let’s build a to-do list

13. 1. Setting up the projecthooks, slots, store and more
hooks, slots, store and more
github.com/ged-odoo/owl-todolist

14. 2. Adding the first
component
const { Component } = owl;
const { xml } = owl.tags;
const { whenReady } = owl.utils;
// Owl Components
class App extends Component {
static template = xml`<div>todo app</div>`;
}
// Setup code
function setup() {
const app = new App();
app.mount(document.body);
}
whenReady(setup);
➔ Components are class, inherit from
Component
➔ An Owl application is a (dynamic) tree
of components, with a root
➔ It is mounted with the mount method
➔ The mount operation completes
when all the sub component tree (if
any) are ready
➔ Templates are inlined here

15. 3. Displaying tasks
➔ Always useful to add demo data
➔ Template is standard QWeb
➔ qweb evaluation context =
component instance
➔ Notice the t-key directive!
const TASKS = [
{
id: 1,
title: "buy milk",
isCompleted: true,
},
{
id: 2,
title: "clean house",
isCompleted: false,
},
];
class App extends Component {
static template = xml`
<div class="task-list">
<t t-foreach="tasks" t-as="task" t-key="task.id">
<div class="task">
<input type="checkbox"
t-att-checked="task.isCompleted"/>
<span><t t-esc="task.title"/></span>
</div>
</t>
</div>`;
tasks = TASKS;
}

16. 4. Style .task-list {
width: 300px;
margin: 50px auto;
background: aliceblue;
padding: 10px;
}
.task {
font-size: 18px;
color: #111111;
}
.task.done {
opacity: 0.7;
}
<div
class="task"
t-att-class="task.isCompleted ? 'done' : ''">
➔ class and t-att-class attributes
can be combined
app.css
Template:

17. 5. Extracting task as a
subcomponent
➔ Most UI are divided into sub
components
➔ Components are described by xml
elements with a capital first letter
➔ Components attributes are given to
actual sub component instance
(props)
const TASK_TEMPLATE = xml`
<div class="task"
t-att-class="props.task.isCompleted ? 'done':''">
<input type="checkbox"
t-att-checked="props.task.isCompleted"/>
<span><t t-esc="props.task.title"/></span>
</div>`;
class Task extends Component {
static template = TASK_TEMPLATE;
}
const APP_TEMPLATE = xml`
<div class="task-list">
<t t-foreach="tasks" t-as="task" t-key="task.id">
<Task task="task"/>
</t>
</div>`;
class App extends Component {
static template = APP_TEMPLATE;
static components = { Task };
tasks = TASKS;
}

18. UI as a tree of components
Root State
A B C
State
State
Props
D EProps
State
Props

19. State
class App extends Component {
tasks = TASKS;
...
}
➔ Owned by a component
➔ May be reactive or not
➔ Only owner can update it
➔ Can give reference to other
components (as props)
<div class="task-list">
<t t-foreach="tasks" t-as="task" t-key="task.id">
<Task task="task"/>
</t>
</div>
Props
➔ Can be accessed in this.props
➔ Owned by someone else
➔ Props cannot be updated by
child component

20. 6. Adding tasks
<div class="todo-app">
<input
placeholder="Enter a new task"
t-on-keyup="addTask"/>
<div class="task-list">
...
</div>
</div>
➔ Can add event handler with t-on-
directive
➔ Handler receive event as first
argument
➔ Handler need to be a function in the
rendering context (the component
instance)
addTask(ev) {
// 13 is keycode for ENTER
if (ev.keyCode === 13) {
const title =
ev.target.value.trim();
ev.target.value = "";
console.log('adding task', title);
// todo
}
}

21. 6. Adding tasks
<input
placeholder="Enter a new task"
t-on-keyup="addTask"
t-ref="add-input"/>
➔ Get reference with t-ref directive
➔ Can use mounted lifecycle method
➔ UseRef is our first hook
const { useRef } = owl.hooks;
class App extends Component {
inputRef = useRef("add-input");
mounted() {
this.inputRef.el.focus();
}
...
}

22. Components Lifecycle
willPatch patched willUnmountconstructor willStart* mounted willUpdateProps*

23. 6. Adding tasks
class App extends Component {
...
nextId = 1;
tasks = [];
...
addTask(ev) {
// 13 is keycode for ENTER
if (ev.keyCode === 13) {
const title =
ev.target.value.trim();
ev.target.value = "";
if (title) {
const newTask = {
id: this.nextId++,
title: title,
isCompleted: false,
};
this.tasks.push(newTask);
}
}
}
}
➔ Generate some id number
➔ Add the task info to the task list
But… It does not work!

24. We need reactivity
Important hook: useState

25. 6. Adding tasks
// on top of the file
const { useRef, useState } = owl.hooks;
class App extends Component {
tasks = useState([]);
...
}
➔ Make the state reactive with
useState hook
➔ It works with arrays and objects
(even nested)

26. 7. Toggling tasks
<input
type="checkbox"
t-att-
checked="props.task.isCompleted"
t-on-click="toggleTask"/>
class Task extends Component {
static template = TASK_TEMPLATE;
toggleTask() {
// ???
}
}
➔ Task component cannot change a
task
➔ How to communicate the intent?
App
Task 2Task 1

27. Communication
➔ Propagate events from
bottom to top
➔ Use trigger method to
generate native event
➔ Use t-on- directive to catch
them
➔ Event payload is available
in the event.detail key
App
Task 2Task 1

28. 7. Toggling tasks class Task extends Component {
toggleTask() {
this.trigger('toggle-task', {
id: this.props.task.id
});
}
}
// In App
<div class="task-list" t-on-toggle-
task="toggleTask">
class App extends Component {
toggleTask(ev) {
const task = this.tasks.find(t => t.id
=== ev.detail.id);
task.isCompleted = !task.isCompleted;
}
}
➔ Trigger event in Task
➔ Catch it in App
➔ Modify state in App
➔ Notice the event payload is actually
set in ev.detail

29. 8. Deleting Tasks
<div class="task" ...>
...
<span class="delete" t-on-click="deleteTask"> </span>
</div>
class Task extends Component {
deleteTask() {
this.trigger('delete-task', {id: ...});
}
}
<div class="task-list"
t-on-toggle-task="toggleTask"
t-on-delete-task="deleteTask">
class App extends Component {
deleteTask(ev) {
const index = this.tasks.findIndex(t => t.id ===
ev.detail.id);
this.tasks.splice(index, 1);
}
}
➔ Add event handler in some
component
➔ Trigger event with proper payload
➔ Catch event in some parent
component
➔ Properly update state
Very common workflow:

30. 9. Saving state to local
storage
class App extends Component {
constructor() {
super(...arguments);
const tasks = localStorage.getItem("todoapp");
if (tasks) {
for (let task of JSON.parse(tasks)) {
this.tasks.push(task);
this.nextId = Math.max(this.nextId, task.id + 1);
}
}
}
addTask(ev) {
...
localStorage.setItem("todoapp",
JSON.stringify(this.tasks));
}
toggleTask(ev) {
...
localStorage.setItem("todoapp",
JSON.stringify(this.tasks));
}
deleteTask(ev) {
...
localStorage.setItem("todoapp",
JSON.stringify(this.tasks));
}
}
➔ Need to load tasks in constructor
➔ And update localstorage whenever
an update is done
➔ Duplication is bad. We’ll solve that
later

31. What if we need
to test?
The App component uses localStorage.
Difficult to test.

32. Solution:
Dependency
Injection

33. 10. Dependency Injection
class App extends Component {
constructor(localStorage) {
super();
this.localStorage = localStorage;
// replace all uses of localStorage by
this.localStorage
...
}
}
const app = new App(window.localStorage);
app.mount(document.body);
➔ Give localStorage instance in the
constructor
➔ Use it inside the App component
But, it only works with the root
component!

34. Owl solution: the env
App env
A
env
B
env
C
env
D
env
props props
props props

35. 10. Dependency Injection
class App extends Component {
constructor() {
super();
const tasks =
this.env.localStorage.getItem("todoapp");
...
}
// replace all uses of this.localStorage
by this.env.localStorage
}
App.env.localStorage = window.localStorage;
const app = new App();
app.mount(document.body);
➔ Setup the App env before creating it
➔ It is now available in this.env for the
whole application

36. Issues:
● Some code duplication (with localstorage)
● App component does too much
● State management is all over the place
● Localstorage code is all over the place

37. 11. Extracting concerns
We want components to be mostly
about UI (look and feel + event handling)
So, we want to extract:
➔ Task state management
➔ Persistence (local storage)
env
StoredTaskModel
TaskModel
App env
Task 1 env Task 2 env

38. 11. Extracting concerns
class TaskModel extends owl.core.EventBus {
nextId = 1
tasks = [];
constructor(tasks) {
super()
for (let task of tasks) {
this.tasks.push(task);
this.nextId = Math.max(...);
}
}
addTask(title) {
const newTask = ...;
this.tasks.push(newTask);
this.trigger('update');
}
toggleTask(id) {
...
}
deleteTask(id) {
...
}
}
class StoredTaskModel extends TaskModel {
constructor(storage) {
const tasks = storage.getItem("todoapp");
super(tasks ? JSON.parse(tasks) : []);
this.on('update', this, () => {
storage.setItem("todoapp",
JSON.stringify(this.tasks))
});
}
}

39. 11. Extracting concerns
class App extends Component {
constructor() {
super();
const model = new StoredTaskModel(
this.env.localStorage
);
model.on('update', this, this.render);
useSubEnv({model});
}
// access model with this.env.model (or
env.model in template)
}
class Task extends Component {
static template = TASK_TEMPLATE;
toggleTask() {
this.env.model.toggleTask(this.props.task.id);
}
deleteTask() {
this.env.model.deleteTask(this.props.task.id);
}
}

40. ● Use composition (for StoredTaskmodel)
● Inject model in App
● Use a Store
● Make local storage key configurable
● Add filters
● Allow edition
github.com/ged-odoo/owl-todolist

41. Thank You