2017年要学习的JavaScript的顶级框架和主题

JavaScript的流行促进了一个非常活跃的由相关技术，框架和库组成的生态圈的发展。整个生态圈的多样性和活跃性越来越强，这让许多人变得越来越困惑。 你应该了解些什么技术呢?

 

我们应该将时间花费在哪里才能获得最大的收益？ 现在公司招聘要求的技术栈包括哪些？哪项技术的发展潜力最大？

 

当前需要掌握的最重要的技术是什么？

 

这篇文章高度概括了你需要了解的技术，并附上了每个技术对应的链接，通过链接中内容你可以详细了解该技术。

记住，在学习的过程中一定要多动手写代码。 你可以通过 Codepen.io 网站来交互式地写代码；或者如果你在学习ES6的话，可以尝试通过 Babel REPL来对其进行转码。

 

这将会是一份很长的清单，但请不要气馁。相信自己，你能够做到的！如果你看着这份清单，担心到什么时候才能学会构建现代应用程序所需的一切，请先移步 “Why I’m Thankful for JavaScript Fatigue”。然后沉下心来开始我们的学习：

 

关于“可选学习”的注意事项

文章中的有些内容是 可选的*，这里可选的意思是：如果你对这些内容感兴趣的话，我向你推荐这些知识；或者，找工作的时候可能会需要了解它们，但是不是非得学习它们。 任何标有星号(如例*)的都是可选的。

 

任何没有标有 “*” 的内容都需要学习，但不要觉得有义务去学习每项内容。你需要知道这些非可选的知识，但你不一定需要成为该主题绝对的专家。

 

JavaScript 和 DOM 基础

在找一份JavaScript工作之前，你应该熟练掌握相关的JS基础知识：

• ES6: JavaScript 的最新版本是 ES2016 （即 ES7），但很多开发人员还没有完全掌握ES6。是时候了解ES6了，至少需要了解下面这些基础的知识：箭头函数， rest参数/spread运算符， 默认参数，简洁的对象直接量表示法，解构等等；

• 闭包: 学习JavaScript的函数作用域是如何发挥作用的；

• 函数 & 纯函数 : 也许你会认为自己已经熟练掌握了函数的功能，但是JavaScript中的函数有一些自己的技巧，而且你需要学习纯函数来应付函数式编程；

• 函数式编程基础 : 函数式编程通过组合数学函数来产生程序，可以避免共享状态和可变数据。在产品级JavaScript应用程序中没有大量使用函数式编程的情况我已经很多年没有见过了。因此，现在是时候掌握函数式编程的基本原理了；

• 部分应用 & 柯里化

• 原生方法 : 学习内置标准数据类型的方法（尤其是 arrays, objects, strings, 和 numbers类型）；

• 回调函数 : 回调函数是一个基本函数，它由另一个函数在特定结果发生时调用。回调函数可能会说： “执行你自己的逻辑，在特定事件发生时调用我”。

• Promises机制 : 诺言是用来处理未来返回值的一种方法。如果某函数调用返回一个诺言对象，你可以使用该对象的 .then()方法绑定一个回调函数，它在诺言兑现的时候被调用。 而且，诺言兑现时候的值会传递到你的回调函数比如： doSomething().then(value => console.log(value));
  1. const doSomething = (err) => new Promise((resolve, reject) => {
  2. if (err) return reject(err);
  3. setTimeout(() => {
  4. resolve(42);
  5. }, 1000);
  6. });
  7. const log = value => console.log(value);
  8. // Using returned promises
  9. doSomething().then(
  10. // on resolve:
  11. log, // logs 42
  12. // on reject (not called this time)
  13. log
  14. );
  15. // remember to handle errors!
  16. doSomething(new Error('oops'))
  17. .then(log) // not called this time
  18. .catch(log); // logs 'Error: oops'

  复制代码

• Ajax & 服务器API调用: 最有趣的应用最终需要与网络交谈. 你应该知道如何与 APIs通信.

• Classes (note: 避免类继承. 阅读 如何使用类and Sleep at Night.)

• Generators & 异步/等待: 在我看来, 最好的方法编写异步代码看起来同步. 它有一个学习曲线, 但是一旦你学会了它, 代码更容易阅读.

• 性能: RAIL — 开始于“PageSpeed见解” &“WebPageTest.org”

• 渐进式的Web应用程序 (PWAs): 阅读 “原生应用” & “为什么原生应用是失败的”

• Node & Express: Node允许您在服务器上使用JavaScript, 意味着用户可以在云中存储数据并在任何地方访问它. Express最流行的框架为Node.

• Lodash: 一个伟大的, JavaScript的模块化使用, 应用了函数式编程的好东西.导入最后一个功能模块的数据 lodash/fp.

工具

• Chrome开发工具： DOM检查  和 JS调试器：最好的调试器，IMO，虽然Firefox有一些非常酷的工具，你也可能想检查。

• npm：  JavaScript语言的标准开源包存储库。

• git  ＆  GitHub：  分布式版本管理器 - 跟踪您的源代码随时间的变化。

• Babel：  用于编译ES6以在旧版浏览器上工作。

• Webpack：  用于标准JavaScript的最受欢迎的捆绑包寻找简单的入门工具包/样板配置示例，使事情快速运行）

