Tonic（组件框架）

我喜欢像 Tonic 这样的微型框架。它本质上是对 <web-components /> 的语法糖，使其更易于使用。定义一个 Class，使用模板字面量创建一个 HTML 模板，可能还会有一些其他的高级辅助工具，这样你就可以得到一个组件，它与 React 组件没什么区别，只不过你不需要构建流程或其他复杂的工具。

以下是一个 Hello World + Counter 示例

它们有一大堆 示例（在一个 单独的仓库 中）。你可以获取并 使用它们，它们非常棒！因此，Tonic 可以被视为一个设计系统，也可以被视为一个 Web 组件框架。

公平地说，它与 Google 支持并积极推广的 Lit 并无太大区别。

以下是一个使用 Lit 的 Hello, World + Counter 示例

还有 Dave 刚刚展示给我的 petite-vue，所以我认为我也应该试试它。

我认为 petite-vue 示例的优势在于，它可以通过纯粹的声明式 HTML 轻松实现。当然，在具体的功能、语法、理念和大小方面，还需要考虑其他因素。只从大小来看，如果我在 DevTools 中打开网络选项卡并查看每个演示的网络传输 JavaScript 代码……

• Tonic = 5.1 KB
• Lit = 12.6 KB
• petite-vue = 8.1 KB

它们基本上都一样：非常小。

我从未用它们中的任何一个构建过任何实际的东西，因此我不太适合比较它们。但是，它们在我看来都非常棒，尤其是因为它们不需要构建步骤。

喜欢视频吗？

我和 Dave 讨论了所有这些。