为谁而来

这项学习计划是给你的，如果:

· 你已经熟悉了基本的编程概念，比如变量和函数。

· 你可能做过一些如 PHP 和 Python 语言的后台工作，或许你也使用过诸如 jQuery 这样的前端库，去完成一些简单的前端代码编写。

· 现在你希望能进入更为重要的前端开发中，但在开始之前就已陷入各种框架和库中。

我们要包含的内容

· 现代 JavaScript 的 web 应用程序看起来怎么样？

· 为什么你不能只使用 jQuery ?

· 为什么 React 是最安全的选择？

· 为什么起初你可能不需要”正确地学习 JavaScript ”？

· 如何学习 ES6 语法？

· 为何以及如何学习 Redux ?

· GraphQL 是什么以及它为何是一个大问题?

· 下一步我们将去哪里？

这里提到的资源

免责声明：这篇文章涉及到一些与 Wes Bos 的一些会员链接，但是材料是值得推荐的，因为我真心认为它不错，并不仅仅因为这个代销商方案。

如果你想找到其他资源，Mark Erikson 包含了一系列 React，ES6和Redux 的链接。

JavaScript 和 JavaScript

在我们开始之前，需要确保我们讨论的是同一件事。如果你谷歌搜索“学习 JavaScript ”或“ JavaScript 学习计划“，你会发现大量的资源，教你如何学习 JavaScript 语言。

但这实际上是容易的地方。当你确定要深入挖掘并且学习这门语言的深奥之处时，真相是，大多数 web 应用只使用相对简单的代码。换言之，编写web应用的80 %的东西通常包含在经典 JavaScript 书中的前几章。

不，难题是掌握 JavaScript 生态系统，以及那些无数具有竞争力的框架和库。好消息是，这些内容确实是这个学习计划关注的。

JavaScript 应用程序的构造块

为了理解现代 JavaScript 应用程序为何看起来如此错综复杂，你首先要了解它们是如何工作的。

首先，让我们看一下 2008 年左右的“传统”的 web 应用程序。

1. 数据库发送数据到后台（例如 PHP 或者 Rails 应用程序）。

2. 后台读取数据并输出 HTML。

3. HTML 被发送到浏览器，并作为 DOM 元素显示出来。（基本的网页）

现代许多应用程序也会在客户端写一些 JavaScript 代码来增加交互性，比如标签页和模态框。但从根本上说，浏览器仍然接受 HTML 并going from there。

让我们比较一下这个“现代版”的 2016 web 应用程序（又名“单页面应用程序”）：

注意到不同了吗？浏览器不再发送 HTML，转为发送数据，而这种“数据到 HTML”的转换过程反而发生在客户端（这就是为什么你写代码的同时，会告诉客户如何进行切换）。

这有许多启示，首先，好的方面：

· 对于某一给定内容，只发送数据比发送整个 HTML 页面更快。

· 客户端可以在不刷新浏览器窗口的情况下，立即更换内容（所谓的“单页面应用程序”）。

坏的方面：

· 初始加载需要更长时间，因为“数据到 HTML”的代码库会变得更大。

· 现在，你需要在客户端也有一个位置储存、管理数据，以防你想缓存它或者检查它。

丑陋的方面：

· 恭喜了，如果你现在需要处理的是客户端协议栈，而你只能得到复杂的服务器端协议栈。

客户器-服务器端频谱

既然有如此多的缺点，为什么还要经历这些麻烦呢？为什么不一直坚持好用的旧版 PHP 应用程序呢？

好吧，假设你在编写一个计算器，如果用户想知道 2 + 2 的结果是什么，当浏览器完全有能力这样实现操作的时候，去到服务器展示如何操作是毫无意义的。

另外，如果你在编写一个纯静态网站，如博客，在服务器生成最终的 HTML 就很好  。

真相是大多数 web 应用都落在了这个频谱的中间。问题是要知道它处于的位置。

但关键的事情是，频谱是不连续的：你不能从一个纯服务器端应用程序缓慢移动到一个纯客户端应用程序。在某些方面（两者的分界线），你将不得不停下来重构这一切，或者用大量混乱的无法维护的代码来结束它。

这就是你为什么不应该“只使用 JQuery”来应对一切。你可以认为JQuery 像胶带一样，对于房屋周边的小修复是极其方便的，但是如果你不断在你的房子上增加胶带，看起来会越来越丑。

另一方面，现代的 JavaScript 框架更像是 3D 打印一个替换件，它需要花费更多时间，但结果却更简洁，更稳固。

换言之，掌握现代 JavaScript 栈将会是一个赌注，不管它们开始在哪里，大多数 web 应用程序早晚会结束在这个分界线的右侧，所以，这意味着更多的工作，但是安全性高总好过遗憾。

第 0 周：JavaScript的基础知识

