如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)

softwarefang      2022-02-07     223

关键词:

前端框架不断推新,众多IT企业都面临着“如何选择框架”,“是否需要再造轮子”的抉择。去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景,并针对不同规模的公司、项目给出了相应的前端技术选择方案。 

最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架。 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法。 

RequireJS,前端技术发展分水岭 

在五六年前,移动端还没有兴起,我们没有什么选择,就是jQuery。有人会说,jQuery只是类库,不是框架;但那时前端业务还没有像今天这么繁重,原本是后端干的事,全部挪到前端来,因为光是jQuery就可以包打天下。jQuery不够用,还有成千上万的jQuery的插件呢。于是问题就是这样一一衍生出来了,一个页面太多jQuery插件了,请求数太多了,于是我们得打包。打包需要我们对插件有规划。于是这一需求在社区上逐渐形成了某些 规则,其中最出名的是AMD规范,体现上RequireJS这个加载库上。 

RequireJS是前端技术发展上的一个分水岭。JavaScript在ES6之前一直没有自己的加载机制,RequireJS的出现意味着前端可以向更大规模发展。以后我说的技术选型,一个非常重要的甄选点, 即是否存在加载器机制或符合某个模块规范。 

选择前端框架应综合考虑框架本身与团队情况 

回到原来的话题,选择框架要从两面看,一是看该框架的本领,二是看你们团队的能耐。 

从框架的角度来看, 它的功能丰富不丰富、社区活跃度如何、国内社区活跃度如何(有的在国外流行,但国内只有初创公司或一些大公司的边缘项目在试水)、文档齐全与否、是否及时 更新、测试覆盖率如何、上手难易度如何,都是我们考量点。不过能进我们视野内的外国框架,基本是身经百战,在造轮子兴盛的世界闯出来的领头羊。 jQuery、Angular、KnockOut、Emberjs、Polymer、React、Backbone、Zepto,我们基本是围绕在这几个 上面转了。当然还有更大型的东西,如EXT、 YUI、Dojo、EasyUI、Bootstrap,这是UI库层面的。 

下面是2012年外国对当时流行12个JavasScript MVC框架的纯技术评估:

显然,我们第一步就是圈定时下最流行的框架与库作为评估对象,然后再根据自家公司的情况进行筛选。贵公司是建站公司,还是有自己产品的公司呢?如果是建站公司,页面不会复杂到哪里去,基本上jQuery+Bootstrap搞定,不要想得太多,就是它们。如果有自己产品, 要维护一大堆客户数据,要与客户打交道,不难想象存在非常复杂的CRM系统,按照中国人的特性,这东西只会越来越复杂,这就要慎重考虑了。这往往是持续十年的维护升级,我们需要看一下某框架是否有你们的产品那么长寿,这框架的升级更新是否频繁平缓。 

大工程应尽量避开谷歌产品 

如果你的项目是一个跨度三年以上的大工程,用《人月神话》的术语来说,90%就是个焦油坑。我们需要使用更稳健成熟的技术方案,我们需要重点避开谷歌的产品,它的许多产品都是玩票性质,GWT、Closure、Darty就是前车之鉴。Polymer基于许多新技术构建,其中Object.observe()、 Custom Elements、HTML Imports、Shadow DOM、Model-Driven Views还远远没被标准化, 许多还是独家的,变数太大,因此才出现下图所示的悲剧。 Angular不是我黑它,这东西也喜欢断崖式升级,它在1.08时兼容IE6-8,1.2时需要打补丁兼容旧式IE,1.3摒弃了对旧式IE的兼容,直 接在源码中删除了所有兼容代码,因此所有补丁方案都无力回天,并且不支持全局Ctrl函数,许多模块需要独立引用,1.4不向下支持动画模块,2.0由 at改成ts构建,由于使用Object.observe(),因此不支持IE6-11,Chrome30……

后台系统可考虑EXT、EasyUI,avalon等国内优秀框架也值得考虑 

