2016年JavaScript技术栈展望

 

　　若是你正在筹划新的前端项目或者重构现有项目，那么你须要认识到如今的前端开发环境已经今非昔比，这其中有太多的选择了：React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow…… 它们的本意是将开发简单化，却无形中提升了学习成本，也给将来项目的维护带来了不肯定性。

 

　　好在这一现象正在退热，优胜劣汰，优秀的项目慢慢沉淀下来，开发方式也愈来愈清晰。有些开发者正在尝试使用基于上述技术的框架进行开发，也在必定程度上减小了学习成本。

 

　　本文中主要介绍了一些我在 Web 应用开发中所涉及和推崇的技术，其中有一些技术上存在争议，因此我对于每一技术都只作简单的介绍和分析。全部的这些观点都是基于我我的的经验和对社区的接触总结而来的，因此各位还请按需各取所用。

 

React

 

React 可谓风头正盛一时无两：

 

• 组件化使应用程序更易于开发和维护

• 学习曲线平缓，核心 API 简洁清晰，易于学习

• JSX 语法不落俗套，充分发挥了 JavaScript 的能量

• 天生适配 Flux 和 Redux

• 社区活跃且具备创造力，奉献了诸多优秀的开发工具

• 单向数据流比双向数据绑定的方式更适合复杂应用程序，质量更高

• 支持服务端渲染

 

虽然比起 Ember、Aurelia 和 Angular 这些功能丰富的框架，React 不是全能手，但 React 的开发环境更加健壮。就目前而言，使用 React 已经不是一个技术选择，而是一个商业行为，它能提供更高效和更有效的生产力。

 

当你想开发移动应用时，由于已经学习了 React 语法，因此能够直接上手 React Native 开发跨平台应用。

 

Redux

 

如今，咱们已经具备了开发视图层的能力，接下来，咱们须要使用其余工具管理应用程序中的状态和生命周期，在这里推荐的工具就是：Redux。

 

为了配合 React，Facebook 开发了管理单向数据流的工具 Flux，虽然 Flux 基本上实现了对单项数据流的支持，可是同时也带了其余问题，好比如何保存状态、何处发起 Ajax 请求等等。

 

为了解决这些问题，又衍生了一系列效仿 Flux 模式的框架：Fluxible、Reflux、Alt、Flummox、Lux、Nuclear、Fluxxor……

 

目前来讲被开发社区普遍支持的一个实现就是 Redux。

 

在 Redux 中，大多数的组件都是纯函数式的组件，也只有一个集中的存储和资源中心。Redux 的实例方法负责整个数据的操做和维护。相比 Flux 来讲，Redux 的思路更加清晰。

 

更重要的是，Redux 很是易于学习。Redux 的做者 Dan Abramov 是一个优秀的教师，他制做了一系列深刻浅出的 Redux 视频教程。经过观看这些视频，便可成为一个 Redux 方面的专家。我曾经见识到一个零基础的 React 团队在短短几周内迅速开发出了测试版产品，且代码很是稳健和老练。

 

Redux 周边的生态系统和 Redux 自己同样健壮。从神奇的 devtool 到强大的记忆化工具 reselect，Redux 开发社区为开发者提供了应有尽有的工具。

 

开发者可能会本能地去尝试抽象出一个 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

 

另外一个无可争议的工具是 ESLint。ESLint 支持 ES6 语法，还提供了 React 插件，已经不仅仅是一个代码审查工具了。目前来讲，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 文件能够冻结项目中的第三方依赖，我建议使用 User 的 shrinkwrap，提升输出的一致性。此外，开发者也能够考虑使用相似 Sinopia 的工具托管本身的私有 NPM 服务器。

 

Babel 会将 ES6 module 语法转换为 CommonJS。CommonJS 是一种历经实践的语法，这意味着稳定和通用，此外，使用相似 tree shaking （Webpack 2.0 和 Rollup 已经支持该特性）的机制咱们还能实现静态代码分析。

 

Webpack

 

除非你乐意在页面添加数百个脚本标签，不然的话你应该尝试用构建工具来打包页面的资源了。此外，你还须要某些工具让浏览器支持 NPM 第三方包。在这里，我推荐你使用 Webpack。

 

