熟悉现代JavaScript的培训计划

文章对于那些不知道从哪里开始学习现代JavaScript和什么库和框架是最好的使用。

如何确定和你们每一个人，我最近看了何塞Aguinagi的一篇文章：“感觉怎么样学习JavaScript 2016年”
当然，本文打破的神经：我看见她两次Hacker News上的顶！这也是在/ R/JavaScript的最受欢迎的文章，但目前它有中等超过10000喜欢，怎么会多收集了我所有的帖子在一起......好吧，但是，谁认为这些哈士奇，对不对？
我并不感到惊讶，我已经知道了很长一段时间，因为这可能阻碍了JavaScript的生态系统。事实上，我跑了JavaScript的国家，以了解图书馆实际上是受欢迎的，因此，在人群中找出有用的。

但今天我要走得更远！与其谈论事物的状态，我要去给你一个明确的教育计划，一步一步地面对JavaScript的生态系统。

这是什么

这个程序对你，如果：

*您已经熟悉了基本的编程概念，如变量和函数
*您在使用，也就是说，PHP和Python的做后端的开发，并可能使用前端库，如jQuery的，对于一些小任务
*您想在前端开发严重渗透，但在框架和库已经溺水，甚至还没有开始它（发展）从事

我们将讨论的主题

*如何在现代Web应用程序使用JavaScript
*为什么不能"只使用jQuery"
*为什么React - 这是最可靠的选择
*为什么不能首先需要JavaScript的深入研究
*如何快速学习语法ES6
*为什么以及如何快速学会Redux
*它是什么GraphQL，为什么它是真的很酷的事情
*去哪里

这些资源

本文包含几个环节的合作伙伴韦斯博斯课程，但我会建议这种材料，因为真的觉得他的价值，而不仅是合作伙伴关系，因为。如果您希望其他资源，马克埃里克森保持链接的大名单上的React, ES6 和 Redux.

JavaScript vs JavaScript

在我们开始之前，我们需要确保我们所谈论的是同一个。如果zaguglit“学习JavaScript”或“培训计划的JavaScript”，那么你一定会找到的资源山上，这会帮助你学习的语言。
但是，在原则上，是比较容易的部分。只要你坚持不懈地深入学习和研究语言的所有复杂，真理必在于，大多数Web应用程序写在相对简单的事实。换句话说，你需要什么编写Web应用程序的80％，将在本书的前几章对每个典型的JavaScript的描述。
不是的，最困难的 - 是要掌握JavaScript的生态系统与相互矛盾的框架和库的所有群众。好消息！本文只是做到了！

JavaScript应用程序的构建块

要理解为什么现代JavaScript应用程序看起来那么难，首先必须了解他们的工作。
首先，让我们来看看“传统”，说2008 Web应用程序：

1.数据库将数据发送到后端（例如，你的PHP或Rails应用程序）
2.后端读取并显示该HTML数据
3. HTML发送到浏览器，其显示为DOM（实际上，网页本身）（文档对象模型 - 译者的注释）
现在很多这些应用撒上JavaScript代码在客户端上添加用户互动 - 模态窗口和标签，但其核心的浏览器仍然接收HTML并显示。
现在，让我们与“现代”（也称“单页应用程序”），2016年的Web应用程序进行比较：

注意区别？取而代之的HTML，现在服务器发送数据，并建立基于数据HTML已经发生在客户端（所以你只要发送，告诉客户如何将这个建筑转换代码）。
它有其后果。
首先是好：
*对于这种类型的内容，只发送比发送整个HTML页面更快的数据
*客户可以立即改变的内容，甚至没有刷新浏览器页面（因此得名“一页附录”）
和坏的：
*开机时间较长时，数量越大
*现在你必须找到存储和管理数据在客户端的地方，也一样，如果你想对它们进行缓存或检查
而令人不快的：
*恭喜！现在，你有客户端部分进行修补不超过服务器少

客户端 - 服务器范围

你还在意义上讨论，因为出汗的时候有这么多不利的一面？为什么不直接使用好老PHP应用程序？
好吧，假设你正在创建一个计算器。如果用户想知道有多少是2 + 2，将是毫无意义的做他的方式回到服务器来计算结果，如果浏览器本身可以做到这一点。
在另一方面，如果你创建一个纯静态网站，如博客，这将是在服务器上生成最终的HTML，而不必担心更多的钱绝对正确的。
事实是，大多数Web应用程序是介于两者之间。要知道在哪里？
但好消息是，我们的范围是不是无限的：你不能用纯粹的服务器端开始，慢慢地向一个纯粹的客户端应用程序移动。在某些时候（当时，所谓的“师”），你必须强制停止并重构一切你写，或者只是留下了很多不支持的面条代码（这是特别危险的，有一种特殊的恶意代码 - 注译者）。

