首页 > 代码库 > web前端技术框架选型参考

web前端技术框架选型参考

一、出发点

技术分享

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

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

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

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

架构框架

框架名

技术支持

思想

针对性

React

Facebook

虚拟dom,单项数据流

高效创建交互式组件

AngularJS

Google

双向数据绑定,指令

结构化

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.jsVue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。但是从另一方面来看它却显得毫无新意,甚

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

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

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

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

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

技术分享

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

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

web前端技术框架选型参考