如果你们的产品是后台系统,那么就有两个选择,使用EXT、EasyUI这些重大的UI库方案,其中EXT具有严重的排它性,它很难与其他前端解决方案并用。什么模块组织、打包、数据可视化,它都已经能全部帮你搞定。它文档齐备漂亮,入门难度中等,但它要求你的团队非常稳定,现在招一个专职EXT 的前端是很难的。EasyUI是国内比较大牌的UI框架,虽然闭源,不过想扩展它不是难事。 

此外,国内的淘宝Kissy, 网易Nej也不错。还有更轻量的方案:MVVM。MVVM最擅长做这些重交互的产品。举例说,为了对应复杂交互的Gird,jQuery社区开发出各种庞大巨物DataGrid、jqGrid、FlexiGrid,还不如MVVM几个循环绑定来得干脆利落,扩展性又好。目前,KnockOut、 Emberjs、Angular与我写的avalon就是这一类框架。Angular虽然有点坑,但如果你是从1.3用起,并且不鸟IE,它还是一个不错的选择,其活跃的社区为它带来无限的可能。KnockOut在.Net人群中非常流行,微软出品,前端MVVM框架的鼻祖,不过它需要对后端数据进行过多的加工,因为它本身是不支持对套嵌对象的绑定。Emberjs没有一个好干爹,但有一个好亲爹,作者Yehuda Katz是jQuery, Rails、SprouteCore、Merb、Handlebars这些著名框架的核心成员,虎父无犬子,Emberjs现在还是国外的第二大MVVM 框架。avalon是比较适合国情的MVVM,有它专门兼容IE6的版本,易上手,性能高,视频教程多,出了问题可以抓得着作者,是它的几大卖点。 

重SEO产品,可考虑jQuery+Bootstrap+RequireJS组合 

如果你们的产品是商场这样重演示类的产品,就对SEO有要求,MVVM就不适合了。目前也就Angular与avalon在搞后端渲染机制,但还不上了台面。这时jQuery+Bootstrap+RequireJS就非常好用。RequireJS的作用不单单是提供了一个按需加载机制,它还能让我们组织起更为庞大的代码。如果不用RequireJS,国内另一个选择是SeaJS,它的规范是CMD。此外还有CommonJS规范,但这无法直接运行于前端,需要借助fekit、FIS、Webpack这样的构建工具进行合并了。不管怎么说,你这时选用的框架必须存在AMD、CMD或 CommonJS任一种加载规范,这方便你以后的横向扩展。至于插件,目前小插件们都趋向用UMD,它可以让AMD、CMD、CommonJS任一种加载 器加载。 

移动端技术较混乱,需多管齐下 

如果你们的产品是移动端,基本上是SPA架构了,因为这会减少等待,整页刷新与请求数。目前该领域非常混乱,不同于PC端,要兼容的浏览器多出N 倍,并且为了性能,浏览器商乱砍功能或改变一些浏览器特性的行为,往往引发一些奇怪的BUG,目前社区正在整理这些坑与解药。但目前没有一个框架能够摆平所有问题,都需要多管齐下。我的见解是: 

RequireJS(按需加载,移动端上可以不打包,善用304缓存,腾讯搞出一个更牛叉的增量更新加载器MT,也可以试试)+Backbone(组织代码与路由管理)+Zepto(轻量DOM操作) + fastclick.js(点击穿透与延迟处理)+Hammer.js(各种触屏事件)+iScroll5.js(滚动条处 理)+Animate.css(CSS3动画)+Enquire.js(处理响应式布局)。 

