二〇一六年JavaScript技术栈展望

编写翻译地址:State of the Art JavaScript in
2016

译者:南北
原稿地址:
http://www.w3cplus.com/javascript/state-of-the-art-javascript-in-2016.html

假使您正在筹划新的前端项目或许重构现有项目,那么您须求认识到方今的前端开发环境已经分裂,那在那之中有太多的挑选了:React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow……
它们的原意是将开发简单化,却无形中增强了学习开支,也给以后项指标保障带来了不肯定。

还好这一景色正在退热,优胜劣汰,杰出的连串逐步沉淀下来,开发方式也越来越明晰。有个别开发者正在品尝采纳基于上述技术的框架进行付出,也在自然水准上压缩了读书开支。

正文中第三介绍了有的作者在 Web
应用开发中所涉及和尊崇的技能,个中有一对技巧上存在争持,所以自身对于每一技艺都只做简单的牵线和剖析。全部的那些见解都以依据本人个人的经验和对社区的触及计算而来的,所以各位还请按需各取所用。

React

React 可谓风头正盛一时半刻无两:

  • 组件化使应用程序更易于开发和护卫;
  • 上学曲线平缓,大旨 API 简洁清晰,易于学习;
  • JSX 语法不落俗套,丰盛发挥了 JavaScript 的能量;
  • 天生适配
    Flux
    和 Redux.
  • 社区活泼且具备成立力,贡献了很多佳绩的开发工具;
  • 单向数据流比双向数据绑定的主意更适合复杂应用程序,质量更高;
  • 支持服务端渲染。

就算比起 Ember、Aurelia 和 Angular 那几个效能丰裕的框架,React
不是全能手,但 React 的开销环境更为健全。就方今而言,使用 React
已经不是1个技能接纳,而是2个商业行为,它能提供更敏捷和更有效的生产力

当您想付出活动选拔时,因为已经学习了 React 语法,所以可以一向上手
React
Native

开发跨平台运用。

Redux

现今,大家早已持有了支出视图层的力量,接下去,大家必要采取别的工具管理应用程序中的状态和生命周期,在那边推荐的工具就是:Redux.

为了同盟 React,推特(TWTR.US) 开发了保管单向数据流的工具
Flux,纵然Flux
基本上达成了对单项数据流的帮忙,可是还要也带了任何难题,比如怎么样保存情状、何处发起
Ajax 请求等等。

为了消除那几个标题,又衍生了一文山会海效仿 Flux
方式的框架:Fluxible、Reflux、Alt、Flummox、Lux、Nuclear、Fluxxor……

脚下以来被开发社区常见协助的一个落到实处便是 Redux.

在 Redux
中,超越一半的零件都以纯函数式的零部件,也只有二个集中的囤积和能源宗旨。Redux
的实例方法负责整个数据的操作和爱惜。比较 Flux 来说,Redux
的思路特别清楚。

更要紧的是,Redux 格外容易学习。Redux 的作者 Dan
Abramov

是2个卓绝的良师,他成立了一层层深远浅出的 Redux
录像教程。通过观望那一个录像,即可成为二个 Redux
方面包车型大巴大家。作者一度见识到叁个零基础的 React
团队在短暂几周内火速开发出了测试版产品,且代码12分安稳和老成。

Redux 周边的生态系统和 Redux 自己一样健康。从神奇的
devtool
到有力的纪念化工具
reselect,Redux
开发社区为开发者提供了全面包车型大巴工具。

开发者大概会本能地去品味抽象出3个 Redux
模板,这么做有成都百货上千益处,但请在认清供给的底子上来封装模板,而并非盲目标去品尝。

ES6 和 Babel

是时候抛弃 CoffeeScript 了,那是因为它的比比皆是特色已在 ES6
中冒出就好像的语法,而 ES6 是实施规范,代表了 JavaScript 今后的腾飞大势。

目前新式的浏览器已经支持
ES6 的大部表征。Babel 是三个有力的转换工具,用于将 ES6 转换为
ES5。其它,依照指标浏览器能够调整代码转换的程度。

那么是不是有品种系统啊?TypeScript
Flow 都为
JavaScript
提供了静态类型系统,使用静态类型检查,能够有效捕获错误,收缩测试量。近来来说,笔者提议对此持观望态度。

TypeScript 在力图让 JavaScript 向 C# 或 Java
的趋向前进,但贫乏了众多高档的品类系统特性,比如代数数据类型(algebraic
data
types
)。其余,它不可能像
Flow 一样有效地处理 null.

相比较而言,Flow 更抓牢有力,捕获的失实类型也愈来愈多,但来之不易配置。其它,它对
JavaScript 新特征的匡助弱于 Babel,也不支持 Windows 系统。

就自己个人的角度而言,在前端开发中类型系统并不是重中之重的一环(此处或者有争执)。在档次系统进一步健康且对
Babel 更要好以前,依旧让大家拭目以待吧。

