现在算法是新锐前端框架成功的重要因素

随着前端MVVM的流行,小型框架现在越来越难存活了!react, angular等打着大公司旗号的框架占了半壁江山,而avalon以其良好兼容性在国内份额不断上升。

前端也与后端一样,遵循马太效应,强者愈强,弱者愈弱。最后只剩下两种框架,不断被人发现BUG的框架与没有人用的框架。MVVM本来就是一种非常复杂的分层架构。计算属性就用了半数的Gof设计模式,双向绑定则绑定6,7种DOM事件(像angular,avalon为了兼容IE6,数量达10以上)。但尽管这么复杂,只要使用者察觉不到,用得爽,对业务开发有帮助,就自然会有人用。因此现在国内许多公司,为了维护性,不断将页面形式由jquery为主的架构,转为ng, react, avalon为核心的架构。

框架有人用,就有为它提新需要。有新需求,就有新feature。有新feature,框架就不断膨胀。过去,angular使用脏检测,avalon使用属性劫持来监听数据的变动,从而实现页面智能刷新。但随着人用得多,用得爽,尤其是后台系统,这些框架开始接手一些超大的页面的活儿。上2000个绑定,angular就趴下了,上10000个绑定,avalon也气喘喘了。MVVM遇到性能问题了。

前端通常不会遇到性能问题的,遇到性能问题,说明前端已经发展很高的程度了。知乎上有人把前端的问题抽象成两点:复杂墙与性能墙。

太复杂的东西,我们可以拆分成一个个小块,以分治方法处理。比如说模块化,组件化。

性能问题,后端告诉我们使用大量的缓存算法还有池子,这个avalon1已经使用了。像angular这么牛的框架,当然也有很牛的算法,但还不够牛,于是趴下了。直到react带着虚拟DOM走到我们眼前。

虚拟DOM是什么呢?是一个用普通对象抽述的DOM树吗?这只是一部分。它包含三个内容:vtree, diff, patch。

vtree是生成虚拟DOM,GITHUB上有一些小库,教你如何用VElement, VComment, VText这三个方法创建一个虚拟DOM(当然还有VThunk, VWidget?什么),但这样笨拙的方式,显然没有人用。于是react 打包了一个叫JSX的模板引擎,用于生成虚拟DOM。

diff,就是比较前后虚拟DOM的差异,react等把所有变更归纳成7,8种变化,方便以后针对不同的变化应用不同的刷新函数。这个涉及许多算法,比如普通的DSF遍历算法,最短编辑距离算法(只要是用于比较两个列表的变动)

patch是应用变更于真实DOM,这与SVN版本管理差不多,得到不同点,修改现有版本。但如何知道这个虚拟DOM是对应某个真实DOM呢?是否遍历整个DOM树吗?因此在第二步,我们可以在发生变化的虚拟DOM做一些标记,如记录其位置。二分法等就能跟据索引找到对应的真实DOM。但这有风险,如果用户用了jQuery插件,修改了DOM树结构,真实DOM与虚拟DOM就不一一对应了,因此react?的入侵性与排他性是很强的。像angular, react是保持了要修改的节点,因此用户以后怎么操作DOM树,基本不影响它的运作。

说这里,我们已经提到许多算法名了。在jQuery时代,选择器引擎就是一个从右到左的快速查找算法,它还是基于一些DOM API。像MVVM的许多算法,比如html parser,我们实现一个类JSX的模板,就必须用到的。然后将指令转换为函数,收集里面的VM变量,就需要抽取JS变量,这也要懂点JS parser。以后的创建虚拟DOM树的模板函数,diff, patch更是一堆算法。 前端框架终于到一个比拼算法的新时代了。

算法的好坏,决定了其性能的好坏。就像之前DOM库一样,大家都愿意用速度最快的选择器引擎。天下武功,唯快不破,也是这道理。

avalon也是从注重各种兼容性DOM的hack的发掘,转向优化内部的各种算法。在用户真正执行代码,我们已经用各种算法将用户的代码改造成另一种形式,方便它以后这个新姿态起跑。react为什么这么快?因为在编译过程,JSX等已经做了优化!

前端框架注定越来越复杂,现在读不懂其源码,以后估计也很难读懂。就像你在2010年时不买房一样,现在就很难买房了。门槛会越来越高。经济学家称此现象为阶级固化。虽然社会(框架)的进步,让大家过得很轻松,但进升之路却越来越窄了!算法以后成为前端面试一个重点,因为DOM兼容问题会越来越少,彻底被框架与工程化所屏蔽。

