The Odoo JS Framework - Géry Debongnie, RD Framework JS Team, Odoo

1. The Odoo JS Framework
Géry Debongnie (ged) • RD Framework JS Team
Odoo, JS, web, v13, v14, ...
EXPERIENCE
2019

2. Odoo V13
A (frontend) overview1
Evolutionary steps...

3. ● POST → GET
● cache control
● hash-based urls
HTTP

4. Native Promises
_loadAction: function (actionID, context) {
var self = this;
return new Promise(function (resolve, reject) {
self.trigger_up('load_action', {
actionID: actionID,
context: context,
on_success: resolve,
on_failure: reject
});
});
},

5. Views improvements

6. New Views

7. Improving Odoo
Framework Layer
Application/Architecture Layer
Business Layer
Incremental Redesign/Refactoring
✓
✓
✓
✓

8. — A. L.
Géry, Odoo is too stable

9. Optimizing the
Developer Experience2
For version 14 and beyond!

10. Is something
wrong in
Odoo JS
Land?
_appendController: function (controller) {
dom.append(this.$el, controller.widget.$el, {
in_DOM: this.isInDOM,
callbacks: [{widget: controller.widget}],
});
},
on_attach_callback: function () {
this.isInDOM = true;
var currentController = this.getController();
if (currentController) {
currentController.widget.on_attach_callback();
}
},

11. Or maybe
something is right
in frontend world...
<template>
<div id="app">
<h1>My Vue App</h1>
<PersonGreeter personName="Lyra" />
</div>
</template>
<script>
import PersonGreeter from
'./components/PersonGreeter.vue';
export default {
name: 'app',
components: {
PersonGreeter
}
}
</script>
Fun note: slide from last year

12. Too much work in
upper layers, not
enough at framework
level
● built-in lifecycle hooks
● declarative component system

13. So, do we pick a state of the
art/well tested, well known
framework?
Or do we make our own custom
framework?

14. ● QWeb/XML based
● monkey-patchable
● no extra tooling allowed
What we need:

15. ● works well with inheritance
● template compilation on
browser
● asynchronous rendering
Nice to have:

16. So, do we pick a state of the
art/well tested, well known
framework?
Or do we make our own custom
framework?

17. Introducing
OWL3
Odoo Web Library

18. Owl Javascript Framework
● standalone framework
● declarative component system
● class based
● based on QWeb Engine
● no nonsense
https://odoo.github.io/owl/

19. Component
Example
import { Component, useState } from 'owl'
import { xml } from 'owl/tags'
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++;
}
}

20. import { Component } from 'owl'
import { xml } from 'owl/tags'
import { Counter } from './Counter'
class App extends Component {
static template = xml`
<div>
<span>Hello Owl</span>
<Counter t-if="state.flag"/>
</div>`;
static components = { Counter };
state = useState({ flag: true });
}
Composition

21. Performance
Owl is:
● 3x faster than odoo widgets
● about the same as React/Vue

22. Try it online:
https://odoo.github.io/owl/playground/

23. Odoo v14
A new beginning

24. Thank you
#odooexperience
g2018g
and see you around...
EXPERIENCE
2019

25. Thank you
#odooexperience
g2018g
and see you around...
EXPERIENCE
2019

26. +10k +30k update 1/10 Delete 30k
Owl 1911 6385 1367 22482
React 2033 8688 1379 23190
Vue 2482 7577 1237 23119
Odoo
Widgets
6577 24112 1647 60565
Owl Benchmarks
Time in ms, less is better