可见移动端每个部件都烂到蕊了,每个部件都需要专门的工具进行修复。移动端是非常注重体验的,每一个小角落都存在着各种动画,但浏览器或自带的 WebView都很差劲,于是Native与Hybird的话题才一直这么火。有的人说,既然DOM最吃性能,那么就干脆用Canvas来代替吧(请 见:http://zhuanlan.zhihu.com/FrontendMagazine/19967854 与http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html )。Facebook也推出了自己类似的方案React Native,自己实现了一套GUI,不过编写语言是JavaScript。它是使用自己原来的超高性能轮子React实现的。这或者是一条道路。但优缺点也明显,正如Angular浓浓的Java风,React是在逻辑中插入大段标签语言(JSX)。同时React的排它性也非常强,很难与其它库搭配使 用。同时,我们可以看到,出自jQuery名门的jQuery Mobile并没有入围,那个性能太糟了,连Sencha Touch也不及。上面说的只是核心库, 还没有搬出UI库呢。号称Mobile First的UI库不在少数,由于无视IE,可以大胆使用CSS3。目前比较出彩的有Foundation、Semantic,Refill、 Ratchet。如果只是想运行在平板上,性能问题就不会那么拮据了,我们还可以试试inoic、Sencha Touch, Kendo UI Mobile…… 

没有最好,选择最适合自己的 

基本上,针对每个平台,我都列出一些主流框架,但不意味着你们都能驾驭得住。小马过马,老牛没过膝,松鼠淹个半死,就是这么回事。创业公司喜欢新框架,这与他们拿得起高薪招一两个前端牛人所致,基本上所有页面就是他们干的,因此用Angular或Ember都没区别。小公司则小心,人员流失 大,jQuery+RequireJS是万金油。大公司则基本上有自己的技术沉淀,换言之,应该有自己的前端框架,除非那东西很陈旧,不建议再造轮子。对大公司的建议是搞自己的技术委员会,根据自己的人员配置来挑选的框架。有句话说得好,不求最好,但求最合适。有些框架就属于牛逼人手里牛逼闪闪,二逼人手里一团乱麻。对于某些成长特别快的中等公司来说,这点最需防范,牛人是有的,但作战的主体70%都是刚培训出来的实习生,难上手,中文文档不全的框架就必 须过滤掉。我也不排除造轮子的可能性,毕竟有些公司就是人才济济,能推出一些靠谱的开源产品来造福社区。 

但无论我们选择什么框架或决定自己动手造轮子,都勿忘初心,技术必须让我们工作生活更为轻松愉快——我们只选择我们能驾驭住的框架,我们不能保证它在一年后是否会过时落后,但至少不会变成绊脚石。套用亚当·斯密的话(税收是一种必要的恶)来说,框架是一种必要的恶,它是强约束的,因此必须慎重选择。

前端神器avalonjs入门

valonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势:1.压缩后仅有60多kb,而angular的min版是100多kb;2.兼容IE6+,符合天朝市场需求;3.效率更高,跑起来比angular... 查看详情

司徒正美文章列表

由于本人对司徒正美文章的喜欢,特此整理文章列表如下。一个带完整的RBAC授权系统的rails应用(第一部分)(司徒正美,3年前, 12/6549)一个带完整的RBAC授权系统的rails应用(第二部分)(司徒正美,3年前, 1/1135)随机生... 查看详情

前端架构师-week2-脚手架架构设计和框架搭建

...   架构设计技巧和架构图绘制方法主要内容    学习如何以架构师的角度思考基础架构问题    多Package项目管理痛点和解决方案,基于Lerna脚手架框架搭建    imooc-cli脚手架需求分析和架构设计,架构设计图附赠... 查看详情

vue2.5开发去哪儿网app从零基础入门到实战项目

...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。2-1课程学习方法2-2helloworld2-3开发TodoList(v-model、v-for、v-on)2-4MVVM模式2-5前端组件化2-6使用组件改造 查看详情

前端架构师图谱

...443380&wfr=spider&for=pc#前言以下是获取到的一位阿里的前端架构师整理的前端架构p7的技能图谱,当然不是最完整、最系统的,所以之后我会一直维护更新这里的内容。技术架构考核范围vue.js  react.js  nodejs 查看详情

本周推荐|前端架构师的一些思考和总结

...出发,在这篇文章中讲述了前端架构师的工作范畴和如何做好前端架构,相信对于期望往该方向成长的同学会有所帮助。——大淘宝技术前端工程师梧忌加入大淘宝到现在也有六年多了 查看详情

前端leader找我谈心:我是如何从刚毕业的前端菜鸟一步步成长为前端架构师的?

 谈谈学习 我做前端已经有五年的时间了,从大学刚毕业的时候,我是一个完全什么都不懂的小白。虽然我大学里学的是软件工程专业,但是因为在大学里荒废学业,每天只知道打游戏,基本上到大学毕业之前我是什么都... 查看详情

去哪儿网支付系统架构演进(上)

去哪儿支付系统自2011年搭建以来,在五年的时间里逐渐从一个高耦合的单一系统发展为众多子系统组成的高并发、高可用、支持多种交易支付业务的分布式系统。业务从最初的非代收到现在多种非代收、代收场景的支持,B2B业... 查看详情

《漫谈架构》读后感——软件架构师如何工作

...作,所分成的代码架构,也属于软件架构。软件架构师是如何工作的?首先软件架构师要找到真正的问题,找到真正的问题,那么问题就已经解决了80%了。这个能力基本上就决定了架构师的水平,只有真正投入思考问题是什么的... 查看详情

前端架构思想

...拆分、组织方式等。所以如果从传统软件架构定义出发,前端架构可能就是指前端项目的系统设计了。在进行系统设计之前,由于前端开发语言缺乏一定的工程能力,所以web前端架构师相比传统软件架构师还应该能提供以下开发... 查看详情

vue2.5开发去哪儿网app

...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。 2-1课程学习方法 2-2helloworld 2-3开发TodoList(v-model、v-for、v-on) 查看详情

vue2.5开发去哪儿网app从零基础入门到实战项目

...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。第3章Vue基础精讲本章通过精挑细选的案例,精讲Vue中的基础知识,包括实例、生命周期、指令、计算属性、方法、侦听器,表单等 查看详情

微服务架构~bff和网关是如何演化而来

参考技术ABFF(BackendforFrontend)和网关Gateway是微服务架构中的两个重要概念,这两个概念相对比较新,有些开发人员甚至是架构师都不甚理解。(伟哥一直是做前端的,第一次听师父说BFF这个问题,还以为他说错了,前端没有BFF,BFC... 查看详情

架构师教你来学大型网站架构的技术细节:前端架构的工作原理

前端架构前面从宏观的角度介绍了大型网站架构。从本篇开始,我们将着眼于细节,逐一展开介绍前面章节中提到的前端、后端、云计算服务分层的技术架构。其中,前端部分是直接影响用户体验的,因此本篇先... 查看详情

gulp(转)

...3.我为何放弃gulp与grunt,转投npm scripts;4.我为何放弃前端” —— 司徒正美前端(段子)界的发展突飞猛进,总感觉随时会跟不上技术潮流(其实我已经被甩开了一条街,sosad选择在这样一个时机发布一篇gulp教程并不... 查看详情

架构师是如何练成的?

前言在盘点2019年全年平台各技术岗位薪资数据时发现,架构师是全年面邀薪资中仅次于CTO的岗位,同时,将架构师作为期望求职岗位的候选人数,仅次于Java工程师、前端工程师,以及移动端工程师。因此,今天会把从事多年的... 查看详情

vue2.5开发去哪儿网app从零基础入门到实战项目

...的编写,在熟悉基础语法的基础上,扩展解析MVVM模式及前端组件化的概念及优势。第3章Vue基础精讲本章通过精挑细选的案例,精讲Vue中的基础知识,包括实例、生命周期、指令、计算属性、方法、侦听器,表单等部分内容。第4... 查看详情

如何将 OPENID auth 集成到 REST api 和前端框架架构中

】如何将OPENIDauth集成到RESTapi和前端框架架构中【英文标题】:HowtointegrateOPENIDauthintoaRESTapiandfront-endframeworkarchitecture【发布时间】:2016-10-1602:02:42【问题描述】:我目前正在制作一个网站,该网站要求用户使用Steam登录,然后才... 查看详情