说明：这是对Odoo官方Owl公开的资料的翻译。以后再添加我在Odoo的Owl源码中领悟到的技术说明

项目概况

Odoo Web Library (OWL) 是一个较小的（?<20kb gzip压缩）UI框架，旨在用作Odoo Web客户端的基础。 Owl是一个用Typescript编写的现代框架，以一种简单而一致的方式吸收了React和Vue的最佳创意。 Owl 的主要特点是：

• 声明性的组件系统，
• 基于回勾的反应系统
• 默认情况下，支持并发模式
• 支持存储和前端路由

Owl 组件是使用ES6类定义的，它们使用QWeb模板，底层虚拟DOM，与挂钩完美集成，并且呈现是异步的。

在线尝试！ https://odoo.github.io/owl/playground上提供了一个在线测试环境，可让您试验Owl框架。 有一些代码示例展示了一些有趣的功能。

Owl 目前已经是稳定版本。 路线图（https://github.com/odoo/owl/blob/master/roadmap.md）中说明了将来可能发生的变化。

什么是Owl ？

Odoo为什么决定制定另一个框架？ 这确实是一个短时间内无法回答的问题（https://github.com/odoo/owl/blob/master/doc/miscellaneous/why_owl.md）。 简而言之，我们认为，尽管当前最先进的框架非常出色，但是它们并未针对我们的用例进行优化，并且仍有其他空间。

如果您对与React或Vue的比较感兴趣，可以在此处找到更多其他信息（https://github.com/odoo/owl/blob/master/doc/miscellaneous/comparison.md）。

范例

这是一个简短的示例来说明交互式组件：

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);

请注意，计数器组件通过useState回勾进行反应。 另外，这里的所有示例都使用xml helper（https://github.com/odoo/owl/blob/master/doc/reference/tags.md#xml-tag）来定义内联模板。 但这不是强制性的，许多应用程序将单独加载模板。

在playground应用程序（https://odoo.github.io/owl/playground）上可以找到更多有趣的示例。

设计原则

OWL设计用于高度动态的应用程序，在这些应用程序中，常见的变更需求是常见的，并且大型团队需要维护代码。

• 基于XML：模板基于XML格式，该格式允许有趣的应用程序。例如，它们可以存储在数据库中并使用xpaths动态修改。
• 浏览器中的模板编译：这可能并不适合所有应用程序，但是如果您需要在浏览器中动态生成用户界面，则此功能非常强大。例如，通用表单视图组件可以从XML视图为每个各种模型生成特定的表单用户界面。
• 不需要工具链：如果由于各种原因（安全性/部署/动态模块/特定资产工具）而不能使用基于npm的标准Web工具，则这对于某些应用程序非常有用。

Owl 的设计既不快也不小（即使在这两个主题上都不错）。构建应用程序不是一个废话。定义组件（带有类）只有一种方法。没有黑魔法。它只是工作。

文档

可以在这里找到有关Owl的完整文档：

• 主文档页面（https://github.com/odoo/owl/blob/master/doc/readme.md）。

一些最重要的页面是：

• 教程：TodoList应用程序https://github.com/odoo/owl/blob/master/doc/learning/tutorial_todoapp.md
• 如何开始一个Owl项目
• https://github.com/odoo/owl/blob/master/doc/learning/tutorial_todoapp.md
• QWeb模板语言
• https://github.com/odoo/owl/blob/master/doc/reference/qweb_templating_language.md
• 组件
• https://github.com/odoo/owl/blob/master/doc/reference/component.md
• 回勾
• https://github.com/odoo/owl/blob/master/doc/reference/hooks.md

安装Owl

Owl在npm上可用，可以使用以下命令进行安装：

npm install @odoo/owl

如果要使用简单的<script>标记，可以在此处下载最新版本：

• owl-1.0.9.js(https://github.com/odoo/owl/releases/download/v1.0.9/owl.js
• owl-1.0.9.min.js(https://github.com/odoo/owl/releases/download/v1.0.9/owl.min.js

License

OWL is LGPL licensed.