hi, 大家好, 我是徐小夕. 之前在趣谈前端
和大家分享了很多前端工程化, 可视化和低代码的技术实践, 最近上线了《小夕朋友圈》栏目, 我会定期采访国内外优秀的开源作者, 独立开发者和创业者, 分享他们的学习成长经验和独立产品开发经验, 让更多热爱技术的小伙伴建立技术自信和技术连接. 同时也让 5w+
程序员伙伴们看到国内优质的开源项目和技术产品.
如果你也是一名独立开发者, 开源作者, 或者创业者, 欢迎自荐或交流.
今天采访的嘉宾是一位对技术非常热爱的开源作者, 前端方向, 热爱技术创作和开源, 也一直在研究前端框架底层的一些设计思想, 他在 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
侵入性更低,只要掌握数据与业务逻辑之间的关系就能轻松上手。
html
<!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
这款开源项目感兴趣, 也欢迎体验或参与共建.
如果你也是一名独立开发者, 开源作者, 或者创业者, 欢迎自荐或交流.