小夕朋友圈: 前端Strve.js框架作者专访

趣谈前端 2024-02-28 09:03:49  66966

分类专栏：资讯

如果你也是一名独立开发者, 开源作者, 或者创业者, 欢迎自荐或交流.

今天采访的嘉宾是一位对技术非常热爱的开源作者, 前端方向, 热爱技术创作和开源, 也一直在研究前端框架底层的一些设计思想, 他在 21 年底开源了一款前端框架 strve.js, 目前也一直在持续迭代中, 收获了很多开源社区的反馈和建议, 接下来就来听听这位开源作者在开源路上的一些心得体会.

这次采访主要包含如下几个部分:

作者简介
什么机遇让Vam考虑着手做 strve.js 这样一款框架
strve.js 框架的设计初衷, 解决的痛点, 设计实现原理, 应用场景, 优缺点
设计 strve.js 框架的一些机遇和挑战, 以及取得的成绩
如何看待开源
strve.js 框架目前正在做以及未来的一些规划
对同样准备做, 或者正在做开源的小伙伴一些建议

作者简介

大家好，我是 Vam，专注于前端开发已有 5 年多的经验。我热衷于在 CSDN、掘金、知乎、公众号等社区平台分享我的技术文章，同时也积极参与开源项目的开发。我曾在掘金发表了一篇关于 Strve 的技术文章，累计阅读量达到了 5 万，获得了 300+的点赞。

Strve 是我非常自豪的一个开源项目，它是一个易用、快速、灵活且轻量级的 JavaScript 库，专为构建用户界面而设计。Strve 采用基于标签模板的 HTML 模板引擎，利用 ES6 的模板字符串进行模板编写，并充分利用浏览器的原生能力进行模板渲染。

什么机遇让你考虑着手做 strve.js 这样一款框架

Strve 的诞生源于我对 JSX 语法的热爱，这种在 JavaScript 中编写 HTML 的方式让我觉得非常酷。

我最初的目标是能够在 JavaScript 中编写 HTML，并通过编写 JavaScript 来改变页面状态。经过两周多的研究，我意识到自己在原地打转，因为 JSX 语法不能直接在浏览器中运行，需要通过编译工具如 Babel 才能执行。

因此，我决定在模板字符串中编写 HTML。

然而，我遇到了另一个挑战，那就是如何精确更新 DOM。我的第一个想法是利用虚拟 DOM，于是我开始学习前端框架如何使用虚拟 DOM 来精确更新 DOM。对于不懂的部分，我会去网上查找资料，然后记下来。有人可能会问，为什么要做这样可能没有太大意义的事情。

我没有深思熟虑，只是想做出一些东西来，觉得自己能做出来。有时候，我们在做一件事情之前过于考虑，这往往会阻碍我们的行动。

就这样，驱动着自己的热情，Strve 的第一个版本诞生了。

strve.js 框架的设计初衷, 解决的痛点, 设计实现原理, 应用场景, 优缺点

我将这个库命名为 Strve，这个名字的由来是字符串（String）与视图（View）的名称缩写拼接而成。Strve 的核心功能是在 JavaScript 字符串中编写 HTML 标签，并能够嵌入变量，从而实现数据驱动视图的效果。

我在上面提到，Strve 是一个易用、快速、灵活且轻量级的 JavaScript 库，专为构建用户界面而设计。那么下面我们来展开说一下 Strve 有哪些亮点。

更容易上手：只要你对 HTML、CSS 和 JavaScript 已经基本熟悉，就可以直接上手。
声明式渲染：我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系，开发者可以更加专注于业务逻辑的开发，不需要过多地关心 DOM 操作的细节。
顺滑的用户体验：模板字符串来进行模板的书写，在一些场景中代码智能提示、代码格式化方面不是特别友好。所以，我们提供了新的一种编码方式，我们可以使用 JSX 语法编写 Strve，提升用户开发体验。
性能出色：采用了虚拟 DOM 的模式，虚拟 DOM 使用 diff 算法的方法来计算出真正需要更新的节点，最大限度地减少了 DOM 操作以及 DOM 操作带来的排版与重绘损耗，从而显著提高了性能。另外，我们的 JavaScript 库在全球知名的测评榜单(js-framework-benchmark)上赢得了优秀的成绩。
组件化：一个函数就是一个组件，可以根据应用规模任意组合。并且组件特有的 “孤岛特性”，使得将虚拟 DOM 树计算的级别控制在组件级别。
灵活的应用场景：有无构建工具都可以使用，并且可以适配到其他前端框架开发的应用项目中去。
轻量级：压缩后的文件大小不足 10k。另外，可以根据不同应用场景，选择不同类型（完整版、运行时版）的文件。
周边生态丰富：createStrveApp(项目构建工具)、strveRouter(路由管理器)、strveReactivity(独立运行的可响应性 Strve)，还有两款 babel 编译插件 babelPluginStrve 和 babelPluginJsxToStrve。

下面展示一下使用它设计的todo list:

设计 strve.js 框架的一些机遇和挑战, 以及取得的成绩

