随便搜搜那些招聘网站招聘的前端开发人员,要求基本就是除了Javascript,css,html外,还要掌握vuereactjQueryangularBootstrapapi等等。毫无疑问,这些正是目前流行的前端框架。下面给大家说道说道。

常用前端框架

Vue

毫无疑问是当前最流行最火爆的前端框架之一,面试前端工作的小伙伴也一定要掌握的技能。vue作为渐进式前端框架,由当时的谷歌工程师尤雨溪大神业余时间写的,一放到github就引起流行,github上点赞数百万。尤雨溪尤大大为国人挣了脸。现在尤大大专门维护vue版本更新,尤大大自爆料这一个框架带给他的收入超过4000万。vue现在几乎作为前端必备框架,很多大厂都在用,特点高效,灵活,稳定,功能强大,代码少,运行速度快,整个文件只有200多K。做为前端,不懂vue是不行了。
image.png

react

是Facebook在2013年开源的前端框架,由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。也就是说同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。开发效率高,事半功倍。

jQuery

是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。代码十分精炼,代码量小,速度快,犀利。使用量非常大。

AngularJS

诞生于2009年,由Misko Hevery 等人创建,是为了克服HTML在构建应用上的不足而设计的。后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
上面说react是Facebook开发的,那么做为Facebook的竞争对手,Twitter公司也不甘示弱,开源了Bootstrap。是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。Bootstrap 能给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

api.js

apicloud专门为移动端APP开发而设计的框架,作为一个使用apicloud平台提供技术的APP开发者,在开发路上处处和api框架为伴。且该平台也只扩展了这一个框架作为开发的核心的框架。封装了常用,必备的方法。适应不同的移动设备,而且可以和其他框架一起引入项目中使用,非常灵活,优秀。
image.png
前端框架多的数不胜数,目前最流行的就这几种,不仅功能强大性能卓著,被各大厂使用,也是进大厂通往前端工程师的必经之路。各位小伙伴努力学习,多多掌握。

作者:凡平
链接:https://www.zhihu.com/question/35069742/answer/1631582860
来源:知乎

这么多的框架,该使用哪一个?

那么,在一个项目中,我们要回答的第一个问题就是“这么多的框架,该使用哪一个?”这篇文章将尝试从项目实施相关方面入手,对目前大热框架的特点进行分析,帮助你选择最合适的一款。
由于篇幅有限、框架众多,在分析之前,我们从版本更新频度和社区活跃度来进行初步的筛选。已经出现了比较久的BackboneKnockout, 目前流行度正在持续衰退,说明市场已经做出了选择,市面上出现了更有竞争力的替代品; 还有aurelia这类的新涌现者,需要等待时间的检验。
但是在一个商业项目中,一个有活跃社区支撑,并能得到长期支持的框架无疑能给我们更大的信心。因此,Angular, Ember,Vue或者React都是理想的选择。

那么在项目实施中,我们一般会关注哪些方面呢?

有过前端开发经验的同僚们可能会想到:要有可复用的组件,要控制质量做测试和静态检查,要有组件隔离的样式方便实现Responsive,要打包部署方便,最好学起来不要太复杂,方便能力建设、节省招聘成本等等。
接下来,我们将从组件复用、测试和学习曲线这三个主要的方面对Angular4,Ember.jsVue.jsReact这四个当前最流行的框架来做更深入的分析,提供更具体的参考。

1. 可复用的组件

组件复用是每个项目都会重点关注的一个维度。合适的、职责单一的组件会大大提升新特性的开发效率和工程的可维护性,也能方便地进行测试。那么他们的表现都如何呢:

image.png

概括起来,就是Vue、Component的组件相对灵活、轻量,添加依赖就可以无缝集成到遗留系统中。对于从0到1的系统,也可以使用新的实践来构建工程,例如ES6、Webpack等技术。Angular4官方推荐使用TypeScript,这需要单独构建和打包,不方便与遗留系统集成。Ember.js自定义了一整套生态,基于CoC理念的设计,采用了前端工程中比较前沿的实践和标准,很难与遗留系统集成,更适合在新项目中使用。至于数据绑定,各有优势。双向绑定在表单交互多的场景中更便捷,单向绑定在管理跟踪记录组件状态时更高效。组件状态更新,各有不同的实现:

  • Vue2.js通过定义setter来监听状态变化,特殊场景需要特殊的API支持, 基于virtual DOM的视图更新。
  • React在组件的状态或属性的变化后,也是基于virtual DOM的视图更新。
  • Angular4在引起状态变化的时刻,框架自动触发脏检查,也可以手动执行脏检查,直接操作HTML DOM更新视图。
  • Ember.js提供数据模型,所有数据的操作通过API执行,使用Glimmer引擎进行HTML渲染和更新。

其中,主要的区别是Angular4是通过事件监听,对比数据更新,直接操作DOM来更新视图,而其它都通过Virtual DOM的思路来更新视图。

2. 组件测试

测试是提高软件质量的有效手段,易于编写测试的框架,能降低编写测试的成本,充足的测试也能提高我们交付软件的信心。它们在组件测试方面的比较如下:

image.png

可见,Vue, React测试灵活,可以根据项目具体情况来定制,但是没有统一的测试实践规范,对开发人员的能力有较大依赖。Angular4和Ember概念多,有官方推荐的实践,要完全掌握难度大,优势是实现起来更规范。

3. 学习曲线

在技术选型过程中,保证项目按时交付,控制风险,团队能力建设提升,都是需要考虑的因素。作为一个软件服务公司,如何快速的提升人员能力,选用学习曲线合适的框架,控制项目成本也是一门技术活。下面,对使用这些框架的难度进行了一些简要分析:

image.png

总结

通过上面三个维度的分析,我们发现Vue.js和React的重点更侧重于创建可复用、易于测试、能灵活集成的组件。当然,通过其它扩展组件,以及一些脚手架插件的支持,也可以方便的搭建一个采用最新实践的前端应用的构建框架。它们最大的优点是按需定制,学习曲线平滑,构建出来的应用小而精。
相对来说,Angular4和Ember是大而全的框架,它们更侧重于大型前端工程的构建,为开发人员屏蔽项目构建底层的细节,提出了自己的一套解决方案。使用它们的难点是要度过前期曲线陡峭的学习期,优点是由于使用了标准化的开发方式,后期能极大的提高开发生产力,提升开发效率。
最后,说了这么多,大家在具体选型时还是要首先分析自己的需求和现状,然后再做选择。不求最酷炫,只求最合适!



常用前端框架与UI框架
image.png

image.png

image.png

image.png