14只妙 JS 前端框架、库、工具及其应用时

  这篇稿子主要讲述现今盛行的一些 Javascript web
前端框架,库和它的适用场景。

  新的 Javascript 库层出不穷,从而Web
社区越来越发活跃、多样、在差不多面迅速前进。详细去描述每一样种植主流的 Javascript
框架和库近乎不可能,所以当就首文章被重大介绍一些对前者发展尽具影响力的前端框架。接下来为咱来一同研究有主流前端框架、库与工具,并讨论她的适
用场景。

  同时:

  如果该篇文章没有含你喜爱的 Javascript 框架,勿喷

  以运前端框架进行开发时,建议维持版本更新。最新版本的貌似都见面提供于重新好之逾浏览器,跨平台功能。
需检测某个框架的初本子是否针对各种浏览器和设备的配合,请动
类似这个扫描器 的工具

  准备好了咔嚓,那么连下去逐个讨论其。

  AngularJS

  Angular 是相同慢流行的公司级
框架,很多程序员都用其来构建与维护复杂的网页应用。Angular
拥有巨大的人气,使用其的营业所以及 Domino 的 Pizza 种类雷同多,如 Ryanair,
iTunes Connect, PayPal Checkout, Google。Angular 是一个由 Google
支持的开源框架。Angular 称自己呢构建复杂网页应用而针对性 HTML
的恢宏。如果您啊针对 TypeScript 很熟悉,那么可看看 怎样写 Angular 2 .

  Angular 采用 MVC 架构。它提供了 Model 层和 View
层之间又数据绑定。这种数量绑定方式的补益是随便什么数据变动,都见面自动的翻新两止的数目。这有助于你构建而吞食的
View
组件。它还提供了一个内外端服务好交互的劳动框架。最要害的凡,它是略的
JavaScript。

  什么时利用 AngularJS?
当你构建一个犬牙交错的网页前端采用并欲一个单身的模块框架去处理整个时。

  GitHub: https://github.com/angular/angular.js

  Current Version:1.4.7/1.2.29

  Website: angularjs.org

  二:React 是15年极端让欢迎的 JavaScript 项目!几乎人人都以谈论
ReactJS。去年,我到的诸一个会面几都见面有一两独话题探讨 React
和同等体系下的其余库( Flux , Redux ) 。React 是一个开源项目,几乎是出于
Fackbook 和任何主要的技能公司献出之。React
称自己为为构建用户接口而提供的 JavaScript 库。

  React 基本上用来当 MVC 中之 V。它完全专注让 MVC 中之 V
部分,而忽视了运用被之任何一些架构。它提供了一个组件层,这叫咱爱制作UI元素并将这些UI元素组合在一起。它抽象出了DOM,因此一旦优化了渲染,
并允许而采取 node.js 渲染
React。另外,它实现了只有为数交互流,这如其比任何的框架还易于理解与运。

  多独品类如 Angular ,Ember 绑定以 React 成为 MVC 中的 V。

  什么时候以 React?当您想要出一个强劲的 View
层,而使用中之其它一些缺失不需要一个苛的框架时,或当你想只要一个 View
层和您的 Angular, Backbone,或者
Ember应用一起用。当你试着构建一个同构的网页框架。

  GitHub: https://github.com/facebook/react

  时版本:v0.14.0

  网址: Facebook.github.io/react/

  Backbone

  Backbone 是
一个成名的简要的框架,所有情节都得以放置一个纯粹的文件里。Backbone
已经流行了一段时间,其作者是 Jeremy Ashkenas,曾经由于开发了
CoffeeScript 和 Underscore 而为大家所理解。Backbone 特别适用于用付出之
web 程序不殊的那些组织,他们要会以小巧的框架,而未是比如说 Angular 或者
Ember 这样的大型框架。

  Backbone 提供了都效的 MVC 框架和路由。它的 Model 可以兑现
