又进入了等需求阶段啦啦~这几天因为小程序的事情,突然有个空档和闲心去研究两天前端框架,看知乎上react和vue掐架好久,也兜兜看看了看各路人马的感想,然后给自己补了个课满足了下好奇心,也理了些思考写在这里。
问题
若要做小程序&网页的前端,面对五花八门的框架和解决方案,到底该如何做技术选型、选框架?
这个问题一看其实就太大了,首先继续拆解问题,并限定一些前提条件。
考虑
先列前提考虑项
- 开发需求是怎么样?e.g.大型网站or小型页面or小程序or移动app
- 项目是长期or短期?
- 项目对页面加载等的速度/技术要求
- 项目由谁开发维护?自己or招新手or老鸟?此人除了当前项目未来还需要做什么?
- 公司技术栈
- ……
再列选项框架考虑项
- 框架成熟度(坑多不多,有没有很多人踩过)
- 框架应用范围(是否适用于PC、移动端、小程序、甚至app)
- 在不同平台运行速度
- 使用此框架的短期/长期开发速度
- 使用框架的学习成本
- 框架的社区活跃与周边组件成熟度
- 是否简洁优雅(写起来舒服)
- ……
举个例子
- 开发需求:小程序与运维网页前端
- 项目周期:有短期有长期
- 技术要求:无特定需求,能越快越好
- 由谁维护:自己、可培养的新人、有经验可直接上手者。公司角度看,这样的业务招的人应该是越便宜,越好招越好。
- 公司技术栈:皆无长期专精前端者
然后再说选框架,若有一个框架满足,成熟度高,运行速度快,学习成本低,开发速度快,社区活跃度高,配套成熟,当然也就不用纠结了,关键在于比较下来,对于特定人群而言,A框架在学习成本上有优势高,B框架在开发速度上有优势,A框架当前成熟度不高但前景好,B框架喜欢的人多。诶其实最难界定的东西变成了喜不喜欢了,在知乎上老在掐而说不清楚的点也在这儿。当初公司CTO在后端选型也纠结过,另一个技术和他说,坑都一样多,选你喜欢的。最后他选了和他个人感觉特别匹配的Go,语言简单,性能一般,用的人多。
这里产生了一个新问题,一个语言或者一个框架,喜不喜欢,用的顺不顺手,到底意味着什么。
我想来想去大概跟价值观、思维模式、惯性有关系。拿自己举例子,因为前些年用过Angular框架,去看React,那是怎么都不顺眼的,什么css都写在js里了嘛……再看Vue,无论是语法、数据绑定还是模块划分都相似,一眼上去,直觉对Vue更有好感,毕竟Vue的创始人是从Angularjs出来的……但有些人以前开发java,转开发前端,可能react的组织方式更容易适应。所以说,“用起来舒服”这句话,还挺玄学的……带着一定偏见去对比,总会更倾向于找有利证据吧。
React or Vue
说到前端框架又不得不比较这两个框架了,毕竟若是招人,这两个技术栈相对好招。但现在看别人的比较都是在比较早期了,如今已是2018后半年,自己做个当前状况的简单对比吧。
比较项 | React | Vue | 结论 |
---|---|---|---|
历史 | 11年开用,13年开源,持续更新中 | 发布于14年,持续更新中 | Vue更新,几乎为尤雨溪独自开发 |
github star | 108853 | 110999 | 旗鼓相当 |
github 搜索项目数 | 578K | 162K | react多 |
学习成本 | jsx、es2015、react | Vue | Vue上手更快 |
中文文档 | 社区翻译 | 官方 | react要搜,且可能会慢个版本 |
运行速度 | 差不多 看这里 | ||
脚手架 | create-react-app | Vue-cli | emmm |
周边1 状态管理 | Flux、Redux | Vuex | emmm |
周边2 UI组件 | antd | ant-design-vue | 官方支持react,但社区有人做了vue支持 |
周边3 router | react-router | vue-router | emmm |
周边4 调试工具 | React Developer Tools | vue-devtools | emmm |
周边5 小程序 | taro | mpvue | emmm |
周边6 native | react native | Weex | 两者都还有很多坑 rn已被airbnb弃用, week坑也不少。代码写一遍,到处都能用还只是美好愿景,除非特别简单那是另一回事了 |
周边7 TS | 已支持 | 已支持 | emmm |
其实比下来,真的挺旗鼓相当的不是嘛,良性竞争共同进步多好。
说些其它的
以前就没吃透VM*的概念,这次干脆把这些概念重补了一下,还有双向绑定的原理之类,列一下看的链接。
关于MVC、MVP、MVVM
界面之下:还原真实的MV*模式
https://github.com/livoras/blog/issues/11
构建一个使用 Virtual-DOM 的前端模版引擎
https://github.com/livoras/blog/issues/14
深度剖析:如何实现一个 Virtual DOM 算法
https://github.com/livoras/blog/issues/13
用javascript实现的数据双向绑定
https://segmentfault.com/a/1190000003958242
剖析Vue原理&实现双向绑定MVVM
https://segmentfault.com/a/1190000006599500