前言

岁末年初蛮适合看文章，昨天的日签你看了吗？到了2017年前端又会出什么新品，那就不可而知了。今天我们来看看由百度金融场景团队@石嘉翻译授权分享。

正文从这开始～

Javascript的流行给各类技术，架构和函数库带来了很大的影响，随着它的流行，衍生出了特别多新的东西，那什么才是你应该去关注的呢？

哪些技术在你投入精力后能得到最大的回报？哪种技术被公司广泛的使用？哪类技术今后的潜力最大？

什么是现在最应该知道的技术？本文高度概括了这些内容，每个内容都提供了链接方便大家学习。

当你想要去编写并尝试一些代码，别忘了你可以在Codepen.i上编译它们。如果你也在学习ES6，你可以看看它是怎么被Babel REPL 转换的。

接下来就是一份很长的清单，不要灰心，你可以看完的。当你在看这份列表时，考虑一下怎么把所学到的东西用在你将开发的APP上，然后看看这篇文章”Why I thankful for Javascript Fatigue“，就可以全心全意的去工作了。

要选择性的学习

本文中的一些内容可以作为选修，选择性学习的。如果你真的对它感兴趣或者在工作中会用到它，那么我会推荐它们。千万别觉得所有内容你都有必要掌握。列表中标星号（*）的，就是可以选择学习的内容。

没有标*的属于“必修内容”，但不要认为你一定要把所有的内容都学完。大家对“必修内容”应有自己的衡量标准，没有必要在每一个领域上都成为专家。

JavaScript & DOM 基础

在你决定用JavaScript开始工作前，你需要对相关的基础知识非常了解：

内嵌内容：需要学习一些标准数据类型（尤其是arrays，objects，strings和numbers）。

函数与纯函数：可能你觉得自己已经非常熟悉各种函数了，但在使用JavaScript的过程中，还存在很多小技巧。同时，你需要学习纯函数从而真正掌握函数式编程。

闭包：了解JavaScript中的函数是怎么工作的。

回调：回调是指一个函数被另外一个函数使用，并且在另一个函数完成工作后作出标记。就像对另外一个函数说“干你的活，干完了叫我。

Promises： promise 是用来处理随后到来的数据的方法，当函数返回promise，你可以在promise完成后加上.then()来进行回调，返回的值会传入你回调函数中。例如：doSomething().then(value=>console.log(value));

Ajax & server API calls：大部分有趣的应用都需要连接网络，你应该知道如何使用API通信。

ES6：JavaScript目前最新的版本是ES2016（ES7），但很多开发者还在使用那些过时的旧版本。

Classes：（参考：Avoid class inheritance，具体请看：How to Use Classes and Sleep at Night）

函数式编程的基础知识：函数式编程通过结合各种数学函数来实现，从而避免了分享状态和可变数据。距离上一次我看到没有使用过多函数式编程的JavaScript应用产品已经过去了太久，现在是时候来回归基础了。

Generators & 异步/等待：我认为编写异步程序的最高境界就是它看起来是同步的。要达到这个目标可能会遇到瓶颈。但只要你搞清楚了这个过程，相关的代码会读起来非常简单。

性能：RAIL——你可以从这两个地方学起“PageSpeed Insights”和“WebPageTest.org”。

PWAs(Progressive Web Applications)：详见“Native Apps are Doomed”，“Why Native Apps Really Are Doomed”

Node & Express：通过Node，你可以在服务器上运行JavaScript，这意味着你的用户可以在云端存储数据，并且能在任何地方读取他们。Express 可以说是目前最为流行的Node框架。

Lodash：一个很好的模块化、高效JavaScript工具库，由函数式编程组成。可以通过lodash/fp进入相关功能模块。

工具类

Chrome Dev Tools：DOM inspect&JS debugger：算是最好的调试器了。但是Firefox也有一些挺新奇的工具，你可能会想要尝试一下。

npm ：为JavaScript提供的一个标准的开源的包管理工具。

git&Github: 分布式版本管理工具——始终保持对会变更源码的监控。

Babel：作用是使ES6在低版本的浏览器上运行。

Webpack：对于JavaScript来说最为流行的打包工具，它会寻找一些简单的配置样本来加快运行的速度。

Atom，VSCode和WebStorm+vim：你一定会需要一个编辑器，Atom和VSCode是目前最火的JS 编辑器。WebStorm是另外一个选择，它支持很多高质量的工具。我推荐学习Vim，或者至少将它保存在书签页，因为迟早你会在服务器上编辑文件，而它就是最简单的方法。Vim已经被安装在各种Unix兼容的操作系统上，并且在SSH终端连接上有很好的表现。

ESLint：让你更早的发现语法错误和样式问题，在结束了代码核对和TDD（测试驱动开发）之后，第三件事最好就是使用ESLint就是减少代码中的bug。

Tern.js：一个为JavaScrip设计的代码分析引擎，也是我目前这一类中最喜欢的，它省略了编辑的步骤和注释请求。我已经不再使用别的类似工具，因为Tern.js自身已经足够好了，并且它几乎可以毫无成本的为JS使用静态系统。

Yarn*：与npm类似，但是必须要经过经过安装，它致力于实现比npm更快。