除非你是一个纯粹的后端开发者，不然你可能知道些许 JavaScript 知识。即使你对 JavaScript 知识一点都不了解，如果你是一个 PHP 或者 Java 开发，JavaScript 的类C 语法看起来也会有点熟悉。

但如果 JavaScript 对你来说，完全是个谜，不要绝望。外面很多免费资源将迅速让你加快学习速度。比如，Codecademy 的 JavaScript 的课程是个开始学习的不错的选择。

第一周：从 React 开始

现在已经知道 JavaScript 的基础知识，那你明白为什么会出现如此复杂的 JavaScript 应用程序了吗？让我们来谈谈细节，你应该从哪里开始学习呢？我认为答案应该是 React。

React 是由 Facebook 创建并开源的 UI 库，换句话说，它关心的是

“数据到 HTML 转换”的过程（视图层）。

此时此刻，别误解我的意思，我并不是要你去挑剔 React ，因为它是最好的库（这是非常主观的），但它真的很好用。

· React 可能不是最受欢迎的库，但它是相当大众化的。

· React 可能不是最轻量级的库，但它确实很轻。

· React 可能不是最容易学习的，但它确实很容易学会。

· React 可能不是最优雅的，但它确实很简洁。

换句话说，React 在每一种情况下可能不是最好的选择，但我相信它是最稳妥的，相信我，伴随着你的技术选择，“刚开始的时候”不是冒险的最佳时刻。

React 将为你介绍一些有用的概念，如 components，application state，

stateless functions。无论你在职业生涯中使用哪个框架或库，这将会被证明是有用的。

最后，React 拥有包含其他其他包和库的大的生态系统，这些都使用 React 工作运行。它的绝对普及意味着你可以找到很多的帮助网站，如 Stack Overflow 。

我个人推荐 Wes Bos 给 React 初学者的课程。这是我如何开始自学React，它完全是用最新 React 的最佳实践验证过的。

起初，你是否应该“正确地学习 JavaScript”呢？

如果你是一个非常有条理的学习者，你可能想在做其他事之前很好地掌握 JavaScript 的基础。

但是这对于其他人来说，感觉像是通过学习人体解剖学和流体动力学来学习游泳一样。当然，这两者都在游泳过程中发挥了重要的作用，但是更有趣的只是跳进泳池!

这儿没有正确或错误的答案，它完全取决于你的学习风格。事实上，

最基本的 React 的教程可能只会用到 JavaScript 的一小部分，因此当下将注意力放在你所需要的内容上，将剩余部分留在之后，这种方法是极好的。

这也普遍适用于 JavaScript 生态系统。此刻，不要过于担心事情的来龙去脉，像 Webpack 和 Babel 。事实上，最近 React 出来了自己的微命令行程序，让你不进行任何配置就能创建应用程序。

第二周：你的第一个 React 项目

让我们假设一下你刚刚完成了第一个 React 课程。如果你和我一样，有两件事可能是对的:

· 你曾经学习过的东西，已经被你忘记了一半。

· 你迫不及待地将你所记得的一半用于实践中。

我相信学习框架或语言的最好方法就是使用它。个人项目是试用新技术的最佳时机。

个人项目可以是一个单一网页到一个复杂 web 应用程序中间的任何一种，但我觉得重新设计自己的个人网站是一个很好的中间地带。另外，我知道你可能已经推迟了多年！

之前我确实说过使用单页面应用程序写静态内容往往是多余的，但是 React 有一个秘密武器：Gatsby ，一个 React 的静态网站生成器，它可以让你“投机取巧”，同时得到 React 的全部好处且无任何缺陷。

这就是为什么Gatsby 是用 React 开始的一个好方法。

· 预配置 Webpack ，意味着你能毫不头疼地得到所有的好处。

· 基于你的目录结构自动配置路由。

· 所有 HTML 内容也是在服务器端生成的，所以你得到了两者的最好部分。

· 静态内容意味着没有服务器，并且超级容易托管到 GitHub 页面上。

我使用 Gatsby 写the State Of JavaScript 网站，而不必担心路由配置，构建工具的配置，或者服务器端渲染为我节约了大量时间。

第三周：掌握 ES6

在我自己学习 React 的探索中，我可以通过复制粘贴示例代码，迅速达到一个点，但仍有很多不明白的地方。

确切地说，我并不熟悉 ES6 介绍的所有的新功能，如：

· 箭头函数

· 对象解构

· 类（的支持）

· 拓展参数

如果你上了这条船了，也许是时候花几天时间来好好学一下 ES6。如果你喜欢 React 的初学者课程，你可能会想看一下 Wes 的那些良好的 ES6 学习视频。

或者如果你喜欢免费的资源，看看Nicolas Bevacqua’s book, Practical ES6。

掌握 ES6 的一个好的练习就是重构以前的代码库（比如你在第二周创建的那个），将你的代码改得更短，尽可能地简洁。

第四周：从事状态管理

就这点而言，你应该可以建立一个由静态内容支持的简单的 React前端项目。

