Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版

Alan

4 年前

按照惯例 Odoo 14将会于今年10月份正式发布，这是一个双号版本，因此更为受人关注，架构上的一大变化是引入了全新的自有前端框架，即 OWL。其主文档从4月份之后几乎没有变化，这里计划利用业余时间进行学习和翻译。

🦉 OWL Framework 🦉

具有钩子、响应式状态和并发模式的基于类的组件

相关文章：Odoo 14开发者指南（Cookbook）第四版

项目概览

Odoo Web Library (OWL)是一个小型UI框架（gzip 压缩后不足20kb），用于作为 Odoo 网页客户端的基石。Owl一个使用Typescript编写的现代框架，以简单、连贯的方式吸取了React和Vue最佳编程思想。Owl的主要特性有：

声明式的组件系统
基于钩子(hook)的响应式系统
默认并发模式
存储和前台路由

Owl组件通过ES6类进行定义，使用QWeb模板，底层为虚拟DOM，完美集成钩子并且渲染是异步的。

在线尝鲜！可使用线上的playground试用Owl框架，地址为https://odoo.github.io/owl/playground。其中有一些示例代码展示它的一些特性。

Owl当前已稳定。未来的修改计划参见路线图。

为何开发 Owl？

Odoo为何决定再开发一套框架呢？这个问题的答案可以有很长。但简而言之，我们相邻当前流行框架非常优秀，但对我们的使用场景并不够优化，还有改进的空间。

如果想要了解它与 React 或 Vue 的对比，可点击此处获取更多的信息。

示例

以下是描述交互组件的简短示例：

const { Component, useState } = owl;
const { xml } = owl.tags;

class Counter extends Component {
  static template = xml`
    <button t-on-click="state.value++">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class App extends Component {
  static template = xml`
    <div>
      <span>Hello Owl</span>
      <Counter />
    </div>`;

  static components = { Counter };
}

const app = new App();
app.mount(document.body);

const { Component, useState } = owl;

const { xml } = owl.tags;

class Counter extends Component {

static template = xml`

Click Me! [<t t-esc="state.value"/>]

</button>`;

state = useState({ value: 0 });

}

class App extends Component {

static template = xml`

<div>

<span>Hello Owl</span>

</div>`;

static components = { Counter };

}

const app = new App();

app.mount(document.body);

注意 counter 组件通过 useState 钩子变为响应式。同时，此处所有示例使用了 xml 帮助标签来定义行内模板。但这并非强制，很多应用会单独加载模板。

更多有趣的示例参见playground应用。

设计原则

OWL设计用于高度动态的应用，其中修改的需求很普遍并且代码由大型团队维护。

基于XML：模板基于XML格式，这可创建出有趣的应用。例如，可以在数据库中进行存储并使用xpath动态修改。
浏览器中进行模板编译：这可能并不适合所有应用，但如果需要在浏览器中动态生成用户界面，就非常强大了。例如，通用的表单视图组件可以通过一个XML视图对每个模型生成具体的表单用户界面。
不依赖于工具链：对一些应用这极其有用，如出于某些原因（安全/部署/动态模块/具体资源工具），不能够使用基于npm的标准web工具。

Owl的设计初衷并不是快速、小巧（虽然在这两方面它都做得不错）。它不是一个构建应用的随意框架。只有一种定义组件的方式（借助于类）。也没有黑魔法。It just works.

🦉 OWL文档 🦉

学习Owl

你是Owl的新手吗？从这里开始学习吧！

参考手册

以下可以查找到Owl所提供的所有特性、类或对象的完整手册。

其它话题

这一部分提供了一些其它文档，用于讲解一些既不属于教程又不属于参考文档的话题。