对很多前端开发的小伙伴来说,vue、react以及angular孰优孰劣的争论是长期的热门话题,感觉国内vue粉应该最多,其次是react粉,使用angular应该比较少了。我自己什么粉都不是,作为一个务实的码农,在我眼中没有什么好技术,也没有什么坏技术,不管什么技术用到不适当的地方都是垃圾。技术也没有什么高级深奥和低级简单之分,你弄懂了都简单,你没弄懂的时候都复杂。
技术,就像一个破罐子,摆在博物馆里就成了古董宝贝,扔到大街上,就是等着环卫工人清理的垃圾。
在我前端技术的选型一文中,对vue、react等“重要、关键的”前端框架轻描淡写的一笔带过,在很多小伙伴看来,可能觉得不太理解,今天就再来聊几句。
大约2017年吧,公司从Server Page技术栈转向前后端分离架构时,我大致浏览了一下angular、vue、和react相关的技术文档,没什么好纠结的,很轻松就能决定选择vue,我清楚我要的就是vue。为什么呢?基于我对之前knockoutjs之类的MVVM的理解,vue入门应该是最平滑的,加上团队的技术人员原本就很熟悉“在html中添js代码”的思维。在重构一个原本就已经用SeverPage技术完整实现过的企业信息系统,页面交互的复杂度能到哪儿去,我心里太有底了,vue就是当然的选择。
工作中的选择是一回事,在技术中自己的喜好是另一回事。工作中我虽然选择了vue,但是从技术上,我更推崇react。当时,我就和一些前端团队成员说,随着我们从企业信息系统逐步转向互联网业务平台的建设,我们的前端的技术方向应该是react。
我算是一个基因论者吧,一个事物在出生时貌似无关紧要的一个细节,都可能会在日后发展成长中起着重要影响。react中其实没有html,是纯粹的js,或者说是“在js中添加html”,而vue是“在html中添加js”,虽然最后都是把html和js两者整合到一起,编译打包后更是没什么区别。但是,我却觉得这是两个框架非常本质的区别所在。正是这点区别,我感觉react的框架是完备且逻辑自洽的,和VC中的MFC、C#中Winform、以及Java中AWT或者Swing等GUI抽象模型都是一致的,所以从理论上,我觉得react是好东西,是前端的自成体现的解决方案。
作为对比,html模板带来了入门的平滑,同时也必然成为一个包袱。jsx和template,就是vue中的鱼和熊掌,不好兼顾啊!另外,html的世界,包括http的世界里是没有“类型”的,一切都是文本,而现在TypeScript是非要在js中搞类型出来的,所以从vue2到vue3,为了生态,就得保留template特性,同时又要拥抱jsx和TypeScript,事情只能越搞越复杂。
顺便推荐在掘金上看到一篇讲vue3的文章,《Vue3的割裂感:欣喜-震惊-困惑-失望 - 掘金》,作者的分析很到位,其实作者能看到的这些问题,写vue的尤雨溪当然也是一清二楚,只不过决定如何做的出发点不同吧了。文章结尾,作者写到:“最后个人建议,在Vue3版本,无论是公共开源组件还是业务代码,不要使用template相关功能(包括插槽、指令、修饰符等),这样才能更好的接入到jsx TypeScript中。”,从理论上说,这个建议符合我的推理。
为什么要jsx?react中没有html,不能直接用原始的js代码添加html,总得搞个最终能产生html的类似东西吧?或许,W3C的规范不尽完善、浏览器对W3C规范的支持也不够,这时候采用react之类的框架,以及webpack等打包编译的开发方案是有价值的。但是,从发展来看,react这样的技术,只会越来越复杂,越来越偏离W3C的规范。
很多react粉会认为react很有技术含量,或许的确如此,但是我看到的是技术越来越复杂,越来越高深,我喜欢简单的东西,越简单越好。所以我果断地抛弃react,把我有限的时间用到svelte。
我选择svelte的理由非常朴素:一是简单,二是基因。先来说第一点,从svelte的官方网站上摘一个例子:如果要实现下面这样一个简单功能,动态计算两个文本框中的数值之和。看看分别用svelte、vue和react来编写,代码是什么样子。
首先是svelte,没有搞过前端的后台编码人员,大概也能明白下面的代码:
再来看看vue,似乎得学一些东西:v-model?尤其是下面的script脚本。
最后是react的实现,看这个代码,我有点头大。
我选择svelte的第二个原因是基因,svelte采用的是编译技术而不是提供一个运行时框架,说白了就是人容易懂的代码机器理解不了,svelte让你继续写人类更容易理解的简单的代码,然后由svelte帮你修改完善成机器能理解的代码,可以理解为一个编写前端代码的工具。至于,大家比较来比较去的生成的包的大小、运行的效率等等,我一点关心的兴趣都没有,不管使用哪个技术,你真的卡在了包的大小和运行效率上了吗?如果没有,你操这个心干嘛!
所以,我的第一选择是svelte,第二选择是vue,至少在template这点上,vue和svelte“长”得有点像。
,