前端小白刚刚涉足前端开发,面对琳琅满目的框架,不知该如何挑选,不可免俗的落入了货比三家的尴尬场面。在看过尤雨溪在JSconf的演讲后,对 _React_, _Vue_, _Angular_ 三大框架有了一些基础认识。
视频中,尤通过Scope和Render Mechanism两个角度对比了三大框架。
Scope (范围)
范围意为框架试图为用户解决多少问题。小的框架专注于原始的概念,依靠活跃的生态系统,像集市一样自下而上的发展。大的框架试图提供常见问题的全套解决方案,也因此会像教堂一样自上而下的发展。
Small Scope
_React_ 在官网中自称是JS的UI库,可见其范围之小
Pros
- 更少概念 -> 更快开始
- 更多用户自由度 -> 活跃的生态系统
- 更少维护范围 -> 更多力气用来创新
Cons
- 解决复杂问题时需要更多的抽象(基建)工作
- 重复的抽象工作渐渐产生模式,模式渐渐变成了成熟的第三方解决方案,第三方解决方案变成了某种程度上的必备知识却不一定有完备的文档可供学习。
- 生态系统的碎片化
Large Scope
_Angular_ 特性丰富,功能繁多,是大型框架的代表
Pros
- 大多常见问题可在框架内找到解决方案,不用为选择何种第三方方案而烦恼
- 稳定一致的生态系统
Cons
- 需要更多的前置技能
- 在内置解决方案不适配你的问题时体现出的不灵活
- 由于框架开发团队要负责框架的全部维护工作,在保证整体协作性的引入新的特性会变得代价昂贵
渐进式Scope
视频中,尤称 _Vue_ 落在了 _React_ 和 _Angular_ 的中间, 同时享有Small Scope和Big Scope的优缺点
Pros
- 引用一个 “Vue.js” 就可以开始编码,上手简单
- 必要时可以引入官方提供的部件(e.g. Router, Vuex),它们有完备的文档。当然你也可以实现自己的需求
Cons
- 框架开发团队需要维护更多的东西。对比有钱有人的Google和Facebook,更暴露出更新缓慢的问题
Render Mechanism (渲染机制)
渲染机制意为框架下的UI构造的表达方式以及框架如何渲染这些东西。在这一节,尤以 _React_ 和 _Angular_ 为例做出了对比。
JSX / Virtual Dom
Pros
- JSX 拥有高度的表达能力与自由
- Virtual Dom 将试图抽象为数据,可以渲染在DOM之外的地方(e.g. _React Native_)
Cons
- 更多自由度意味着更多的不确定性,会给调优带来困难
- scheduling在感官上提高了性能其实有更多开销
Template
Pros
- 更直接的渲染方式也意味着更好的性能表现
- 更固定的表达方式意味着更多优化的可能
- 适当优化可带来更轻量的初次加载
Cons
- 受模板语法所限
- 运行时或构建阶段的编译开销
- 优化带来更冗余的template
VDom + Tepmlate
Vue 同时支持VDOM和template,也同时享有两方的优点。至于缺点,尤提到了两点。
- 不会比原生JS快和template
- render()和template该用哪个的选择问题
感觉都没说到点子上,所以又去查了查,参考如下
vue.js有哪些设计缺陷?
个人思考
作为一个初学者,40分钟的视频边查各种词汇边看花了一个下午,对各个框架的底层设计并没有很好的理解。还是不要纠结孰优孰劣得好,不如抓起一个就学,充分了解各个框架的设计思路与底层实现,得出自己的结论。