ESLint

另1个的确的工具是
ESLint。ESLint 扶助 ES6
语法,还提供了 React
插件,已经不单单是2个代码审查工具了。近期的话,JSLint
已经过时了,ESLint 能够替代
JSHint
JSCS 独树一帜了。

开发者能够依据自身的供给安插 ESLint,可是在此处小编提出依照 AirBNB
的开发规范
展开布置,也能够直接使用
ESLint airbnb
config
。当然那份正经中尚有不足之处,但保持团队完全代码的一致性,能够使得增强代码的可读性。

当您熟稔了 ESLint 之后,建议开发者深切地品尝当中的规则。ESLint
捕获的荒谬越来越多,产品的安定团结越高。

NPM,CommonJS 和 ES6 modules

遗忘 Bower 吧,用 NPM 接管一切。类似 Browserify 和 Webpack
的营造筑工程具间接升高了 NPM 在 web 开发中的地位。使用
NPM,版本管理将会尤其简便易行,也将更多地与 Node.js 生态系统接触。方今对于
CSS 的拍卖尚不丰硕完善。

你或者会设想什么在布署服务器上实施营造呢?与 Ruby 的
Bundler 有所分裂,NPM
使用了通配符检索文件,且第②方包能够在代码开发中以及项目揭穿前做任意修改。使用
shrinkwrap
文件能够冻结项目中的第2方依赖,小编提出使用 User 的
shrinkwrap
,提升出口的一致性。别的,开发者也足以考虑采纳类似
Sinopia
的工具托管本人的私家 NPM 服务器。

Babel 会将 ES6
module

语法转换为
CommonJS。CommonJS
是一种历经实践的语法,那象征稳定和通用,其余,使用类似tree
shaking

(Webpack 2.0 和
Rollup
已经支撑该性格)的机制大家还是能实现静态代码分析。

Webpack

唯有你愿目的在于页面添加数百个脚本标签,不然的话你应有尝试用创设筑工程具来打包页面包车型地铁财富了。别的,你还索要或多或少工具让浏览器帮衬NPM 第二方包。在这里,小编推荐你使用 Webpack.

一年在此之前对于上述工作,开发者还有许多工具可以选拔,比如依据JavaScript 的
RequireJSBrowserify
和 Webpack 消除方案,别的还著名为能对 ES6 的模块举行最好优化的
RollupJS.

在品尝了拥有的工具之后,作者强烈提出开发者采取 Webpack:

  • 通过陈设能够回答各类意况;
  • 支撑主流的模块加载格局(速龙,CommonJS,globals);
  • 里头机制能够修复破损的模块;
  • 能够拍卖 CSS;
  • 到家的缓存系统;
  • 支撑热重载;
  • 能够加载大多数的财富
  • 提供高速的品质优化方案

Webpack 也不行擅长处理大型的单页应用,辅助代码分割和惰性加载。

不过值得注意的是,Webpack
的学习曲线相当陡峭。可是如果您学会了它,那么您就控制了最精锐的创设系统。

那么 居尔p 和 Grunt 呢?比较而言,Webpack
更擅长处理各项财富。若是你供给实施此外品类的营造义务,那么 居尔p 和 Grunt
照旧管用的。对于类似运营 Webpack 的主导职务,我建议直接动用 NPM
脚本

Mocha + Chai + Sinon

在 JavaScript
中,有恢宏可选的单元测试工具,每三个都很平静和矫健。如果你只是用于单元测试,那么现有工具完全能够胜任你的供给。

广大的测试工具有
JasmineMochaTapeAVAJest
等,它们各有所长。

自个儿对三个测试框架的必要有如下几条:

  • 可以在浏览器运营,便于调节和测试;
  • 推行进程快;
  • 福利处理异步测试;
  • 方便在命令行中使用;
  • 能够合作任意断言和数量模拟的第①方库。

率先条标准就解除了 Ava 和 Jest。

我喜欢 Chai
断言
是因为其种类丰盛、成效齐全的插件,喜欢
Mocha 是因为其对异步的上佳协理。强烈建议使用 Dirty
Chai

幸免某个难点。Webpack 的
mocha-leader
插件允许开发者自动执行测试。

对此 React 而言,开发者能够参照一下 AirBNB 的
Enzyme
Teaspoon

自小编分外钟爱 Mocha
的风味,若是你想要的只是最基础的效果,能够参考那篇小说刺探一下
Tape.

Lodash

JavaScript 并从未三个好像 Java 或 .NET
的基本工具库,所以开发者大都会从外表引用二个外表工具库。

日前来说,Lodash
是此类工具中的佼佼者。其余,由于它惰性执行的特点,也让它是最近质量最好的工具之一。使用
Lodash 时无需引用全体能源,开发者能够按需使用当中的函数。在 4.x
版本中,Lodash 为偏爱函数式编制程序的开发者提供了一个“函数式开发”格局。