TypeScript*：JavaScript的静态版，这个完全是可选择学习的内容，除非你正在学习Angular 2。如果你没有在学习Angular 2，你应该在选择使用TypeScript之前好好权衡一下。我个人很喜欢使用它，并且非常欣赏他们团队开发的一些绝妙的项目。有一些关于它的事情你可能还是需要看看这两篇文章，“The Shocking Secret About Static Types”和“You Might Not Need TypeScript”。

Flow*： 为JS提供静态检验，从这“TypeScript vs Flow”，可以看到一些很有用的信息，包括针对这两者客观的比较。值得一提的是，我在使用Flow去给IDE做反馈的时候遇到了一些困难，甚至都用到了Nuclide。

React

React是一个由Facebook开发的，构建用户界面的JacaScript库。它的想法基于单向的数据流动，也就是说，对于每个升级周期，都有以下特点：

• React将组件的输入看作一个道具，并且只有在DOM中特殊的部分发生了改变，才会有条件的渲染>DOM的更新。数据的更新将不再进一步出发渲染，直到下一个过程中。
  

• 时间处理阶段——在DOM被渲染后，React会监听所有的事件，并且会授权一个事件变成DOM tree根>目录下唯一的监听者（目的是做到更加高效）。你可以在反馈中监听到所有的事件和更新数据。

• 如果出现了数据变更，重复第一步。

这个是在与双向数据捆绑做对比，指的是那些对DOM的小调整会直接进行数据更新的方式（例如，使用Angular 1和Knockout）。双向数据捆绑的例子中，在DOM渲染过程，对DOM的修改会造成在渲染过程结束前，发起另一次渲染，这是因为回流和重绘。（这样看来效率就比较地下）。

React没有规定要使用哪个数据管理系统，但是基于Flux的方法就会推荐此类系统。React单向数据流的理念是来自于函数式编程和固定的数据结构，这改变了我们思维中原有的前端框架模型。

更多有关React和Flux的架构，可以参考：“The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”

• Create-react-app*：React快速入>门。

• React-router*：废弃了的React简单路由。

• Next.js*：过时了的简单通用渲染，路由的节点以及React。

• Velocity-react*：React动画——允许用户以>更好的视觉交互为目的，在页面上使用VMD的书签。

Redux

Redux为你的应用提供事务处理与决定性状态管理机制。在Redux中，我们对活跃对象的数据流进行迭代，从而减轻当前应用的状态。想了解为什么这么做，移步：“10 Tips for Better Redux Architecture”。如果想开始学习Redux，请参考Redux创始人Dan Abramov的相关课程：

• “Getting Started with Redux”

• “Building React Applications with Idiomatic Redux”

即使你从没在你的项目中用过Redux，那它也是值得学习的。

至于原因，是因为它会为你提供很多练习的机会，并且告诉你使用纯函数的价值，以及让你对Reducers产生新的看法。这新的看法指的是使用通用功能函数对数据进行迭代和提取。当Array.prototype.reduce加入JS的规则中，Reducers通常都会起到作用。

Reducers的重要性堪比数组，所以学会使用Reducers是至关重要的。

Redux-saga*：是一个同步的，有副作用的Redux库，可以用它来管理I/O（例如处理网络请求）。

Angular 2*

Angular 2可以被看作是Google Angular框架的继承者，它现在实在是太流行了，或许你已经想要重新使用它了，但是我个人还是推荐先学习React。

在我这里React的优先级之所以比Angular 2高，主要因为：

• React更简单；

• React也非常流行，而且用于很多的项目中（Angular 2 也是）。

所以我推荐React，但是我也将Angular 2作为高级选项可供选择。如果你更想学习并使用Angular 2，这当然没问题，你可以先学习Angular 2，然后在考虑React。两者不管用哪个都有百利而无一害。

不论你选择使用哪个，最好能坚持六个月到一年。然后再学习另一个，毕竟要精通某个技术，需要投入大量的精力。

RxJS*

RxJS是JavaScript的一个响应式编程工具，可以将它比作Lodash之于数据流。响应式编程已经正式登陆了JacaScript的场景中。ECMAScript Observables在第一阶段的草案中提议，RxJS 5+ 将会被作为一个标准典型来开发实现。

就像我喜欢使用RxJS一样，如果你总是将所有的东西一次性的输入，那真的会造成包的膨胀。为了解决这个膨胀的问题，千万不要一次性输入太多。用补丁的方式输入：

使用补丁的方式输入可以为依赖RxJS的包减少大概200K的空间，这已经很多了。同时他也会让你的应用更快。

结语

现在的你应该了解了几乎所有的热门技术，你可以去看看这篇文章了“How to Land Your First Development Job in 5 Simple Steps”。

最后，如果在2016年年底有给自己制定明年学习计划的话，你应该很清楚自己想要学什么了？但前端有一个点是你想学A，但看完之后你需要依赖B，你才能实现A的梦想。然后技能树点越来越大。

关于本文

译者：@石嘉

译文：https://github.com/Findow-team/Blog/issues/4

原文：https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.97bax2u1q

看完昨天的日签，再看看今天的，有何感想？回复 20161228 查看如何成长。