2018年几款主流的高质量web前端框架介绍

原创 小智  2020-11-29 16:29  阅读 1,646 次

前端框架是什么?

前端框架一般指用于简化网页设计的框架,目前常用的框架有:React、Vue、Angular、Bootstrap、jQuery UI、BootMetro、AUI、jQuery、Extjs等等还有很多,这些框架封装了一些功能,比如 html 文档操作,漂亮的各种控件(按钮,表单等等)。

2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造。以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。

是否需要使用前端框架?

框架则是提供一套解决方案,你得按我的规定来安排代码结构,它是随着前端功能的增强而产生的,对于往应用方向发展(也就是越来越像客户端)的web产品就很必要做前端架构这件事,它开始以模型为中心,DOM操作只是附加,通过关注点分离鼓励改进应用程序。

未来的发展趋势是前后端只靠json数据进行通信,后端只处理和发送一段json到前端,计算和模板渲染都在前端进行,后台程序不再做模板的任何处理。使用MV*框架能有效实现前后端的解耦,简化开发流程,便于维护管理,可以把精力更多放到业务逻辑,提升开发效率。

所以考虑是否需要引入前端框架,可以根据产品类型做个基本判断。对于页面型产品,处理交互更多,jquery也够用;但如果是应用软件类产品,需要关注处理复杂模型,很有必要引入MVC、MVP、MVVM模式框架。因为为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队)。如今的互联网公司的产品基本都是web app,越来越像传统应用软件开发靠拢,使用个框架就还是很有必要的。

使用前端框架开发项目的好处

对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码,保证体验的最佳,更要考虑与市面上各大浏览器的兼容性,还需顾及Web前端表现层和前后端交互的架构,以及模块化、通用类库、框架编写等一系列问题,由此使用前端框架开发项目可以提升前端开发的效率,并降低开发成本和周期。

使用前端框架开发项目能够快速的开发一款web应用,在时间和成本之间就能够轻松节约很多的时间,并且利于团队发展维护项目;另外,使用前端框架的组件功能,只要组件功能强大,什么样的项目都能够开发(前提是:要熟悉前端框架的功能)。

Node.Js

Node.js是一个Javascript运行环境

Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架,不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库,不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

Node.js是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动、非阻塞式 I/O 的模型而得以轻量又高效,非常适合在分布式设备上运行数据密集型的实时应用。

Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。

Node.js 特点

  • 是一个基于 Chrome JavaScript 运行时建立的平台
  • 依赖于 Chrome V8 引擎进行代码解释
  • 事件驱动
  • 非阻塞式 I/O 的模型
  • 轻量、可伸缩,适于实时数据交互应用
  • 单进程,单线程

适合 NodeJS 的场景

1. RESTful API(目前比较流行的接口开发风格)

这是NodeJS最理想的应用场景,可以处理数万条连接,本身没有太多的逻辑,只需要请求API,组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。

2. 统一Web应用的UI层

目前MVC的架构,在某种意义上来说,Web开发有两个UI层,一个是在浏览器里面我们最终看到的,另一个在server端,负责生成和拼接页面。

不讨论这种架构是好是坏,但是有另外一种实践,面向服务的架构,更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用,就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的,他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

3. 大量Ajax请求的应用

例如个性化应用,每个用户看到的页面都不一样,缓存失效,需要在页面加载的时候发起Ajax请求,NodeJS能响应大量的并发请求。  总而言之,NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

Vue.js(目前市场上的主流)

Vue.js渐进式框架

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

Vue.js 特点

  • 易用:已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用。
  • 灵活:简单小巧的核心,渐进式技术栈,可以在一个库和一套完整框架之间自如伸缩。
  • 高效:20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

Angular.Js(比较厉害,github排名也比较高)

AngularJS框架

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。

AngularJS 最核心的四大特征

  • 使用MVC设计模式
  • 双向数据绑定
  • 依赖注入
  • 采用模块化设计

AngularJS 用途

通过描述我们应该就能很好的明白AngularJS的真实用途了,MVVM,模块化,自动化双向数据绑定等等。除了简单的dom操作外,更能体现Js编程的强大。当然应用应该视场合而定。

JQuery Mobile

JQuery Mobile

jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

JQuery Mobile 用途

jQuery Mobile 是创建移动 web 应用程序的框架。

  • jQuery Mobile 适用于所有流行的智能手机和平板电脑。
  • jquery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

React.js(gihub排名仅次于vue.js)

React.js

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。

React 特点

  1. 声明式设计 — React采用声明范式,可以轻松描述应用。
  2. 高效 — React通过对DOM的模拟,最大限度地减少与DOM的交互。
  3. 灵活 — React可以与已知的库或框架很好地配合。
  4. JSX — JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  5. 组件 — 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 — React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

Bootstrap

Bootstrap前端开发框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

Backbone为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API;视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序。

本文地址:http://aszhi.com/frame/62.html
关注我们:请关注一下微信号:扫描二维码爱思智前端的微信号
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论


表情