文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

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

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

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

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

第 1 段(可获 1.25 积分)

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

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

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

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

第 2 段(可获 1.78 积分)

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

JavaScript 和 DOM 基础

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

  • ES6JavaScript 的最新版本是 ES2016 (即 ES7),但很多开发人员还没有完全掌握ES6。是时候了解ES6了,至少需要了解下面这些基础的知识:箭头函数, rest参数/spread运算符, 默认参数,简洁的对象直接量表示法,解构等等;
  • 闭包: 学习JavaScript的函数作用域是如何发挥作用的;
  • 函数 & 纯函数 : 也许你会认为自己已经熟练掌握了函数的功能,但是JavaScript中的函数有一些自己的技巧,而且你需要学习纯函数来应付函数式编程;
  • 函数式编程基础 : 函数式编程通过组合数学函数来产生程序,可以避免共享状态和可变数据。在产品级JavaScript应用程序中没有大量使用函数式编程的情况我已经很多年没有见过了。因此,现在是时候掌握函数式编程的基本原理了;
  • 部分应用 & 柯里化
  • 原生方法 : 学习内置标准数据类型的方法(尤其是 arraysobjectsstrings, 和 numbers类型);
  • 回调函数 : 回调函数是一个基本函数,它由另一个函数在特定结果发生时调用。回调函数可能会说: “执行你自己的逻辑,在特定事件发生时调用我”。
  • Promises机制 : 诺言是用来处理未来返回值的一种方法。如果某函数调用返回一个诺言对象,你可以使用该对象的 .then()方法绑定一个回调函数,它在诺言兑现的时候被调用。 而且,诺言兑现时候的值会传递到你的回调函数比如: doSomething().then(value => console.log(value));
const doSomething = (err) => new Promise((resolve, reject) => {
  if (err) return reject(err);

  setTimeout(() => {
    resolve(42);
  }, 1000);
});

const log = value => console.log(value);

// Using returned promises
doSomething().then(
  // on resolve:
  log, // logs 42
  // on reject (not called this time)
  log
);

// remember to handle errors!
doSomething(new Error('oops'))
  .then(log) // not called this time
.catch(log); // logs 'Error: oops'

 

第 3 段(可获 3.58 积分)

 

第 4 段(可获 1.83 积分)

使用工具

  • Chrome Dev Tools: DOM 检查 & JS 调试器:最好的调试器,在我看来,你也会想用 Firebox 的一些很酷的工具。
  • npm: JavaScript 语言标准的开源包仓库。
  • git & GitHub: 分布式版本管理 —— 全程跟踪源代码的变化。
  • Babel: 编译 ES6 使之能用于更旧的浏览器。
  • Webpack: 最流行的标准 JavaScript 打捆工具。(寻找入门级工具/样板配置示例以快速使用)
  • AtomVSCode, 或者 WebStorm + vim: 你会需要一个编辑器。Atom 和 VSCode 是当今最流行的 JS 编辑器。Webstorm 是另一个选择,它拥有强大的支持和质量工具。我建议学着使用 vim,至少收藏它的使用技巧,因为你迟早会在服务器上去编辑文件,而 vim 是最简单易用的 —— vim 安装在每个 Linux 兼容的操作系统中,而且可以在 SSH 连接的终端上运行良好。
  • ESLint: 尽早发现语法错误和风格相关的问题。它是继代码审核和 TDD 之后,第三个值得你拥有并用来减少代码缺陷的东西。
  • Tern.js: 标准 JavaScript 的类型推导工具,是目前我最喜欢的类型相关的 JavaScript 工具 —— 它没有编译步骤,也不需要注解。我几乎尝试过所有相关工具,Tern.js 是最好的,它作为 JS 的静态类型系统工具,几乎不需要成本。
  • Yarn*: 类似 npm,但能更加保证安装行为的确定性。而且 Yarn 的目标之一是比 npm 更快。
  • TypeScript*: JavaScript 和静态类型。它完全是可选的,除非你学习 Agnular 2+。如果你不使用 Angular 2+,在选择  TypeScript 之前应该仔细对其进行评估。我非常喜欢它,也很佩服 TypeScript 团队的优秀工作。但你需要了解它并进行权衡。需要阅读: “The Shocking Secret About Static Types (静态类型令人震惊的秘密)” & “你可能不需要 TypeScript”.
  • Flow*: JavaScript 的静态类型检查器。看看 “TypeScript vs Flow”,这里对两个工具进行了令人印象深刻地客户比较。注意我在 IDE 中使用 Flow 的感觉并不好,即使使用了 Nuclide
第 5 段(可获 4.49 积分)

React

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

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

这是双向数据绑定,在DOM变化的地方可直接更新ID, DOM的变化可以直接更新数据 (e.g., 类似Angular 1 和 Knockout). 使用双向绑定, DOM渲染过程中对DOM的更新(称为消化周期 Angular 1) 有可能在触发绘图阶段之前就完成了, 这样也造成回流和重绘 — 减慢了性能.

React没有规定数据管理系统, 但是推荐使用 Flux-based. React’s ,它是单向数据流的方法,借鉴于函数式编程不可变数据结构改变了我们对前端框架结构的思考方式.

第 7 段(可获 1.28 积分)

更多关于 React & Flux 架构的内容请阅读 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.

Redux

Redux 为你的 App 提供了事务的、确定性状态管理的功能。在 Redux 中,可以对 action 对象流进行迭代来减少应用的状态。想要了解为什么这个问题很重要,请阅读 “10 Tips for Better Redux Architecture.” 。想要开始学习 Redux ,可以阅读 Redux 创始人发布的超棒的教程

第 8 段(可获 1.55 积分)

Redux是必须掌握的一项知识, 即便是你在生产项目从来没有使用过Redux .