一年以前对于上述工做，开发者还有诸多工具能够选择，好比基于 JavaScript 的 RequireJS、Browserify 和 Webpack 解决方案，此外还有号称能对 ES6 的模块进行最佳优化的 RollupJS.

 

在尝试了全部的工具以后，我强烈建议开发者选择 Webpack:

 

• 经过配置能够应对各类状况

• 支持主流的模块加载方式（AMD，CommonJS，globals）

• 内部机制能够修复破损的模块

• 能够处理 CSS

• 全面的缓存系统

• 支持热重载

• 能够加载大多数的资源

• 提供高效的性能优化方案

 

Webpack 也很是善于处理大型的单页应用，支持代码分割和惰性加载。

 

可是值得注意的是，Webpack 的学习曲线异常陡峭。不过一旦你学会了它，那么你就掌握了最强大的构建系统。

 

那么 Gulp 和 Grunt 呢？相比而言，Webpack 更善于处理各种资源。若是你须要执行其余类型的构建任务，那么 Gulp 和 Grunt 仍是有用的。对于相似运行 Webpack 的基本任务，我建议直接使用 NPM 脚本。

 

Mocha + Chai + Sinon

 

在 JavaScript 中，有大量可选的单元测试工具，每个都很稳定和健壮。若是你只是用于单元测试，那么现有工具彻底能够胜任你的需求。

 

常见的测试工具备 Jasmine、Mocha、Tape、AVA、Jest 等，它们各有所长。

 

我对一个测试框架的要求有以下几条：

 

• 能够在浏览器运行，便于调试

• 执行速度快

• 便于处理异步测试

• 便于在命令行中使用

• 能够兼容任意断言和数据模拟的第三方库

 

第一条标准就排除了 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 协议，好比 HATEOAS、JSON API、HAL、GraphQL 等。

 

GraphQL 赋予了客户端进行任意查询的能力。搭配 Relay，能够更好地处理客户端的状态和缓存。不过，建立 GraphQL 的服务端接口的难度还较大，且大多数的文档都是面向 Node.js 的。

 

Netflix 的 Falcor 看起来提供了和 GraphQL/Relay 类似的能力，同时还下降了服务端的需求，但它目前尚处于开发者预览状态，还没有应用于实际开发。

 

全部已知的规范都各有缺陷，有些过于复杂，有些只能处理数据读取而不嗯那个更新，有些和 REST 差别显著。许多开发者选择本身开发，可是还会遇到上述的问题。

 

我不认为上述有一个完美的解决方案，但我对 API 有一个本身的认知：

 

• 可预测，遵循一致性协议

• 支持在一次查询中获取多个实体

• 支持更新操做

• 易于调试

• 易于使用

 

到目前为止，我尚未发现知足上述全部条件的解决方案。

 

若是你正在使用 RESFful，建议参考 Swagger 来编写 API。

 

Electron

 

Electron 可使用前端技术构建桌面程序，GitHub 团队出品的 Atom 编辑器就是基于 Electron 建立的。本质上，Electron 内部封装了一个 Node.js，能够打开 Chrome 窗口渲染 UI，还能够访问操做系统本地的 API，而且没有浏览器中的沙盒机制。开发者能够经过 Electron 打包和分发应用程序。

 

这是建立跨平台软件最简单的方式，并且还能够利用上述的全部工具。此外，Electron 有完整的文档和活跃的开发社区。

 

你可能据说过 nw.js 的大名，虽然它已经存在了多年，但相比来讲，Electron 更加稳定和易用。

 

这里有一个基于 Electron、React 和 hot reload 的模板，尝试一下吧。

 

延伸

 

下面是一些我在 Twitter 上关注的对象：

 

• Dan Abramov, Redux 的建立者

• Christopher Chedeau, 很是活跃的 React 开发者，现就任与 Facebook

• Jeff Morrison, Flow 的核心贡献者之一

• Sebastian Markbåge, React 的建立者之一

• Pete Hunt

• React

• 更多值得关注的对象请参考 React Influencers

 

建议阅读 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-Sagas。

 

保持简洁，每次只作一件事！

 

 

 

连接：http://www.w3cplus.com/javascript/state-of-the-art-javascript-in-2016.html　　　　　　　　　　　译者：南北

原文：https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.x7l3e5j4t