治愈 JavaScript 疲态的学习计划【转载】

来源：伯乐在线 - Rose Wang 

 

像其余人同样，最近我读了 Jose Aguinaga 的文章 《How it feels to learn JavaScript in 2016》。

显然，这篇文章触及了你们的神经：我一而再地在 Hacker News 看到它位居榜首。这也是 Reddit 网站里 javaScript 分类下最为热门的帖子，截至目前，在 Medium 上已有超过一万的喜欢数，极可能比我全部的文章加起来的喜欢数都多。但谁说了算呢？

尽管这并不意外，我很早以前就知道 JavaScript 生态系统会是混乱的。事实上，我进行这个《 State Of JavaScript 》调查的特殊缘由就是要找出哪些库是实实在在受欢迎的，而且从喧闹声中整理出分类。

可是今天，我想往前迈进一步。而不是简单地抱怨这个事态，我将会给予大家一个具体的，按部就班的学习计划来攻克 JavaScript 这套生态系统。

为谁而来

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

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

• 你可能作过一些如 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 生态系统中的各个部分是如何结合在一块儿的。

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

保持联络

你以为这个学习计划有用吗？你但愿我接下里写关于 JavaScript 的哪一部分？留下你的评论或者 tweet 让我知道。

若是你想知道我下次发表的帖子，你也能够注册登陆到 the State Of JavaScript 网站上的邮件列表中查看。

感谢 Michael Shilman。