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

项目概况

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

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

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

在线尝试！ 上提供了一个在线测试环境，可让您试验Owl框架。 有一些代码示例展示了一些有趣的功能。

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

请注意，计数器组件通过useState回勾进行反应。 另外，这里的所有示例都使用xml helper（）来定义内联模板。 但这不是强制性的，许多应用程序将单独加载模板。

在playground应用程序（）上可以找到更多有趣的示例。

设计原则

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

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

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

文档

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

主文档页面（）。

一些最重要的页面是：

教程：TodoList应用程序如何开始一个Owl项目模板语言组件回勾安装Owl

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

npm install @odoo/owl

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

owl-1.0.9.js((

OWL is LGPL licensed.