使用哪个框架来构建 Web 组件：lit-element vs stencil vs SkateJS？

Question

我想开始利用W3C标准http://webcomponents.me，现在所有主要的Web浏览器都支持该标准。

我在互联网上进行了调查，目前找到了以下框架：

1. Stencil - 由Ionic创建。所有Ionic组件都使用这个框架/编译器来构建本地支持的Web组件。

2. lit-element - 由Google创建，是Polymer框架的一部分。

3. SkateJS - 不知道谁在背后，但它是排名前三的热门Web组件框架之一。

有人能给我建议或意见哪个框架最好吗？

- Danilo Puric

---

虽然这是一个意见问题，很可能会被删除，但我还是要说，我只使用原生元素而不使用框架，并在任何框架中使用这些元素。我希望更多的人也能这样工作。任何可以共享的东西都应该用100%纯JS编写，然后在任何需要的地方和任何框架中使用。这样你就不会强制别人使用额外的框架，如果他们不想用的话。 - Intervalia

Web框架例如stenciljs和lit-element非常小巧实用。它们能够通过提供工具和环境来加速网页组件的构建，非常有帮助。去年，谷歌决定停止开发Polymer框架，转而支持LitElement。请查看以下链接： https://github.com/Polymer/polymer/issues/5240#issuecomment-391337152 - Danilo Puric

在我看来，任何大于2K的框架都太大了，用于共享组件。这是我的观点。虽然其他人可能不同意，但我认为，如果开发人员停止依赖框架来共享组件，而是编写本地组件，将会更好地实现可重用性。 - Intervalia

没有所谓的“最好”..13年前我们有Yui、MooTools和其他15个库与jQuery做同样的事情....那么jQuery现在在哪里？？框架和库就像你在超市购买的罐装食材。当然，你可以拿到一份餐。但是去买些杂货，品尝香料，学会切割，烘焙和烤制，你将成为一名厨师。►学习W3C标准的自定义元素/ Web组件方法。 - Danny '365CSI' Engelman

Lit绝对不等同于自由。与ReactJS一样，它采用了虚拟DOM方法，这意味着你必须通过Lit进行所有DOM操作...你不能再直接更新DOM，因为如果你这样做... Lit将完全不知道发生了什么。所以你可以忘记在F12开发者工具中进行客户端调试了。就像React或Angular一样，你需要再次经历整个构建过程。 - Danny '365CSI' Engelman

Answer 1

如果您想构建：

• 快速的
• 易于调试的
• 跨浏览器的
• 框架无关的

web 组件，您也可以考虑使用 框架。

http://vanilla-js.com/

- Supersharp

---

Vanilla-js是编写、调试和维护Web组件甚至整个应用程序的简单方法，也是唯一可行的选择。 - Intervalia

我了解过纯JS，但它似乎有些老式了。最近我发现https://storybook.js.org/变得非常流行。你对此有什么看法？ - Danilo Puric

Storybook是另一件事情。它只是帮助您暴露和记录组件，无论您使用React、Vue、Angular、Lit还是其他任何东西来编写它们。但它不是一个用于编写Web组件的框架。 - David

这对我来说似乎是在重复造轮子。毕竟，你必须编写所有必要的代码并设置项目，而且有很多人之前已经做过了，他们实际上做得很好。“人们认为计算机科学是天才的艺术，但实际情况恰恰相反，就像许多人在彼此构建的东西上工作，就像一堵由小石头组成的墙。” -唐纳德·克努斯 - mehrdad

易于调试...只要是一个Hello World项目 - EuberDeveloper

@EuberDeveloper 当我写“易于调试”时，是因为你可以使用嵌入式开发工具或连接JavaScript调试器。当你使用框架时，你需要额外的组件。 - Supersharp

Answer 2

作为一名主要从事原生vanilla JS web组件工作的开发者，我想以一个有近30年经验的资深Web开发者的身份，加入我的观点。

就像所有开发工具一样，这些工具都存在一个共同的问题。它们要么不断演进 - 强制你陷入不想要的更新循环中，让你忙于处理早已完成的任务以保持工具的新鲜和安全，要么它们就会“死亡” - 比如 SkateJS。该仓库上次提交是3年前，2019年的未解决问题甚至还没有得到评论。最新发布版本是2017年！

这不仅适用于像你提到的三个建议一样的开发工具，也适用于整个构建堆栈工具。

去年，我尝试了一下现代构建工具，以便更好地编写Web组件库。在研究中，我偶然发现了Snowpack和Vite.js。我们最初使用的是Snowpack，但当时它似乎仍存在许多稳定性问题，因此我们决定切换到Vite.js。上周，我决定再次尝试Snowpack，只发现它已被弃用，推荐使用Vite.js：

类似这样的事情发生得太频繁了，虽然工具应该帮助您更快、更好地完成工作，但往往您会发现自己正在处理工具的缺陷、更新主库时插件的不兼容性、安全问题……而不是专注于编写业务代码。即使对于像 Storybook 这样的流行工具也是如此。

一旦您开始仅依赖 ECMAScript 本身和浏览器 API，您将会发现大多数事情（例如单页应用程序的路由）都很容易自己开发。 您可能很快就不再需要构建堆栈了。 我们已经广泛支持 HTTP/2，使打包变得不可取，因此只需使用native ES modules即可。不使用构建工具和不打包还有一个巨大的好处，那就是不再需要生成和依赖映射；更不用说它通过将复杂项目的回转时间保持在毫秒级别，极大地改善了开发体验。 您编写的代码就是运行的代码 - 这是多么惊人的事情啊！当您的调试引导您进入需要花费数年才能理解的代码时，没有第三方黑盒子。

不要使用CSS预处理器，而是使用本地CSS和自定义属性——本地CSS嵌套也将在浏览器中出现。

要完全摆脱构建过程，还有一些缺失的部分需要解决，但这些正在进行中。最重要的是：

• CSS模块脚本 <- 现在我们有了这些。万岁 :)
• HTML模块
• JSON模块（第三阶段）

一些库已经开始采用这种方式，例如ficus.js。

- connexo