web前端技术框架选型参考

Love The Way You Lie 2022-06-06 11:58 309阅读 0赞

一、出发点

![1040084-20170504165530539-131997744.jpg][]

随着Web技术的不断发展，前端架构框架、UI框架、构建工具、CSS预处理等层出不穷，各有千秋。太多的框架在形成初期，都曾在web领域

掀起过一场技术浪潮，可有些却仅仅是昙花一现，随着他们用户量的逐渐减少，社区也越来越不活跃。如：meteor、backbone、ember、knockout。

不禁感叹技术的更新换代来的太突然。为了追赶技术更新的脚步，保证技术实施的高性能，强兼容性，并且不会再短时间内被时代所遗弃。以下为目

前常见的主流技术参考，根据github关注度排名：

<table style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13.3333px; height:273px; width:845px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 架构框架 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 框架名 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 技术支持 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 思想 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 针对性 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> React </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Facebook </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 虚拟dom，单项数据流 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 高效创建交互式组件 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> AngularJS </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Google </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 双向数据绑定，指令 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 结构化 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Vue </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Evan You（尤雨溪） </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 轻量级AngularJS </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 更加简洁更易理解 </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13.3333px; height:250px; width:845px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 构建工具 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 工具名 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 技术支持 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 思想 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 针对性 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Webpack </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Tobias Koppers </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 模块化处理 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Web模块化 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Gulp </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> / </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 基于流的自动化构建 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Web流程化 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Grunt </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> / </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 自动化构建 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 自动化构建 </td> 
 </tr> 
 </tbody> 
</table>

二、项目需求

略

三、参考点

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框架可根据兼容性、易用性、及熟练程度选择。

五、可选方案

<table style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13.3333px; height:213px; width:707px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="5" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> web技术选型 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 编号 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 框架名 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 构建工具 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Css预处理器 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 评分 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 1 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Angular </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Gulp/webpack </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> less </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ***** </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 2 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> React+flux </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Webpack/gulp+webpack </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> less </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> *** </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 3 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Vue </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Gulp/webpack </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> less </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ** </td> 
 </tr> 
 </tbody> 
</table>

六、结论

vue相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。但是从另一方面来看它却显得毫无新意，甚

至有点苍白无力。AngularJS 非常结构化，大而全，虽然臃肿，但是成熟稳定。React在我看来并不是一个框架，而是一种设计思想。并且它的这种思想非常

空前，甚至可以移植到任何一个框架上，所以react和以上框架并无可比性，react所引领和激发的一系列开发思想，在 React 生态圈颇有些百家争鸣的感觉，

各种新玩法层出不穷，所谓任重而道远，我认为对于react还是静观其变才好。

这里不过多评价前端自动化构建工具和css预处理器，因为这些仅仅是工具，完全可以不使用或者选择性搭配使用。只要能帮助我们简明、清晰、快速

的搭建web应用就足够了。以上提到的3个框架，有种三分天下的感觉。

![1040084-20170504170713836-871639598.jpg][]

综上，没有万能的框架，更没有万能的技术，最适合的才是最好的。这些只是我个人的片面的看法，希望大家有好的见解及时帮我提出来，我会在博客

中第一时间修改。谢谢大家！

[1040084-20170504165530539-131997744.jpg]: /images/20220606/720bf26945db4ab3b1a1aea4b56eb844.png
[1040084-20170504170713836-871639598.jpg]: /images/20220606/ed2fb042315a4758afe03af1b1bc07f4.png