最后安利一下我的框架avalon2, 官网迁到内地了。MVVM是一个好东西,切换到 avalon2就把你变成了两个程序员 —— 一个处理那些你不需要关心的东西,另一个可以集中精力在问题本身上。这是一个很震人的改变,一个你应该很快就能习惯能喜欢上的改变。

时间: 2024-08-17 23:38:10

现在算法是新锐前端框架成功的重要因素的相关文章

前端框架与前端类库的理解

前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的.前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架. 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架.大公司大项目的经验和成功模式固

第八章 前端框架

源代码GitHub:https://github.com/ZhaoRd/Zrd_0001_AuthorityManagement 一.介绍 本Demo主要使用的前端框架有 bootstrap.angularjs.angle.bootstrap是推特公司的开源css框架,提供优美的界面元素;angularjs是google推出的前端js框架,最为核心的是:MVVM.模块化.双向数据绑定.依赖注入等等;angle是一个前端admin的管理框架,包括了诸多组件的使用方式,具有Angular/html/

闲话js前端框架(6)——在浏览器标准上做文章

闲话js前端框架 前端人员=美工+设计+代码+测试 --题记 专题文章: 一.从avalonjs的模板说起 二.庞大的angularjs 三.再也不想碰DOM 四.组件化?有没有后端的事? 五.再看自己一年前设计的微型渲染引擎 六.在浏览器标准上做文章 七.抛开浏览器,构建应用容器 八.为何Flash.银光和Java都在网页端一蹶不振 本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy 六.在浏览器标准上做文章 为了简化前

React前端框架开发入门

对Facebook推出的React仰慕已久,一直没有找到合适的机会尝试,而react早已经是最热门的前端框架,coding.net的WebIDE,墨刀的web原型设计应用,都是非常成熟的react应用:最近正好前后端都有很多想法,周末花时间折腾了一翻,顺利的完成React入门训练. 项目采用纯静态方式实现,全部都是静态文件,不需要任何服务器就可以运行效果.传送门 React简单介绍 React一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jque

关于前端框架升级与全站样式替换的简单建议

jQuery在移动端 移动端dom操作库首推zepto,他实现了jQuery的大多数接口,被移动端成功扶正:弃用jQuery的主要原因是尺寸上的考虑 而jQuery经过几次发展,终于宣布不再理睬IE8,但是最新的版本尺寸依旧超过80K,而我移动端核心框架加起来还没一个DOM库大,很难不放弃他 究其原因,积重难返,要兼容老接口,又要照顾老用户,一些代码确实删不掉. angularJS的更新 而与jQuery对应的是angularJS,框架的版本号改变却变成了框架的改变,2.X与1.X完全是两个东西

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript

component 组件 成分; 零件; [数]要素; 组分; Angular2怎么使用第三方的component库(如 jquery,easyUI ,Bootstrap 等) PWA  增强web app helloWorld跑起来了,之前失败是因为Chrome服务器插件要FQ才能下载 https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/ 安装谷歌插件 web-serve

这些年帮过我的前端框架(实用篇)

前端其实就好像建房子一样,建设的方式也是多种多样的. 例如你可以什么都不用,单靠双手去把房子砌起来.这样实在,稳健,房子的每一个角落你都知道得清楚楚楚,但是效率偏低. 你也可以使用各种工具,提交你建房子的效率.例如你可以用搅拌机,帮你和水泥.你可以不需要知道搅拌机的运行原理,你只要按它的指示按下开关,它就很快地帮你完成任务. 前端的框架,就是我们前端建房子的工具,繁多好用. 接下来我就要说一下这些年对我很有帮助的前端框架. 1.基础型框架 1.1jQuery--前端不懂jQuery,学得更多也枉

轮询算法设计及其代码框架

在实际的软件开发项目中,经常会遇到某模块需要向其它模块发消息的情况.为了减轻消息接收者的负担,我们会采用一种叫做轮询的机制来发送消息.本文介绍轮询算法的流程及其代码框架. 1.算法流程 假设消息发送模块为模块A,消息接收模块为模块B.模块A安装了一个,模块B安装了N个.所有模块都同时启动. 算法流程如图1所示: 图1 轮询算法流程 2.代码框架 static int g_iSendIdx = 0; for (iLoopFlag = 0; iLoopFlag < N; iLoopFlag ++)

最流行的5个前端框架对比

欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个. 本文将会比较其中五个最佳的框架.每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择.此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件. 本文依据各个框架的GitHub流行度来顺序介绍. Bootstrap Bootstrap是目前可用框架中无可争议的领导者.其人气日益增长,你可以放心的选择