怎样选取适合的前端框架(去何方网前端架构师司徒正美)

转自:http://www.iteye.com/news/30547

前端框架不断推新,众多IT公司都面临着“如何挑选框架”,“是或不是须求再造轮子”的精选。去何方网前端架构师司徒正美分析了各主流行框架优劣点、适用场景,并针对差别规模的店堂、项目交付了对应的前端技术选用方案。

多年来几年,前端技术迅猛发展,差不离每年都会冒出一款主流的框架。
每回新开业务线或运营新类型时,首先第3件事就是纠结:使用什么框架,重造什么轮子?作者很欢愉应CSDN的特约谈本人的视角。

RequireJS,前端技术发展分水岭

在五六年前,移动端还没有起来,大家尚无什么样选拔,就是jQuery。有人会说,jQuery只是类库,不是框架;但当下前端业务还从未像前几日那样繁重,原本是后端干的事,全体挪到前者来,因为光是jQuery就足以包打天下。jQuery不够用,还有为数不少的jQuery的插件呢。于是难点就是那样逐一衍生出来了,三个页面太多jQuery插件了,请求数太多了,于是大家得打包。打包需求我们对插件有筹划。于是这一需求在社区上渐渐形成了几许
规则,其中最有名的是英特尔规范,展示上RequireJS那几个加载库上。

RequireJS是前者技术提升上的七个丘陵。JavaScript在ES6以前平素从未团结的加载机制,RequireJS的出现代表前端可以向更大范围进步。将来本身说的技能选型,2个可怜首要的甄选点,
即是不是存在加载器机制或符合某些模块规范。

慎选前者框架应综合考虑框架自身与集体意况

回去原先的话题,接纳框架要从两面看,一是看该框架的本领,二是看你们团队的本事。

从框架的角度来看,
它的成效丰盛不加上、社区活跃度怎样、国内社区活跃度怎样(有的在国外流行,但国内只有初创集团或局部大商厦的边缘项目在试水)、文档齐全与否、是或不是立即更新、测试覆盖率怎么样、上手难易度怎么着,都以咱们考量点。不过能进大家视野内的异国框架,基本是身经百战,在造轮子兴盛的世界闯出来的领头羊。
jQuery、Angular、KnockOut、Emberjs、Polymer、React、Backbone、Zepto,大家基本是环绕在那多少个上边转了。当然还有更大型的事物,如EXT、
YUI、Dojo、EasyUI、Bootstrap,那是UI库层面的。

上边是2011年外国对当下风行10个JavasScript MVC框架的纯技术评估:

图片 1

大庭广众,大家先是步就是引用时下最盛行的框架与库用作评估目标,然后再依照本身商店的情景举办筛选。贵公司是建站集团,还是有投机产品的店铺吧?假诺是建站集团,页面不会复杂到哪个地方去,基本上jQuery+Bootstrap消除,不要想得太多,就是它们。假若有和好产品,
要保障一大堆客户数量,要与客户打交道,简单想象存在卓殊复杂的C中华VM系统,依照中国人的性状,这东西只会更为复杂,这即将多加商量了
。那频仍是接踵而至 蜂拥而至十年的爱慕升级,我们需要看一下某框架是或不是有你们的成品那么长寿,那框架的提高更新是不是频仍平缓。

大工程应竭尽避开谷歌出品

借使您的品种是二个跨度三年以上的大工程,用《人月传说》的术语来说,十分九就是个焦油坑。大家须要运用更稳健成熟的技艺方案,大家需求重点避开谷歌(Google)的出品,它的不计其数成品都以玩票性质,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……

图片 2

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

假使你们的制品是后台系统,那么就有七个选项,使用EXT、EasyUI这几个重点的UI库方案,其中EXT具有严重的排它性,它很难与任何前端化解方案并用。什么模块协会、打包、数据可视化,它都已经能全部帮您解决。它文档齐备赏心悦目,入门难度中等,但它须要你的公司卓殊平稳,以后招3个全职EXT
的前端是很难的。EasyUI是国内比较大牌的UI框架,就算闭源,可是想增加它不是难事。

除此以外,国内的TmallKissy,
和讯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今后要么国外的第3大MVVM
框架。avalon是相比较相符国情的MVVM,有它尤其包容IE6的版本,易上手,质量高,摄像教程多,出了难点得以抓得着笔者,是它的几大卖点。

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

若果你们的产品是市场那样重演示类的出品,就对SEO有须要,MVVM就不适合了。如今也就Angular与avalon在搞后端渲染机制,但还不上了台面。那时jQuery+Bootstrap+RequireJS就至极好用。RequireJS的效能不单单是提供了1个按需加载机制,它还是可以让我们协会起特别庞大的代码。如果不用RequireJS,国内另一个摘取是SeaJS,它的专业是CMD。其它还有CommonJS规范,但那不能直接运营于前者,须求借助fekit、FIS、Webpack这样的打造工具举行合并了。不管怎么说,你那时选择的框架必须存在速龙、CMD或
CommonJS任一种加载规范,那便于你之后的横向增添。至于插件,最近小插件们都趋于用UMD,它可以让英特尔、CMD、CommonJS任一种加载
器加载。

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

比方你们的成品是移动端,基本上是SPA架构了,因为那会压缩等候,整页刷新与请求数。如今该领域万分混乱,分化于PC端,要同盟的浏览器多出N
倍,并且为了品质,浏览器商乱砍成效或转移一些浏览器性格的行为,往往引发部分意外的BUG,近来社区正值整理那个坑与解药。但眼前从未二个框架可以击溃所不平常,都要求多管齐下。小编的见识是:

RequireJS(按需加载,移动端上可以不打包,善用304缓存,腾讯搞出二个更牛叉的增量更新加载器MT,也可以尝试)+Backbone(协会代码与路由管理)+Zepto(轻量DOM操作)
+
fastclick.js(点击穿透与延迟处理)+哈默.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是万金油。大公司则大多有自个儿的技艺沉淀,换言之,应该有温馨的前端框架,除非那东西很陈旧,不提出再造轮子。对大集团的指出是搞自个儿的技术委员会,依照本人的人口安插来采纳的框架。有句话说得好,不求最好,但求最合适。某些框架就属于牛逼人手里牛逼闪闪,二剑拔弩张手里一团乱麻。对于有个别成长尤其快的中游集团来说,那一点最需提防,牛人是一些,但征战的焦点7/10都以刚培训出来的实习生,难上手,中文文档不全的框架就必
须过滤掉。小编也不清除造轮子的只怕,终究有点公司就是大有人在,能生产部分可相信的开源产品来便于社区。

但随便我们采用怎么框架或决定自身出手造轮子,都勿忘初心,技术必须让大家工作生活进一步轻松欢喜——大家只采用我们能精通住的框架,大家不可以担保它在一年后是或不是会过时落后,但最少不会变成绊脚石。套用艾达m·斯密的话(税收是一种必需的恶)来说,框架是一种必需的恶,它是强约束的,因而必须慎重选取。

相关文章