key-value 绑定和数码更新的事件处理。Model(及 Collection)可以同 RESTful
的 API 协同工作。View 可以声明事件处理,Router 在 URL
处理同状态管理方面做的不可开交好。对于开发一个单页面应用,所有需要的成效都可支撑,不需要分外引入无需之繁杂。

  何时使用 Backbone?对于小型的 web 程序,Backbone 是本身定择的框架。

  GitHub: https://github.com/jashkenas/backbone/

  当前版本:1.2.3

  官方网站: backbonejs.org

  Ember 作为一个 web应用框架,非常专注于程序员的频率及。Ember
相对较盛行,核心团队发出成百上千可怜聪明的积极分子,包括 Yehuda Katz,他是 Ruby on
Rails 和 jQuery 的中心团队的分子。Ember
对友好的固化是“一个之所以来创造震撼的 web
应用之框架”,它也确不见面浪费你的时刻。它当马上上头异常小心,为汝提供多之选料。

  Ember 同为是一个 MVC
的框架。它富含一个模板与视图引擎,在数据更新时可以自动更新,这上面与Angular,
Backbone, 和 React 类似。它还有一个 web 组件
的概念,允许你用好之标签扩展HTML,(如Angular)。它还有一个路由及 model
引擎,可以跟 RESTful API 一起干活的挺好。

  何时使用
Ember?适用于你待一个框架马上就能下。对灵活性要求未愈之上可选取
Ember,因为您平凡是预算紧张或工期紧张。

  GitHub: https://github.com/emberjs/ember.js

  当前本:2.1.0

  官方网站: emberjs.com

  JQuery
这个库房就不用多开牵线了。它独自承担了受超过浏览器网站成为实际的使命,是她使整个
web 成为今日此样子。Web
标准的制定及浏览器厂家针对业内的受地方,jQuery 功不可没。jQuery
基金会的目标是”通过开源软件之开和支持,以及社区的协作,增进开放的纱,让每个人且能访问”

  JQuery 是世界上用最广泛的 JavaScript
库,没有采取可相差她,除非您对开发效率不感兴趣。它叫 DOM
遍历、事件处理、动画以及 AJAX 在有浏览器上都换得这么的简短容易用。

  何时使用 jQuery?任何时刻,除非您打算采取更轻量级的本,例如 Zepto

  GitHub: https://github.com/jquery/jquery

  当前版:v1.11.3 或 v2.1.4

  官方网站: jquery.com

  Underscore 和 lodash

  有时坐的 JavaScript
对于让程序员真正的发出生产力还远远不够。总是会缺少了一个器函数,又要是一个能简化代码的函数。Underscore
(还有 lodash) 就是如此的一个 JavaScript
库,它提供了身工具函数,无需经验不足的程序员再失去让放的 JavaScript
对象由补丁。两个仓库都提供了超 100
只辅助函数,还发生其他特别之好东西;包括了例如 map, filter, invoke, reduce,
template, throttle, bind, extend, pick, clone 等等这些函数。

  什么时候利用 Underscore?当您想使持有一个马上会增高程序员效率的
JavaScript 文件时。

  Underscore GitHub : https://github.com/jashkenas/underscore

  Underscore 当前版:1.8.3

  Underscore 网站: underscorejs.org

  什么时以
lodash?当你想如果一个模块化的,性能再漂亮一点之,并附带有对于 AMD
和社区插件支持的 Underscore 版本时。

  Lodash GitHub: https://github.com/lodash/lodash

  Lodash 当前之本:v3.10.1

  Lodash 网站: lodash.com

  D3.js

  数据可视化和图纸是web应用程序的平等种健康需求。当干到其它数操作与可视化时,D3.js
就是实际上的正统。它是 GitHub
上极其被欢迎的种类之一,并叫数百只集体单位所采用。大量的图片、图标和可视化库都是构件被
D3 之上的。

  D3 让您可以操作任何来源的数目文档,并将数据开展转移后下到 DOM、SVG
和 CSS上。D3 专注让现代底 web 标准,以及保险您得无面临外像 Flash
或者 Silverlight 这样的专有格式的限。

  什么时候使用 D3.js?当您要另外项目的视觉效果的时刻。

  GitHub: https://github.com/mbostock/d3

  当前版:3.5.6

  网站: d3js.org

   Babylon.js

  想使构建一个了运转于现代浏览器上,并且会过浏览器运行的视频游戏吗?那就算省
