web前端技术框架选型参考
一、出发点
随着Web技术的不断发展,前端架构框架、UI框架、构建工具、CSS预处理等层出不穷,各有千秋。太多的框架在形成初期,都曾在web领域
掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用户量的逐渐减少,社区也越来越不活跃。如:meteor、backbone、ember、knockout。
不禁感叹技术的更新换代来的太突然。为了追赶技术更新的脚步,保证技术实施的高性能,强兼容性,并且不会再短时间内被时代所遗弃。以下为目
前常见的主流技术参考,根据github关注度排名:
架构框架 |
|||
框架名 |
技术支持 |
思想 |
针对性 |
React |
|
虚拟dom,单项数据流 |
高效创建交互式组件 |
AngularJS |
|
双向数据绑定,指令 |
结构化 |
Vue |
Evan You(尤雨溪) |
轻量级AngularJS |
更加简洁更易理解 |
构建工具 |
|||
工具名 |
技术支持 |
思想 |
针对性 |
Webpack |
Tobias Koppers |
模块化处理 |
Web模块化 |
Gulp |
/ |
基于流的自动化构建 |
Web流程化 |
Grunt |
/ |
自动化构建 |
自动化构建 |
CSS预处理 |
|||
处理器名 |
技术支持 |
思想 |
易用性 |
Sass |
/ |
基于ruby具备编程模式 |
*** |
Less |
/ |
动态化css |
***** |
二、项目需求
略
三、参考点
1.框架自身 a.是否成熟 b.架构和模式 c.生态系统
React 毫无疑问是现在最热门的前端框架,React目前属于快速发展阶段,是否成熟还需时间的考量。由于 React 的设计思想极其独特,属于革
命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
Angular 提供了一系列健壮的功能,以及将代码隔离成模块的方法,这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包
括MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等等。Angular在从开源社区火起来就一直存在于人们的视线中,超前的设计理念,强大
的生态系统,让他一直扬帆于web框架的浪潮中,稳步前行。
Vue 的作者是位中国人,虽然vue属于个人项目,但在简洁、轻量、快速、数据驱动、模块友好、组件化等方面是不输于AngularJs的,这是因为vue
基本是在angular的设计思想上实现的库而非框架。说起vue不得不谈到它的小巧,小巧的一种好处就是可以让用户更自由的选择相应的解决方案,在配合
其他库方面它给了用户更大的空间。Vue虽然小巧,但是“麻雀虽小五脏俱全”,在构建大型应用的时候也是得心应手。并且近几年来vue得到了国内外多
数公司的认可,社区生态系统也日趋完善。
2.项目契合 b.是否能满足需求 c.是否适合项目
React 对于数据逻辑方面需要操心的更少了,可以直接全量赋值。通过虚拟dom,进行dom局部更新这一点很吸引人,省去前端对数据逻辑的判断
和操作。react目前我感觉优势在于native相关,未来大有可玩。单纯的web项目的话,学习成本相对vue来说还是很高的,react只是view还需要配合其他类
flux的框架开发。最后,使用场景上来说:React 配合严格的Flux架构,适合超大规模多人协作的复杂项目。
Angular 允许你构建功能强大且易于理解和维护的机构化应用程序,angular是一个为动态web应用设计的结构化框架,提供给大家一种新的开发应
用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态语言所体现的不足。Angular的结构化就是讲究责任分离,这样代码才好理
解,维护和测试。
Vue 体积小,接口灵活,侵入性好,可用于页面的一部分,而不是整个页面。扩展性好,源码规范简洁。更适合手机端的WEB开发,是声明式开发,
性能高于angular,体积小很多。社区生态正在逐步完善,用的人相对较少,网上的资料也不多,出了问题的解决成本高。
四、决策目的
基于参考点及项目需求择优以上web端常用工具及架构框架,UI框架可根据兼容性、易用性、及熟练程度选择。
五、可选方案
web技术选型 |
||||
编号 |
框架名 |
构建工具 |
Css预处理器 |
评分 |
1 |
Angular |
Gulp/webpack |
less |
***** |
2 |
React+flux |
Webpack/gulp+webpack |
less |
*** |
3 |
Vue |
Gulp/webpack |
less |
** |
六、结论
vue相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。但是从另一方面来看它却显得毫无新意,甚
至有点苍白无力。AngularJS 非常结构化,大而全,虽然臃肿,但是成熟稳定。React在我看来并不是一个框架,而是一种设计思想。并且它的这种思想非常
空前,甚至可以移植到任何一个框架上,所以react和以上框架并无可比性,react所引领和激发的一系列开发思想,在 React 生态圈颇有些百家争鸣的感觉,
各种新玩法层出不穷,所谓任重而道远,我认为对于react还是静观其变才好。
这里不过多评价前端自动化构建工具和css预处理器,因为这些仅仅是工具,完全可以不使用或者选择性搭配使用。只要能帮助我们简明、清晰、快速
的搭建web应用就足够了。以上提到的3个框架,有种三分天下的感觉。
综上,没有万能的框架,更没有万能的技术,最适合的才是最好的。这些只是我个人的片面的看法,希望大家有好的见解及时帮我提出来,我会在博客
中第一时间修改。谢谢大家!
转载于:https://www.cnblogs.com/BGOnline/p/6807658.html
web前端技术框架选型参考相关推荐
- 美团点评金融平台Web前端技术体系
背景 随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 8 个事业部的将近 150 人.业务新,团队新,前端领域框架技术又层出不穷,各个业务的研发团队 ...
- 转载《美团点评金融平台Web前端技术体系》
复制代码 作者:禹霖 原文地址: tech.meituan.com/2018/03/16/- 背景 随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 ...
- 耗时1年的前端技术框架切换之旅
本文分享自华为云社区<记一次难忘的前端技术框架切换之旅[WEB前端大作战]>,原文作者:一颗白菜 . 一.旅行之始 2020年初,某个普通的工作日,正在聚精会神"搞事情" ...
- 经验分享:如何系统学习 Web 前端技术?
本文作者:曾亮.晟暄科技 CEO ,HTML5 & Node.js 技术讲师. Javascript前后端全栈开发人员 DDD/CQRS 设计师 对 Node.js 和 HTML5 有多年开发 ...
- Web前端技术 Web学习资料 Web学习路线 Web入门宝典(不断更新中)
(此文档于2019年3月停止再更新,后续更新移步至:https://github.com/liuyuqin1991/polaris) 学习路线 第一章 技术(核心单独列章节) 1.Node Node. ...
- web前端技术练习题
选择题 1.以下哪个不属于Web前端开发的核心技术?( ). A.HTML C.JavaScript B.CSS D.Java 2.关于HTML说法错误的是( ). A.HTML标签的嵌套结构 ...
- Web前端技术历经的洗礼和蜕变
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力.尽管Web前端技术诞生至 ...
- Web前端技术趋势:HTML5仍不宜用作生产
经过这段时间国内(百度,淘宝,新浪)及国外(Facebook,Youtube,Yahoo)各大公司的集中自曝,我们可以从中总结出2010 Web前端技术的一些趋势.总的来说,随着后端技术(存储,并发, ...
- 为什么很多人转行学习Web前端技术?
今天小编要跟大家分享的文章是关于为什么很多人转行学习web前端技术?不管你是工人阶层还是服务行业,是否想过转行IT,转行IT后肯定会选择一门编程语言进行深入学习,很多转行的人基础都不是太好,不是科班出 ...
最新文章
- c++软件开发面试旋极面试题_经典软件开发面试题:浏览器中输入一个网址后发生了什么?...
- Science综述:人类与微生物共进退
- 微软亚洲研究院周明:从语言智能到代码智能
- 哪些人交不到真朋友?
- java集合框架图(一)
- ASPNET登陆总结
- Ubuntu16.04安装TORCS
- java两个字符串前缀_java – 找到两个字符串的最长公共前缀
- webview键盘自适应_黑爵毛茸茸机械键盘:感受来自治愈系的暖萌
- 在计算机桌面上添加小工具日历,实用桌面小工具时钟日历在win7中的添加方法...
- 计算机组成原理二进制地址码,计算机组成原理第四章第三讲.ppt
- 特朗普近百条推文,被 Twitter 标记为「不实消息」
- emqx http not found 怎么回事_幽默笑话:行倒是行,但两个大男人这么说话算怎么回事...
- Python ln_虚拟机中单机Spark (Python版)安装
- python从键盘输入一个数n、输出大于n且不能整除3_python基础练习题
- 全网最全的人类图解析(下)——类型、人生角色、定义等
- 【线性代数】n阶行列式展开多少项?
- Typora+PicGo-core+SMMS图床踩坑记
- windows word2010 PPT
- [转] 心态是最大的本钱;人无完人,重要的是怎么做人