但真正的 Web 应用程序不是静态的，它们需要从某个地方获取数据，通常是某种类型的数据库。

现在，你可以只发送数据到你单个的组件上，但很快将一片混乱。比如，要是两个组件需要相同的数据呢？或者需要彼此谈话呢？

这就是状态管理起源的地方。而不是在每个单独的组件一个字节一个字节地储存你的状态（换言之，也就是你的数据）。你储存在一个单一的global store，然后分派给你的 React 组件。

在 React 的世界中，最受欢迎的（资源）状态管理库就是 Redux。

Redux 不仅有助于你集中你的数据，而且会执行一些严格的协议来操作数据。

你可以想象一下 Redux当作银行：你不能去当地分行手动修改你的账户总金额（“这儿，让我填几个零!”）。相反，你可以填写一张存款表，然后交给银行出纳，授权去执行执行这个操作。

同样地，Redux 也不会让你自己直接修改你的全局状态。相反，你可以通过减速器执行操作，以及执行操作的特定函数，并作为结果返回更新后的新状态。

所有这样额外的工作的结果是一个高度标准化的，在你的应用程序维持数据流，并且使用工具比如 Redux Devtools 变得可视化：

再一次，你可以跟着我们的朋友 Wes 和他的 Redux 课程来学习 Redux，这确实是完全免费的！

或者，你可以看看 Redux 创始人Dan Abramov 的video series on egghead.io ，这同样是免费的。

加分第五周：用 GraphQL 构建API

到目前为止，我们差不多只探讨了客户端，这只是等式的一半。即使没有进入到整个的 Node 生态系统，重要的是要专注于解决任何Web 应用程序的某一关键方面：数据如何从服务器端获取到客户器端。

这一点也不会让人感到惊奇，它是瞬息万变的，GraphQL（另一个Facebook 的开源项目）作为一个替代传统 REST API 正在出现。

而REST API 揭示了多REST 路由，每个都给你提供一个预定义的数据集（例如，/api/posts，/api/comments等等），GraphQL 揭示了一个端点，让客户查询所需要的数据。

试想一下，多次往返于肉店，面包店，杂货店，与之相对的是给某人

一个购物清单，并在途中送他们到三个地方。

当你需要查询多个数据源时，这种新策略变得尤为重要。就像我们的购物清单的例子，你可以使用一个单一的请求从所有源获取数据。

GraphQL 在过去一年时间左右已经加速发展，许多项目正计划采用它。

GraphQL 本身只是一个协议，但其现在最大的成就可能是 Apollo 库，使用 Redux 效果很好。关于GraphQL 和 Apollo 仍缺乏指导性的材料，但是希望 Apollo 的文档可以帮助你开始。

React与 Co 以外的

我建议你从 React 生态系统开始，因为它是安全的选择，但它绝对不是唯一有效的前端技术栈。如果你想继续探索这儿有两个建议：

Vue

Vue 是一个相对新的库，但是它正以创纪录的速度在增长，并且被大公司所采用，尤其在中国，像百度和阿里巴巴（认为是中国的谷歌和中国的亚马逊）所使用。这也是 PHP 框架 Laravel 官方的前端层。

与 React 相比，它的一些关键卖点在于：

· 官方维护的路由以及状态管理库。

· 专注于性能。

· 由于使用基于 HTML 的模板，拥有较低的学习曲线。

· 减少示例代码。

就目前这种情况，两个主要的事情仍然是 React 超越了 Vue ，那就是 React 的生态系统和React Native。但我一点都不惊讶 Vue 会很快赶上！

Elm

如果 Vue 是一个更易靠近的选择，那么 Elm 就是相对前沿的选择。Elm 不只是一个框架，更是一个全新的语言，可以向下编译成 JavaScript 。

这带来了多重优势，比如改进的性能，加强的语义版本控制，运行零异常。

我个人还没有尝试用过 Elm ，朋友热烈推荐它，Elm 的使用者似乎很满意它（在State Of JavaScript 调查显示有 84 % 的满意率）。

接下来的步骤

现在，你应该对于整个前端技术栈有一个很好的掌握，同时希望能够用它合理地产出。

这并不意味着你已经做成了！这仅仅是你在整个 JavaScript 生态系统中旅行的开始而已。你最终遇到的还会包括：

· 服务器端的 JavaScript（Node，Express……）

· JavaScript 测试（Jest，Enzyme……）

· 构建工具（Webpack……）

· 类型系统（TypeScript，Flow……）

· 在你的JavaScript 应用程序处理 CSS（CSS 模块化组件……）

· 移动应用JavaScript（原生 React……）

· 桌面应用程序JavaScript（Electron……）

我不能覆盖这儿的所有内容，但不要绝望！第一步总是最难的，想想看：你只是阅读了这个学习计划。

现在你明白了JavaScript 生态系统中的各个部分是如何结合在一起的。

这只是你接下来要学习的东西，然后每个月解锁一项新技术。