精读《12 个评估 JS 库你需要关心的事》
1 引言
作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:
- 特性。
- 稳定性。
- 性能。
- 包生态。
- 社区。
- 学习曲线。
- 文档。
- 工具。
- 发展历史。
- 团队。
- 兼容性。
- 趋势。
下面总结一下作者的观点。
2 概述 & 精读
特性
当你调研一个 JS 库,功能当然是最重要的,就好比 React 的用于开发 UI 界面非常方便,这是流行起来的一部分因素。
但同时 React 解决的问题很聚焦,于是把例如 Router 和 Store 部分交给社区给解决方案,这就让 Vue 的官方维护生态模式发展了起来。但这更多取决于你的偏好,像 lodash 这种精简的库也会长盛不衰,重要的是这个库提供的能力是否解决了你的业务问题。
评分:A - 化腐朽为神奇。B - 更优雅的解决方案。C - 比现有方案差。
稳定性
这个库如果经常出 BUG,那显然无法在生产环境使用。最好经过严格的测试,保证这个库一定不会出错,这样我们就可以专心排查业务的问题了。
评分:A - BUG 很少,方便调试。B - 不会影响你的稳定性,比如出 BUG 概率和你的业务代码相近。C - 引入该库会让你背线上故障。
性能
如果让用户 15 秒才能打开网页,那一切都是徒劳。
拿 PReact 为例子,为什么 API 相同的轮子可以活下来?因为体积小,而且 PReact 把宣传重点放在性能上。
如何一句话说明白你不是在造无用的轮子?性能更好。
评分:A - 小体积,高性能,支持各种黑科技特性比如 Tree shaking。B - 对性能没有影响。C - 导致性能降低。
包生态
用过 monaco-editor 吗?大家都在用 webpack 但它却走 amd 路线,我不知道你用什么方法让它支持 commonjs 的,但这一定耽误了你不少时间。
包生态包括第三方包的成熟度,包的使用难易度,支持多少种模块化方案,是否支持 TS,有没有管理好自己的依赖等等。
开箱即用是最好的,有长期维护组织的更佳。
同时不要有太多相互竞争的社区方案为佳。比如工具库用 lodash 这很容易,但 React 数据流方案选择哪个?太多的竞争对手不断写软文抢夺用户(程序员)的注意力,试图说服他们加班重构。
评分:A - 方案唯一且生态运作良好,维护记录标准规范且顺畅。B - 很多新晋网红包,且竞争选择多。C - 没有人给你做包,想用要自己封装。
社区
能否快速在 Stack Overflow 搜到问题的答案能反映出社区的活跃度,不论是官方文档还是第三方进行的问答。
社区越活跃,帮你提前踩的坑就越多,如果你遇到一个大家都没有遇到过的问题,并不代表你用得有多深度,而可能你根本就用错库了。
评分:A - 各种论坛每日都很活跃,Github issue 问题日清。B - 论坛/聊天室不太活跃。C - 除了作者自吹的文档,再也找不到任何相关信息了。
学习曲线
不要以为把库功能做的强大,就算难用点也会有用户跪舔,这是幻觉。
Vue 之所以那么火爆,是因为原生 HTML 的门槛比 JSX 低,而使用 React 的用户往往都觉得 JSX 比 HTML 门槛低。我也不知道该怎么描述,从 JS 可以产生一切的角度,学习 HTML 反而被认为是高门槛的体现。
所以认清现实,JSX Star 多并不是其理论有多先进(理论确实先进),而是很多人觉得整体学习维护成本比 HTML 低。
评分:A - 一天就能成为这个库的熟练搬砖工。B - 浪费了一周时间才能投入使用。C - 学了一周才发现之前的理解是错的,而且认识到这只是个开始。
文档
写文档的人一般都是库的作者,这种人一般经验会比较丰富,写起文档一般不会考虑初学者的感受,所以找到一份对初学者友好的文档还是挺不容易的。
对于库的维护者,要站在初学者角度去写文档,站在使用者角度,如果文档开头就看不懂的话,最好尽早换个文档或者换个库。
评分:A - 专门维护文档站点、视频、图片、示例项目,再好一点的话可以有专门基金会组织编程比赛,通过某三岁孩子可以一天入门强力影射技术生态的完备性。B - 有最基本的 Readme 和 API 文档。C - Readme 写的是 Create react app,其他的只能查源码了。
工具
工具可以从多个维度体现出这个库的优势,首先是确实带来了使用方便,其次展示了团队维护实力的雄厚(精力溢出到可以做周边工具了)。
Redux 之所以这么火,Redux dev tools 功不可没,笔者读过一些心理学书籍,也经历过一些技术选型,看到 Redux dev tools 的图形化界面后,大脑因为受到视觉冲击比理性的逻辑思考大太多,潜意识里给 Redux 加了不少分,导致讨论结果都变得不太理性了。
如果你的库能图形化表达,或者做一个 PPT 或者辅助工具,那一定会大大加分。(React chrome 插件在打开 react 做的网页时亮起来真的很酷,这个勋章很有仪式感,以至于我不想换一个框架)
评分:A - 两个以上的工具,包括浏览器拓展、代码编辑器拓展、CLI 工具或者 SaaS 服务,实力碾压的话,会有许多花哨的辅助工具出现。B - 一个工具。C - 没有工具。
发展历史
一个 Star 10K 的库,如果最早提交是十天前,就算不是刷的也最好也不要用,因为不知道哪天作者就不再维护了。
历史越悠久的库使用风险越小,除非它所在的面被淘汰(技术栈、生态、编程语言等等)。
评分:A - 4 年以上历史,有权威认证。B - 1-4 年历史,已经有不少人使用过了。C - 作者自己都没用过就安利你用到线上去。
团队
看谁是这个库背后的男人。大公司广泛使用的开源库,并且有一定国际影响力,而且大厂也有成功开源历史经验的话,就会增加说服力。
但 Vue 就是个例外,几乎凭尤大一人之力打造,对这种情况,笔者想说的是,一个真心热爱技术并践行全职维护的人,也许比一个背着 KPI 的团队维护副产品更靠谱。
评分:A - 一线大厂,品质权威认证。B - 中型团队维护,并且有清晰的分工记录。C - 工作之余顺便开源出去,就没打算对这个库负责。
兼容性
除了浏览器兼容性,库 API 的兼容性也非常重要。当你很容易联系到作者,并且改动 API 的建议被很快采纳时,你就要小心了。
React Router 3 -> 4 升级带来的阵痛大家都有体会过,babel7 放弃 stage 0-4 也带来不少吐槽,Angular1 和 Angular2 的区分直接让很多人粉转黑了。虽然许多时候频繁的更新是为了增添新功能,但如果带来 API 兼容问题,反而会招来反感。
假如你们团队维护的 10 年间,因为某个库作者非常勤奋的更新导致以时间为维度,均匀分布了数十种不同的版本,你会发誓下一个项目不再使用这个库了。
评分:A - 总是能兼容升级,实在不行就提前警告并告知在某个版本会废弃,并提供迁移工具,比如 React。B - 有 Break Change 但是文档把升级改动写的很清楚。C - 突然到来的小版本升级让你不得不重构之前的调用代码。
趋势
炒作也好,讨论也好,保持大家对这个库的新鲜关注非常重要,因为这能连带的让这个库做好上面说的很多点。
但注意过分的炒作,可能会降低这个库的稳定性,毕竟在用户爆发式增长之前,最好有一部分当小白鼠。
评分:A - 是 HackNews 的明星话题,Star 成千上万,各种会议以此为名(Vue conf,React conf)。B - 几百 Star,有一些讨论。C - 别看现在 Star 少,迟早有一天我会超过那啥那啥。
搬家成本
这个是作者补充的比较重要的一天:如果哪天不用这个库了,换成别的成本有多大?
这方面测试库做的很好,很多主流测试库比如 Jest、Ava、Mocha、Jasmine 等之间都有互转的脚本,业界基本达成了一些共识和规范。
比较坑的是 React、Vue、Angluar,使用之后你基本就被绑定了,至今没有谁可以无缝做各大框架的迁移。当然 JS 的年龄还很短,而且说不好未来还会被新语言、技术、容器颠覆而成为历史,标准化不是做不到而是需要时间,也许就在十几年之后,但是今天就是做不到。
3 总结
下次技术选型讨论时,可以拿出规则一条一条比对了!
然后技术选型只是基础库,利用这些基础可以维护好自己的开源库,把更多时间用在创造业务价值上。
仔细思考就会发现,程序员开发的工具库也适合点线面体的概念。一个库 react-button 就是一个点,而它所在的线 react 如果被人抛弃了,无数个 react-xxx 也会翻船。而 react、vue、angluar 这些线都在 js 引擎这个面上,当可以用 C# 写 WebAssembly 时,Reason、Blazor、Dart 就会逐渐成为浏览器的主角,react 之类的库统统要回炉打造。而当未来人机互联不需要浏览器作为媒介时,js 引擎这个面依附的体 - 人机交互场景也被打翻了,这一浪又会引起多大的变化。
所以技术选型是为了解决当下业务问题,仔细考虑好几个因素,适合解决业务场景就足够了。
4 更多讨论
如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。
精读《12 个评估 JS 库你需要关心的事》的更多相关文章
- 精读《V8 引擎 Lazy Parsing》
1. 引言 本周精读的文章是 V8 引擎 Lazy Parsing,看看 V8 引擎为了优化性能,做了怎样的尝试吧! 这篇文章介绍的优化技术叫 preparser,是通过跳过不必要函数编译的方式优化性 ...
- 深入浏览器工作原理和JS引擎(V8引擎为例)
浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...
- [翻译] V8引擎的解析
原文:Parsing in V8 explained 本文档介绍了 V8 引擎是如何解析 JavaScript 源代码的,以及我们将改进它的计划. 动机 我们有个解析器和一个更快的预解析器(~2x), ...
- 一文搞懂V8引擎的垃圾回收
引言 作为目前最流行的JavaScript引擎,V8引擎从出现的那一刻起便广泛受到人们的关注,我们知道,JavaScript可以高效地运行在浏览器和Nodejs这两大宿主环境中,也是因为背后有强大的V ...
- Chrome V8引擎系列随笔 (1):Math.Random()函数概览
先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...
- (译)V8引擎介绍
V8是什么? V8是谷歌在德国研发中心开发的一个JavaScript引擎.开源并且用C++实现.可以用于运行于客户端和服务端的Javascript程序. V8设计的初衷是为了提高浏览器上JavaScr ...
- 浅谈Chrome V8引擎中的垃圾回收机制
垃圾回收器 JavaScript的垃圾回收器 JavaScript使用垃圾回收机制来自动管理内存.垃圾回收是一把双刃剑,其好处是可以大幅简化程序的内存管理代码,降低程序员的负担,减少因 长时间运转而带 ...
- V8引擎嵌入指南
如果已读过V8编程入门那你已经熟悉了如句柄(handle).作用域(scope)和上下文(context)之类的关键概念,以及如何将V8引擎作为一个独立的虚拟机来使用.本文将进一步讨论这些概念,并介绍 ...
- 浅谈V8引擎中的垃圾回收机制
最近在看<深入浅出nodejs>关于V8垃圾回收机制的章节,转自:http://blog.segmentfault.com/skyinlayer/1190000000440270 这篇文章 ...
- 深入出不来nodejs源码-V8引擎初探
原本打算是把node源码看得差不多了再去深入V8的,但是这两者基本上没办法分开讲. 与express是基于node的封装不同,node是基于V8的一个应用,源码内容已经渗透到V8层面,因此这章简述一下 ...
随机推荐
- jQuery Validate使用说明
jQuery Validate 导入 js 库 <script src="./jquery-validation/lib/jquery-1.8.3.js" type=&quo ...
- avalon教程-简介
avalon是什么? avalon是一个MVVM框架, Modle-模型层,即为js中从后台接口中取出的数据,例如一个对象或者对象数组,并对这些数据进行一定的格式化.常见的返回数据是这样的{id : ...
- the wait queue
using System; using System.Collections.Concurrent; using System.Threading; namespace Base { public c ...
- Hibernate课程 初探一对多映射3-3 单向多对一的测试
public static void testManyToOne(){ Student stu1 = new Student("小明","男"); Studen ...
- Java 中的四种引用
1.强引用(Strong Reference)在 Java 中四种引用中是“最强”的,我们平时通过 new 关键字创建的对象都属于强引用,如下面的代码: Person person = new Per ...
- 【翻译】Best Practices for User interface android 适配不同屏幕、不同分辨率
地址:http://developer.android.com/training/multiscreen/screendensities.html#TaskProvideAltBmp 安卓支持不同的屏 ...
- Java —类和对象
类和对象 类是对象的类型,是具有相同的属性和方法的一组对象的集合. 定义类 访问修饰符 class 类名 { 数据类型 属性名: 访问修饰符 返回值类型 方法名 {} } 创建对象:类名 对象名 = ...
- SQL varchar转float实现数字比较
select * from table where cast('经纬度' as float ) < 90
- Django基础--2
一.路由系统 URL 1.模板语言循环字典 1.简单的字典循环 <ul> {% for i in user_dict %} <li>{{ i }}</li> {% ...
- ubuntu16.04安装中文输入法(转)
转自: https://zhidao.baidu.com/question/619127469641961052.html ubuntu没有预装中文输入法,需要自己安装 sudo apt instal ...