这就是为什么你不能“只使用jQuery»整行。你可能认为jQuery的 - 这苏格兰威士忌。当然，这是要解决的小问题一个了不起的事情，但如果你决定他们的问题越来越多，代码开始看起来难看。
在另一方面，现代的JavaScript框架更像3D印刷机。它们的使用时间较长，但结果是更漂亮，更美观。
换言之，学习现代JavaScript的堆叠相当于一个速率，其中的起始条是不重要的。大多数Web应用程序都可能做师的权利（客户端）一侧的工作。迟早的事。

№0周：JavaScript的基础知识

如果你有后端开发者，你可能尝试过的JavaScript。如果没有，那么类似C的语法，所以你会明白，如果你的PHP或Java开发人员。

但如果JavaScript的 - 这是一些完全陌生的你，不要绝望。在网络浩瀚有很多资源，可以帮助您快速了解。 JavaScript的从Codecademy网站的教训 - 一个很好的开始！

№1周：开始教 React

现在你知道语言的语法和理解应用程序如何能这么复杂的基础，让我们来谈谈一些特别的东西。从哪里开始？
当然，研究React！

React —这个UI库设计和Facebook上的开放存取摆出来，它假定数据转换成HTML的责任。

不要误会我的意思，我不能说React  - 是最好的库（因为这很主观），但我可以肯定地说，这是很不错的。

*阵营未必是最流行的库，但它是相当受欢迎
*阵营未必是最简单的库，但它是很容易
*阵营未必是最简单的库，但它是非常容易学习
*阵营未必是最愉快的探索库，但它足以令人愉快

换句话说，对React 不可能在任何情况下的都是最佳选择，但我可以肯定，他是最可靠的。相信我，一开始 - 这是不是在选择技术时，风险的最佳时间。
React 还教你一些基本概念，如：组件，功能和应用程序状态没有国家，后来是非常有用的，不管你到底选择什么样的框架或库。
最后，处理发生具有与他同在包的工作以及其他图书馆的广泛的生态系统。其受欢迎程度是说，你总能找到在诸如计算器网站帮助（或GitHub的 - 译者的注释）。
我个人建议的过程韦斯博斯 - React 初学者。正是通过他，我学会了React ，但他也更加饱满和最佳实践React 。

你应该首先深度学习JavaScript？

如果你喜欢持续学习，你可能想给你做任何事情之前，首先吃透语言基础。但是，这将等同于，如果你学会了学习人体解剖和流体动力学游泳。当然，这起到了很大一部分在游泳，但它是更有趣，更实用的它是只在游泳池跳！
在这个问题上没有明确回答“是”或“否”，它只是取决于你的学习方式。事实是，在基础广大的指导方针和教训阵营将只使用JavaScript语言的一小部分。所以这是一个好主意 - 把重点放在你现在需要什么，留下其余为更高版本。这也适用于整个生态系统的JavaScript。现在不担心什么，你不知道这样的事情WebPACK中或巴贝尔。此外，近期的React 得到了它自己的命令行实用工具，让您无需其装配的任何配置创建一个应用程序。

№2周：使用你的第一个项目React

让我们假设你已经完成了React的过程。如果你和我都喜欢，有两件事很可能是真实的：
什么是学到了*您已经忘记一半
*您已经等不及要使用你的另一半在实践中获得知识
在我看来，要学习一门语言或框架的最佳途径 - 就是使用它。并引进新的东西在自己的项目 - 这是你能想到的掌握这是最好的事情“新的东西。”您的个人项目可以从一个单页网站到复杂的Web应用程序的任何东西，但我有一种感觉，他们的网站的重新设计，并具有中庸，这是开始。此外，我知道，你可能不会注意它（网站）很长一段时间。
前面我说过，使用静态一页内容的应用可能不是必要的，但React有一个秘密武器 - 盖茨比，静态站点React ，它可以让你“欺骗”，并得到所有的好处React，没有所有的消极方面。

这就是为什么盖茨比 - 一个伟大的选择：
*预设WebPACK中，这意味着你得到所有的好处没有得到头疼
*自动路由，根据您的目录结构
*所有的HTML内容也在服务器端生成的，所以你只能从两侧最好
*静态内容意味着没有服务器和可能性是非常容易地发布你的网站GitHub上的页面
据盖茨比，我以前写Javascript的国家，而不必担心路由配置或组装工具呈现在服务器端。它救了我的时间的海洋。

№3周：学习ES6

在我尝试学习React，我走到这一步，我可能只是复制粘贴示例代码，但它也更是我不明白。
特别是，我是不熟悉这些，最近来找我们从ES6功能，如：
*解构对象
*类
*道岔功能
*扩展运营商

如果你有同样的情况，你需要一点时间掌握ES6。如果你喜欢阵营当然对于初学者，那么你可能已经迫不及待地对韦斯博斯每个ES6一个优秀的合格率。在实践中ES6 - 或者，如果你喜欢免费的资源，你应该阅读这本书尼古拉Bevacqua。一个很好的锻炼了ES6的发展，将通过旧代码行（例如，通过我们在第二个星期写的事实），并转换成通过ES6较短。