Babylon.js 吧,它是一个 3D 游戏引擎,基于 WebGL 和
JavaScript。你得下其大体、音频和粒子系统创造出超越预想的胜质量游戏来。

  什么时下 Babylon.js?当您正在构建一个视频游戏要一个某种类型的
3D 场景时。

  GitHub: https://github.com/BabylonJS/Babylon.js

  当前本: 2.2

  网站: babylonjs.com

  Three.js

  想只要构建一个 3D 视觉特效,但是同时未需要一个效果一体化的游艺?Three.js
提供了一个轻量级的 3D 库,让你得以 3D 效果渲染成一个 HTML5 的 canvas,
SVG, 和 WebGL。这是一个详单简单的仓库,在 three.js
陈列站点及得看来数百独优质的言传身教。

  什么时候利用 Three.js?当您要一个简短的会出口为 Canvas 的 3D
视觉效果时。

  GitHub: https://github.com/mrdoob/three.js/

  当前本: r73

  网站: threejs.org

  Mocha 和 Chai

  长久以来测试 JavaScript
一直还使得人未生反感。说起来,测试外代码都是令人反感的,但还要也是每个开发者应该做的政工。每个开发者似乎总是对斯不屑,忽视掉对她的代码的测试工
作。 现在发生了痊愈这种反感的章程了,那就是是 Mocha 和
Chai。而少于单仓库都因为美味的热饮命名,都能够辅助而测试代码,不过方式各异而已。

  Mocha 是一个 JavaScript
测试框架,它叫针对你的node模块或者浏览器采用中之异步代码的测试变得爱起来。Mocha
测试好拧起来运行,并且于对合适的测试案例进行好跟踪的品质对。

  Chai 是一个行事令开发同测试驱动开发的断言库,可及 Mocha
比肩。它为同一种植可读性好的品格来描述而所而测试的事物,用起大概。

  什么时候使用 Mocha 和 Chai?用他们即使针对了!
请测试你的代码,让这个世界变得更好。

  Mocha GitHub: https://github.com/mochajs/mocha

  Mocha 当前版本: 2.3.3

  Mocha 网站: mochajs.org

  Chai GitHub: https://github.com/chaijs/chai

  Chai 当前本: v3.4.1

  Chai 网站: chaijs.com

  我们就以当时卖清单中概括了 Mocha 和 Chai
,如果非失管好运行这些测试或可能得设定持续集成测试的测试运行器拉进来吧,那么这卖清单就无见面是圆的。Karma
是一个于是来助您于不同之浏览器被活动运行而的测试的家伙。它用见面帮助而于此时此刻所有的浏览器上运行而的
Mocha 和 Chai 测试。

  并无是每个浏览器还见面运行于每个平台之上,不过幸运的凡出不少免费的工具而供应你用来测试外的浏览器,可以以
浏览器截屏 上看同样押。如果您是当 OS X 上运行吧,并且要测试的凡 Edge
或者 IE 的言语,你就算足以 免费 使用此家伙。

  什么时使用
Karma?当你想只要备一个效应到的测试套件,并像确保测试能够在拥有的浏览器上通过时。

  GitHub: https://github.com/karma-runner/karma

  当前版: v0.13

  网站: karma-runner.github.io

  PhantomJS

  运行总体之浏览器来测试你的代码是如凝聚消耗内存和 CPU 的。PhantomJS
让您可运行一个纯粹的 WebKit —— Safari 和 之前版本的 Chrome
中之渲染引擎(现在凡是 Blink)。它会叫您通过一个 JavaScript API
来运转测试、截屏、模拟网络与活动的浏览页面。

  什么时候利用 PhantomJS
?当您用展开双重多的测试、操作网页和拟网络要的操作时。

  GitHub: https://github.com/ariya/phantomjs

  当前本: v2.0

  网站: phantomjs.org

  Grunt 和 Gulp

  构建用于生产环境的网站一般还提到到片调升性这点的职责,像