2021 年 11 月左右，Strve 的第一个版本诞生，社区反馈总体上是积极的，尽管也有少数人提出了质疑。这些反馈是开发过程中的常态，每当我们在社区分享自己的作品，都必须接受他人的评价。

东西做出来了，并不是说一定要看它给你回报多少。可能我一直做，短期也做不过 React、Vue 这种已经在前端立足很多年成熟的框架。我经常拿 React 比分也是因为跟好的榜样比，肯定会有进步，总不能拿比自己差的比吧。

我看到有些小伙伴会说，你这么做下去没啥意义，重复造轮子。可能这样对前端生态来说，是的，是这样。前端生态现在平均每段时间都可能出来一个新的东西，这样的话，说的人就多了去了。Strve 做出来，并不是独辟蹊径。也是借鉴了很多优秀框架的思想。因为这样就少走弯路，毕竟只有一个人在开发。它给我最大的收获，就是两年来我在不断地优化框架中，明白了很多日常业务中没有遇到的东西。

业界内基于标签模板的模板引擎大部分都是利用 ES6 的模板字符串进行模板编写，但是在一些场景中代码智能提示、代码格式化方面不是特别友好。所以，Strve 提供了新的一种编码方式，我们可以使用 JSX 语法编写 Strve，提升用户开发体验。

另外，Strve 相对于其他前端框架，对 JavaScript 侵入性更低，只要掌握数据与业务逻辑之间的关系就能轻松上手。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Strve.js</title>
  </head>
  <body>
    <script type="module">
      import {
        html,
        defineComponent,
      } from 'https://cdn.jsdelivr.net/npm/strve-js@6.6.6/dist/strve.full-esm.js';

      defineComponent(
        {
          mount: '#app',
        },
        ({ setData }) => {
          let count = 0;

          function add() {
            setData(() => {
              count++;
            });
          }

          return () => html`<h1 onClick=${add}>${count}</h1>`;
        }
      );
    </script>
  </body>
</html>

然后，性能跑分方面，Strve 在 js-framework-benchmark 中的表现比 React 要好得多。

如何看待开源(开源的价值)

以下是我的一些总结：

学习与成长：开源项目提供了一个学习和成长的平台。通过阅读和理解其他开发者的代码，可以学习到新的编程技巧、设计模式和最佳实践。
社区建设：开源项目帮助建立和增强技术社区。开发者可以通过贡献代码、解决问题和分享知识，与全球的开发者建立联系，共同推动技术的发展。
技术创新：开源项目鼓励技术创新。开发者可以在开源项目中尝试新的想法和技术，如果成功，这些创新可以被广泛应用，从而推动整个技术领域的进步。
解决实际问题：开源项目可以帮助解决实际问题。通过开源，开发者可以将自己的解决方案分享给社区，帮助其他人解决类似的问题。
提升个人品牌：参与开源项目可以提升个人的技术品牌。通过贡献代码和解决问题，开发者可以展示自己的技术能力和专业知识，吸引更多的机会和合作。

strve.js 框架目前正在做以及未来的一些规划

Strve 目前需要优化就是组件配置更加灵活，另外还有周边生态更加完善。未来打算考虑将 Strve 支持跨平台以及无虚拟 DOM。如果愿意跟我一块做这件有趣的事情，欢迎加入 Strve 大家庭。

支持跨平台
无虚拟 DOM 模式
SSR
UI组件库

对同样准备做, 或者正在做开源的小伙伴一些建议

根据自身情况而定，如果业务压力大，工作忙，那我建议就不要逼自己。

大家做开源其实都有一个阶段，就是你刚开始有一个想法想把它做出来，刚开始是一种快乐的一种状态，就是把一个想法从 0 到 1 那种快感，其实技术人员都有这种创造一种东西的想法。

但是当你做到从 90%到 100%这个过程其实是很困难的，你就会发现把一个玩具做成真的能用的东西，就需要投入很多很多，当你把它做得真的能用，真的有人用的时候，这些人就会继续给你提不停的要求。

这就说，我得去回应这些人的期待，这又是一种心理压力。大家刚开始做开源的时候，会被创造一种东西的快感所吸引，没有意识到你以后会有很多的建议。

我对很多想要做开源的朋友的建议是，想清楚你做开源想要做什么，如果你就只是想写一个库觉得很爽，但是我后期不想去做让它耗费我很多精力去维护它，也没有问题，大家要明确这个想法。如果说你想做一个项目想做大做强，想跟 React、Vue 竞争的项目，那这个东西需要极大的投入的。如果你工作本质就很烦忙，那么大概率就没有可能做这个。所以说，适合自己, 找到自己最舒服的模式来做开源是最重要的.

最后

如果你对 strve.js 这款开源项目感兴趣, 也欢迎体验或参与共建.

- 源码仓库：https://github.com/strveJs/strve

- 中文文档：https://strvejs.gitee.io/strve-doc-zh

如果你也是一名独立开发者, 开源作者, 或者创业者, 欢迎自荐或交流.

更多零代码产品:

H5-dooring 零代码页面制作平台(https://dooring.vip)
橙子试卷试卷&表单可视化制作平台(https://turntip.cn/form-engine)

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=51763

赞同 2

评论 0 条