假设您熟知函数式编制程序,你能够领会一下
Ramda。借使你决定运用那么些库,也许要求引用一些
Lodash 函数。

fetch

诸多基于 React 的应用程序都不再接纳 jQuery
了。除非你正在维护三个破旧的品种照旧利用的第①方库看重了
jQuery,不然已经没有须要运用它了。

自家喜爱让项目保持简洁,在代码中只行使
fetch
。fetch 基于 promise,Firefox 和 Chrome
都卷入了该接口。对于别的浏览器,则必要提供四个腻子脚本。笔者指出利用
isomorphic-fetch
在逐一浏览器和服务端保持效用的一致性。

本来也得以其它能够的第①方库异步获取数据,但笔者认为 fetch 已经足足了。

同构 JavaScript

同构 JavaScript 是指同时运营在客户端和服务端的
JavaScript,常用来在服务端预先渲染页面,提升品质,便于 SEO。使用 React
能够兑现同构
JavaScript,可是并不简单,它提升了程序的复杂度,限制了开发者可选的工具和第③方库。

尽管您正在创设二个 B2C 的站点,比如电商网站,那么您大概就必要选拔同构
JavaScript。可是,对于个中站点还是 B2B
程序,品质就不是最根本的了,则同构 JavaScript 也就不是太主要了。

API

近年各种人就像都在揣摩什么处理 API。每一个人都在与世浮沉的采纳 RESTfull
API
SOAP
已经化为了千古时。最近产业界存在各类 API 协议,比如
HATEOASJSON
API
HALGraphQL
等。

GraphQL 赋予了客户端进行自由查询的能力。搭配
Relay,能够更好地处理客户端的境况和缓存。可是,创制GraphQL 的服务端接口的难度还较大,且一大半的文书档案都是面向 Node.js 的。

Netflix 的
Falcor
看起来提供了和 GraphQL/Relay
相似的力量,同时还下降了服务端的须要,但它最近尚处在开发者预览状态,尚未利用于实际支出。

全部已知的正经都各有缺点,有个别过分复杂,有些只可以处理多少读取而不嗯那多少个更新,有些和
REST 差距显然。许多开发者选取自身付出,可是还会遇上上述的标题。

自我不以为上述有一个健全的缓解方案,但自笔者对 API 有二个融洽的认知:

  • 可预测,遵守一致性协议;
  • 支撑在3遍询问中获取四个实体;
  • 支撑立异操作;
  • 不难调节和测试;
  • 简单使用。

到方今截止,小编还一贯不意识知足上述全部规则的消除方案。

只要你正在使用 RESFful,建议参考
Swagger 来编写 API.

Electron

Electron
可以行使前端技术构建桌面程序,GitHub 团队出品的
Atom 编辑器正是根据Electron 创造的。本质上,Electron 内部封装了五个 Node.js,可以打开
Chrome 窗口渲染 UI,还足以访问操作系统本地的
API,并且没有浏览器中的沙盒机制。开发者能够经过 Electron
打包和分发应用程序。

那是创设跨平台软件最简便易行的不二法门,而且仍可以够选拔上述的兼具工具。别的,Electron
有完全的文书档案和活泼的开发社区。

你大概听他们讲过 nw.js
的芳名,即便它早已存在了多年,但相比较来说,Electron 尤其平稳和易用。

那里有3个基于 Electron、React 和 hot reload
的模板
,尝试一下啊。

延伸

上面是有个别本人在 Instagram 上关切的指标:

建议阅读 Pate Hunt 的 Learning
React
!

Dan Abramov 发布一密密麻麻的录制教程 Getting started with
Redux
,强烈推荐!其它,Dan
还发布过七个关爱列表,比上述尤其详细。

Mark Erikson 的 React/Redux
links

集合也是很好的学习材质。

按需使用

JavaScript 的生态环境发展一点也不慢,正日趋强硬起来。React
的拔尖实践正在定点,周边工具的职分和能力也逐年清晰。

最要紧的工作就是要铭记:保持简洁,按需选取。

假若您的应用程序唯有两三屏,那么就无需利用路由系统;借使你正在开创三个单页应用,那么依旧不供给Redux,只要求 React 本人的 state 属性即可;如果你正在创建二个不难易行的 CRUD
程序,那么您就不供给动用 Relay;若是你正在上学 ES6,并不要求深入地问询
Async/Await 或装饰器;若是您刚刚开端学习
React,并不要求使用热重载和服务端渲染;如若你刚好接触
Webpack,你就不须要分离代码和联合多个能源;如若你刚刚学习
Redux,你不须要知道使用 Redux-Form 和 Redux-Sa瓦斯。

维持简洁,每一趟只做一件事!