• 原子，  VSCode或  WebStorm  +  VIM：  你会需要一个编辑器。Atom和VSCode是当今最流行的JS编辑器。Webstorm是另一种解决方案，非常强大的支持质量工具。我建议学习vim，或者至少加上备忘单，因为迟早会需要在服务器上编辑文件，这是最简单的方法 - vim安装在与Unix兼容的操作系统的每一种风格上，在SSH终端连接上运行良好。

• ESLint：  尽早捕捉语法错误和风格问题。在代码审查和TDD之后，您可以做的第三件事就是减少代码中的错误。

• Tern.js：  用于标准JavaScript的类型推理工具，目前我最喜欢的JavaScript类型相关工具 - 无需编译步骤或注释。我已经踢了所有的轮胎，Tern.js提供了大部分的好处，几乎没有一个使用静态类型的JS系统的成本。

• 纱线 *：  与npm类似，但安装行为是确定性的，纱线的目的是要比npm快。

• TypeScript *：JavaScript的  静态类型。 完全可选  ，除非你正在学习Angular 2+。如果您不使用Angular 2+，您应该在选择TypeScript之前仔细评估。我喜欢很多，我欣赏到TypeScript团队的出色工作，但是您需要了解的权衡。 必读： “关于静态类型的惊人秘密”  和 “你可能不需要TypeScript”。

• Flow *：  JavaScript的静态类型检查器。请参阅 “TypeScript vs Flow”  ，以便对这两者进行令人印象深刻的客观比较。请注意，我有一些困难，让Flow给我很好的IDE反馈，即使使用 Nuclide。

React

React 是一个JavaScript库,用于构建用户界面,由Facebook创建. 它是基于单向数据流的概念, 意味着每个更新周期:

• React 采用组件作为props 和有条件地呈现DOM更新如果数据改变了DOM的特定部分. 数据更新在此阶段不能再触发器渲染,直到下一个绘画阶段.
• 事件处理阶段 — 在DOM渲染之后, React 在DOM树的根中自动将DOM事件委托给单个事件侦听器(为了获得更好的性能). 你可以侦听事件和更新数据的响应.
• 使用任何更改数据, 这过程将重复执行步骤1.

这与双向数据绑定相反，DOM更改可能会直接更新数据（例如，与Angular 1和Knockout相同）。使用双向绑定，DOM渲染过程（称为角度1中的摘要循环）对DOM的更改可能会在绘制完成之前重新触发绘制阶段，从而导致回流和重绘 - 降低了性能。

React不规定数据管理系统，但推荐使用基于Flux的方法。React的单向数据流方法借助功能编程和不可变数据结构的想法改变了我们对前端框架架构的思考。

有关React＆Flux架构的更多信息，请阅读  “学习代码的最佳方法是编写代码：通过构建应用程序来学习应用程序架构”。

• create-react-app *：  开始使用React的最快方式。
• react-router*: React的死路由简单。
• Next.js *：  死亡简单通用渲染和路由节点和反应。
• velocity-react*: 动画 - 允许您使用VMD书签在您的页面上进行交互式视觉运动设计。

Redux

Redux  为您的应用程序提供事务性，确定性的状态管理。在Redux中，我们迭代一个动作对象流，以减少到当前的应用程序状态。要了解为什么这很重要，请阅读 “10个更好的Redux架构提示”。  要开始使用Redux，请查看Redux的创始人DanAbramov的优秀课程 ：

• “Redux入门”
• “用惯用的Redux建立应用程序”

Redux是强制性学习，即使您从未将Redux  用于生产项目。

 

为什么？因为它会给你很多的练习，并教你使用纯功能的价值，   并教你如何思考reducers的新方法  ，这些是  减少数据库的通用功能  ，用于迭代数据集合并从中提取一些值。减速器通常是有用的，  Array.prototype.reduce 被添加到JS规范中。

减少器对于不仅仅是阵列而言是重要的，并且学习使用减速器的新方法是有价值的。

Angular 2+*

Angular 2 +  是Google广受欢迎的Angular框架的继承者。由于这是疯狂的人气，它将在你的简历上看起来很棒 - 但是我建议先学习React。

我喜欢对Angular 2 + 的  反应，因为：

• 这更简单，
• 它非常受欢迎，用于大量工作（Angular 2+）

因此，我建议学习React，但我认为Angular 2+是严格可选的*。如果您对Angular 2+有较强的偏好，请随意互换。首先学习Angular 2+，并考虑React可选。要么会让你受益匪浅，你的简历会很好。

不论你选择哪一个，试着去关注它至少6个月 - 1年之后再去学习另一个。要真正精通是需要时间的历练。

 

RxJS *

RxJS  是JavaScript的响应编程实用程序的集合。认为这是lodash流。响应式编程已经正式官方的进入JavaScript的使用场景。ECMAScript可见提案草案阶段1和RxJS 5 +规范化标准的实现。

我非常喜欢RxJS，如果你只是一下子就把整件事全部导入，它真的可以扩大你的包大小（会产生很多的数据流量，套餐不够用了）。为了减小束生产环境文件的大小，不要导入所有程序接口。使用补丁进口，替代：

1. import { Observable } from 'rxjs/Observable';
2. // then patch import only needed operators:
3. import 'rxjs/add/operator/map';
4. import 'rxjs/add/observable/from';
5. const foo = Observable.from([1, 2, 3]);
6. foo.map(x => x * 2).subscribe(n => console.log(n));