№4周：发现财富管理

此时，你应该能够创建一个简单的前端通过阵营静态内容。但真正的Web应用程序不是一成不变的。它们应该是某处从任何数据库数据，例如。在此之前，我们可以只将数据发送到各个组件，但这种方法是通过前面的混乱。


如果应显示是相同的数据，例如两种组分？或者需要交换信息？这是从哪里来的财富管理。相反，在组件（即数据）的存储你的病情，你把它留在全局存储，它在适当的时候它（的状态）发送到你的阵营组件：

React 在世界上最流行的库来管理一个被称为React条件。它不仅可以帮助汇集所有数据，同时也为我们提供了一些协议来管理这些数据。

Redux 可以与银行比较：你不能去当地的分支，改变你的当前余额（“，并增加一分钟，我到这里来了几个零！”）。相反，你填写的表格，递给银行职员，谁拥有执行您的要求的权利。同样，Redux 不会让你直接改变全局状态。相反，在你沉醉变速箱 - 特殊功能正在进行操作和返回新的，更新的状态结果。
高度标准化，并在应用程序中的数据流的支持，并获得工具，如Redux  Devtools，对数据进行可视化 - 花这个额外的时间的结果。

同样，你可以参考我们的朋友韦斯·博斯和学习终极版与他的课程的帮助下，这，顺便说一句，完全免费的。
或者，你可以观看的一系列的创造者，这也是免费的egghead.io终极版视频教程。

忠诚周№5：GraphQL设计API

到目前为止，我们已经谈了很多关于客户端应用程序，但它只是成功的一半。甚至不陷入节点的生态系统的深处，但仍然需要检查的任何基于网络的应用的关键方面之一：如何将数据从服务器传送到客户端。和其他事物一样，发展的这部分随时间的变化非常快。 GraphQL（从Facebook的另一个开源项目）提供了传统的REST API一个严重的替代品。

当时，作为一个REST API使用几个REST的路线，每个可以访问已预先定义的数据（例如/ API /职位，/ API /注释等），GraphQL使用一个目的地，让用户可以请求他所需要的数据。想想看，如何对众多的活动面包店乳制品，肉和鱼分开，而是给别人你的购物清单，并把它一下子买到一切。
你需要从多个数据源的请求这一新战略是非常有用的。作为一个购物清单的例子，你现在可以从一个单一查询所有源接收数据。
在过去的一年中，GraphQL不好做了噪音，而且很多项目（如盖茨）正计划去适应它。就其本身而言GraphQL - 一个协议，但其实施是目前最好的，它可能是，阿波罗库，其中，此外，正常工作与终极版。不幸的是，仍然缺乏感受的物质GraphQL和阿波罗，但我希望，阿波罗文档将为您介绍的绳索。

React以外

我建议你在开始React，因为它是一个安全的选择，但是这绝不意味着它仅仅是一个很好的前端栈。如果你想继续发展，这是你两点建议：

Vue

Vue — 是一个相对较新的库，但其受欢迎程度以创纪录的速度增长，已经适应了大公司，尤其是在中国，这个库是在百度和阿里巴巴（中国的谷歌和亚马逊）使用。但它是PHP框架Laravel官方前端层。

相对于React，这里有Vue的一些很好的功能：
*官方支持的路线和图书馆管理状态
*性能聚焦
*降低准入门槛，通过一个基于HTML模板的使用


它仍然只有两件事情，通过它仍然存在来自Vue公司阵营分离，这样的：生态系统的规模和反应作出反应原住民。但是，如果你很快就会看到Vue公司相提并论作出反应，我不会感到惊讶。

Elm

如果Vue - 是一种经济实惠的选择，Elm- 推进。Elm- 不只是一个框架和在JavaScript的编译语言。它提供了许多优点，如提高生产率和任务的执行过程中不存在异常。
我个人没有尝试过的Elm，但对我来说是谁一直开心得不得了已经发现它为自己的朋友很推荐（如图所示的评价 - 84％的积极评价上的状态的JavaScript）。

下一步是什么？

现在，你必须已经在前端堆栈上的知识，像样的数目，希望你彻底地努力取得良好的业绩。


但是，这并不意味着一切都结束了！这只是你的方式为JavaScript生态系统的开端。也许你有兴趣和以下主题：
*在服务器上的JavaScript（节点，快速...）
*测试对JavaScript（玩笑，酶）
*组装工具（WebPACK中...）
*类型系统（打字稿，...）
*在你的JavaScript应用CSS工作（CSS模块，样式化成分......）
* JavaScript的移动应用（原生做出反应......）
* JavaScript的桌面应用（电子...）

我不能在这里囊括一切，但不要绝望！第一步总是最困难的，你知道吗？你已经做到了，阅读计划。现在你了解各条生态系统相互接近的，你的任务只是意识到你想了解更多，每月探索新技术！