为什么必须要掌握学习? 因为它会给你大量的经验和指导,让你了解使用纯函数和教你新的思考方式reducers的价值, 一般的函数编程遍历集合的数据,只是能提取一些值. Reducers 通常是用于数组原型方法Array.prototype.reduce被 添加到JS的规范.

Reducers优势远远超越了仅仅使用数组,它的作用对工作是很重要很有帮助,因此学习一种新的 Reducers知识是很有价值的.

第 9 段(可获 1.25 积分)
  • redux-saga*: 为Redux设计的同步请求作用库. 用这个来管理I/O数据流 (例如处理网络请求).

Angular 2+*

Angular 2+ 是谷歌开发的非常受欢迎的一个Angular框架. 因为它疯狂的流行,它会使你的简历看着非常棒 —但是我强烈建议你首先学习 React.

我有一些建议关于 React 超越 Angular 2+ 因为:

  1. 这很简单,而且
  2. 它也非常受欢迎,用于大量的工作项目 ( Angular 2+也是如此)

基于这些原因我建议你学习React, 我把 Angular 2+设置为可选学的*. 如果你有强烈的偏爱Angular 2+, 两者随意使用.首先 主要学习Angular 2+, 然后考虑React 选学. 这两个的任何一个都会是你的简历看起来很棒.

第 10 段(可获 1.6 积分)

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

RxJS*

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

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

import { Observable } from 'rxjs/Observable';
// then patch import only needed operators:
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';

const foo = Observable.from([1, 2, 3]);
foo.map(x => x * 2).subscribe(n => console.log(n));

 

第 11 段(可获 1.48 积分)

使用片段式导入减小和压缩生产文件到~200k. 非常划算. 它会使你的应用程序更快.

编辑: 你为什么不列出<你最喜欢的 事>?

有几个人问我为什么没有列出他们最喜欢的框架。 我考虑的一个重要标准 “这对实际工作有用吗?”.

是的,这是一个受欢迎的挑战, 这些有利条件用一个框架去开发一个重要的条件在哪里你花费你的学习时间长短.

为了回答这个问题,我看了一些关键指标。 一、谷歌趋势。 如果你想看看谷歌趋势图, 记住按主题选择, 不是关键词, 仅仅靠几个简单的关键词很难做出正确的判断. 换句话说, 这些都是主题聚焦的趋势, 不是关键字搜索:

第 12 段(可获 1.83 积分)

Google Trends 关于 JS 的主题

这个图表告诉我们感兴趣的几个项目的信息。如果人们在搜索这些项目,他们可能正在探索该选择什么样的项目,或者是寻求帮助和文档。这个是一个对项目受欢迎程度的一个比较不错的指标。

另外一个很好的数据来源是 Indeed.com,这里汇集了来自各种源头的招聘信息数据列表。近年来,工作岗位的受欢迎程度急剧下降,但是他们仍然收集了足够多的数据来做相对的比较,可以告诉你人们在生产项目和工作中实际使用的技术:

第 13 段(可获 1.23 积分)

为了重现这些结果,请搜索框架名称+javascript,然后让地址栏为空。你就可以清晰的看到:

Angular 和 React 占据主导地位:其他的暂时无法比拟。(除了 jQuery ,这是大量网站正在使用的框架,包括非 App,因为它在几乎所有的老旧系统中使用,包括广受欢迎的 CMS —— WordPress)。

你可能会看到 Angular 相比起 React 有较明显的优势。那为什么我会首先推荐 React 呢?因为:

  1. 更多的人对 React 的兴趣比 Angular 更大
  2. React 在用户满意度上明显优于 Angular
第 14 段(可获 1.19 积分)

换句话说,React 赢得了媒体和客户满意度的战斗,如果这个势头继续保持,React 非常有机会能够干掉 Angular ,成为前端框架的主导。

Angular 2+ 有机会扭转这一局面,所以它卷土重来,但是到目前为止,React 还是打了一场很好的战斗。

需要关注的框架:

  • Vue.js* 获得大量的 GitHub 点赞和下载。照着这个势头,它在 2017 年会表现得非常好。但我不认为它会在未来一年内取代 React 和 Angular (这两者同样发展迅速)。你可以在学习 React 和 Angular 后学习一下合这个框架。
  • MobX* 是一个很棒的数据管理库,而且已经成为了 Redux 非常受欢迎的替代品。同样增长快速,我希望它在 2017 年可以表现得很好。对绝大多数 App 来说,我更倾向于 Redux,但肯定有一些场景是 MobX 更适合的。例如,如果你的页面中有成百上千的动态 DOM 对象,那么 MobX 表现会更好一些。同样,如果你的App 工作流非常简单,而且不需要事务以及确定的状态,你可能也不需要 Redux。MobX 完全是一个更简单的解决方案。你可以在学完 Redux 后再去学 MobX。

编者注:关于 MobX 和 Redux 的比较请阅读这篇文章

第 15 段(可获 2.88 积分)

紧接着下一步

现在你已经研究了这些热门技术, 阅读 “如何在5个简单步骤中开始你的第一个开发工作”.

提高你的JavaScript技能. 如果你还没有进入角色, 你将会错过很多.

“JavaScript应用程序编程”(O’Reilly) 的作者是埃里克•艾略特 ,  “学习JavaScript和Eric Elliott”. 他曾经的软件经验 Adobe 系统Zumba 健身《华尔街日报》ESPN英国广播公司, 顶级录音艺术家包括 亚瑟,弗兰克海洋,金属乐队, and many more.

他大部分时间都呆在旧金山湾,和世界上最漂亮的女人在一起.

第 16 段(可获 1.31 积分)

文章评论

武汉访客
这篇文章不是你写的,那就算了,不怼你了,老外没啥好说的