Downloaded 43 times
![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();
}
},](https://image.slidesharecdn.com/theodoojsframework-191028100311/85/The-Odoo-JS-Framework-10-320.jpg)
![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++;
}
}](https://image.slidesharecdn.com/theodoojsframework-191028100311/85/The-Odoo-JS-Framework-19-320.jpg)
Uploaded byOdoo
The Odoo JS Framework
The document discusses the Odoo JS Framework and introduces a new framework called Owl. It summarizes that Owl is a standalone framework for building components with a declarative syntax. It benchmarks Owl against other frameworks like React and Vue, finding Owl to be 3x faster than Odoo widgets and comparable in performance to React and Vue. The document promotes Owl as the new Javascript framework for Odoo starting in version 14.
More Related Content
The Odoo JS Framework
- 1. The Odoo JSFramework 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.
- 6.
- 7. Improving Odoo Framework Layer Application/ArchitectureLayer Business Layer Incremental Redesign/Refactoring ✓ ✓ ✓ ✓
- 8. — A. L. Géry,Odoo is too stable
- 9. Optimizing the Developer Experience2 Forversion 14 and beyond!
- 10. Is something wrong in OdooJS 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 isright 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 workin upper layers, not enough at framework level ● built-in lifecycle hooks ● declarative component system
- 13. So, do wepick 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 wellwith inheritance ● template compilation on browser ● asynchronous rendering Nice to have:
- 16. So, do wepick a state of the art/well tested, well known framework? Or do we make our own custom framework?
- 17.
- 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: ● 3xfaster than odoo widgets ● about the same as React/Vue
- 22.
- 23. Odoo v14 A newbeginning
- 24. Thank you #odooexperience g2018g and seeyou around... EXPERIENCE 2019
- 25. Thank you #odooexperience g2018g and seeyou around... EXPERIENCE 2019
- 26. +10k +30k update1/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