0%

从web前端技术选型说开去

又进入了等需求阶段啦啦~这几天因为小程序的事情,突然有个空档和闲心去研究两天前端框架,看知乎上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