JavaScript 和 CSS 的顶小化,CoffeeScript/TypeScript
的编译,单元测试,代码精简。也许你早就发了一个器链,用于准备而养版本及的网站,而一旦您还无的话,就会怀念要负有一个诸如
Grunt 或者 Gulp
这样的天职运行器。它们都游人如织底插件,能吧你的网站开展其它的转移,以要该能够投入生产条件。

  什么时候下
Grunt?当您再度乐于编写配置文件,而对于你的天职运行器会生成什么中间文件并无关注时。

  Grunt GitHub: https://github.com/gruntjs/grunt

  Grunt 当前版本: v0.4.5

  Grunt 网站: gruntjs.com

  何时使用 Gulp?当你还愿编写配置代码,并且想使 node.js
的流处理能力实现重复快的职责履行时。

  Gulp GitHub: https://github.com/gulpjs/gulp

  Gulp 当前版: v3.9.0

  Gulp 网站: gulpjs.com

  Babel

  JavaScript 作为同一帮派语言发展好迅速。ECMAScript 2015
在上年夏季公布,而其的重重新特色正在多流行的浏览器被被实现。如果您想使了解关于浏览器对
ECMAScript 2015 兼容信息,可以看这来于 @kangax 的 表格
。你见面注意到新型版本的 Edge,Firefox 和 Chrome 已经几乎是完全的匹配了。

  我们连无是活于一个到家的社会风气被。作为开发者,我们将会晤得继续支持老版本的浏览器,它们不有所新型和最好全的
JavaScript 功能特色。而我们其实是想念要更上一层楼我们的 web
并提升我们的代码库。Babel 就是一个 JavaScript 编译器,它可以拿新型的
JavaScript 标准编译成兼容 ES5 的JavaScript,让您可以 IE9
那么老的浏览器上运行它们。它有着一些插件,让以 React
开发尤其爱,设置会用那些并无是业内 (例如 ES7) 的有的效能特色。

  什么时下 Babel?当你想使采取初的 JavaScript
语言特征并且还要支持老的浏览器时。

  GitHub: https://github.com/babel/babel

  当前版: 6.1.2

  网站: babeljs.io

  更多 Web 开发的实践

  这篇稿子是 web 开发系列的均等有些,来自于 Microsoft
技术的传道者和工程师,内容都是关于实用的 JavaScript
学习、开源项目,还有互操作性最佳实践这些面,包括了 Microsoft Edge
浏览器和新的 EdgeHTML 渲染引擎 。

  我们鼓励而当备的浏览器与装备,包括作为 Windows 10 默认浏览器的
Microsoft Edge 上进行测试 —— 使用 dev.microsoftedge.com 上的免费工具:

  扫描你的站点及之不合时宜的仓库,布局问题及可访问性

  下充斥免费的 Mac, Linux, 和 Windows 的虚拟机

  以装有的浏览器,包括于 Microsoft Edge 上检查 Web 平台的状态

  于您自己之设施上远程测试 Microsoft Edge

  更尖锐摸底我们的工程师和传道者:

  GitHub 上的编码实验室:跨浏览器测试与特等实践

  Microsoft Edge Web 大会 2015 (来自于我们的工程团队和 JS 社区)

  哇哦,我能在 Mac 和 Linux 上测试 IE 和 Edge 了! (来自于 Rey Bango)

  没有破话 Web 的先进的 JavaScript (来自于)

  能给 Web 立刻从作用的 Edge 渲染引擎 (来自于 Jacob Rossi)

  使用 WebGL 发挥 3D 渲染之潜能 (来自于 David Catuhe)

  托 管web 应用及web平台方面的换代 (来自于 Kevin Hill 和 Kiril
Seksenov)

  我们的社区开放源代码项目:

  vorlon.JS (多配备远程 JavaScript 测试)

  manifoldJS (部署跨平台托管 Web 应用)

  babylonJS (让 3D 图形这些事物再和蔼)

  更多免费的工具与后端web开发之东西:

  Linux, MacOS, 和 Window s 上应用的 Visual Studio Code

  尝试以 Azure Cloud 上 使用 node.JS 编写代码

相关文章