說明：這是對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（/file/2020/09/11/20200911133830_3.jpg.md 但這不是強制性的，許多應用程式將單獨載入模板。

在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.mdQWeb模板語言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.jsowl-1.0.9.min.js(https://github.com/odoo/owl/releases/download/v1.0.9/owl.min.jsLicense

OWL is LGPL licensed.