cherryvenus

一份学习计划,治愈因js而心力交瘁的你

cherryvenus · 2016-12-05翻译 · 1574阅读 原文链接

一份学习计划,治愈因js而心力交瘁的你

最近,我就像大家一样无意中发现了Jose Aguinaga的一篇文章“在2016年学习js是一种怎样的体验”。

很显然,这篇文章直击要害:我看到这篇文章在Hacker News上两次登上了榜首,这同样是在r javascript上最受欢迎的文章。截至目前,他在medium上有10k的点赞(这数量比我所有的文章加起来还要多。但是谁在乎呢~)。

虽然,这并不出乎意料:很长一段时间内,我对JavaScript生态系统的理解都是模糊的。事实上,我展开State Of JavaScript投票的确切原因是想找出哪一种库更受欢迎,最终排序来自噪音的暗号。

但是,今天,我想更进一步。不同于单单抱怨事物的状态,我将会给你一个具体的,一步一步的学习计划,来帮助你攻克JavaScript的生态系统。

这是为谁而写?

如果你符合一下条件,这学习计划就是为了你而准备的:

  • 你对基础的编程概念,例如变量和方法,都已经十分了解了。
  • 你也许已经用php或者python此类语言实现过后端工作,并且可能用过一些前端框架,例如jQuery,用于一些简单技巧。
  • 现在,你想了解一些更多的更严谨的前端开发,但是在你开始之前,你已经淹没在框架和库之中了。

这里会包含

  • 一个流行的JavaScript web应用应该看上去是什么样的?
  • 为什么你不能只用jQuery。
  • 为什么React是最安全的选择。
  • 为什么你也许不需要先“学好JavaScript”。
  • 如何学习ES6语法。
  • 为什么以及如何学习Redux。
  • 和GraphQl进行交互最重工作是什么。
  • 接下来做什么?

本文提到的资源

免责声明:这篇文章会包含一些友链到Wes Bos的课程,但是推荐的资源是我个人认为极好的,不仅仅因为是友链。

如果你还想找些其他资源, Mark Erikson有一些关于React, ES6, 和Redux极好的链接。

JavaScript vs JavaScript

在我们开始之前,我们需要确保我们在谈论同一件事情。如果你google过“Learn JavaScript(学习js)” 或者“JavaScript study plan(js学习计划)”,你会找到大量学习JavaScript 语言的资源。

但是,那些实际上都是简单的部分。当你可以进一步研究,学习这语言错综复杂,你会发现真相就是,大多数的网站应用都用相对简单的代码。换句话说,80%的你需要用来写网站应用通常都包含在典型JavaScript教程书的前几章内容。

最难的问题是掌握JavaScript生态系统,和他数不清的竞争框架和库。有个好消息是,这就是本学习计划的重点。

js应用的构建模块

为了理解为什么流行的JavaScript应用都如此复杂,你首要任务就是理解他们是如何运行的。

对于初学者来说,让我们看先一个大约在2008年的传统的网站应用:

  1. 数据库将数据传输到你的后端(例如:php或者Rails应用)
  2. 后端读取数据,输出html文件
  3. 传输html到浏览器,作为Dom显示(基本上就是一张网页页面)

现在,有许多应用在客户端用JavaScript代码添加动态的元素(标签,弹出窗口,等等),但是功能上,浏览器依然可以获取到html并且从那里开始。

现在来对比下一个2016“流行”版的网页应用(又名:单页应用)

看到不同了吗?不同于传输html,服务器现在传输数据,将数据传给html的转换这一步骤现在在客户端上实现(这就是为什么你现在也需要发送告诉客户端如何执行该转换的代码)。

这些有许多启示。首先,好处:

  • 对于一张给定部分内容,传输的数据要比整张html页面要快。
  • 客户端可以马上交换内容而不用刷新浏览器窗口(因为他的名字“单页应用”)

坏处:

  • 初始的加载花费的时间太长,因为 “数据转html”代码库可能会成长地十分大。
  • 你现在需要一个地方来存储和管理在客户端上的数据,以防你想要缓存或者检查他。

以及丑恶的部分:

  • 恭喜你!你现在需要处理客户端堆栈,这可以和你服务器端堆栈一样复杂。

服务器端范围

因此,如果有这么多缺陷,那么为什么要经受这些麻烦?为什么不只支持虽然老旧但是好用的php应用?

很好,想想你在搭建一个计算器。如果用户想要知道2+2的答案,这没有必要返回到服务器端执行程序再返回结果,因为浏览器完全有这个能力。

从另一方面说,如果你在做一个纯静态的网站,例如博客,在服务器端生成最终的html文件,是极佳的做法。

事实上却是,大多数网页应用在这个范围的中间部分。问题是要知道在哪一部分。

但是关键的是范围不是连续的:你不能以纯服务器端应用开始,然后慢慢移向客户端应用。在某些点上,你会被迫停止然后重构一切,或者结束乱七八糟的无法维护的代码。

这就是为什么,“只用jQuery”是不适用于任何项目。你可以将jQuery想象成牛皮胶带。 这对于房子中小问题的修复十分好用,但是如果你持续添加更多更多的东西,那么就会变得很丑。另一方面来说,现代javascript框架更像3D打印机,打印了一个替代碎片:这更花时间,但是结果是更干净和坚固的。

换句话说,掌握现代javascript堆栈是一个赌注,无论在哪里开始,大多是网站应用可能迟早会站在正确的一边。因此,这需要更多的工作,但是不会事后追悔莫及。

Week 0: JavaScript基础

除非你是一个纯后端开发,你可能知道_一些_javascript。或者即使你不是,但如果你是一个php或java开发者,javascript的类C的语法,看上去多少有些熟悉。

但是如果javascript对你来说完全就是一个迷,不要绝望。这里有许多免费资源会带你加速掌握。比如,一个很好开始的地方是Codecademy’s JavaScript lessons.

Week 1: 从React开始吧!

了解了基础javascript语法,那么你也能理解为什么javascript app能够变得这么复杂,让我来讨论讨论细节。你应该从哪儿开始?

我坚信答案是React.

React是一个UI库,由Facebook创建并开源。换句话说,它专注于“数据变为HTML”这一步(又称:视图层(the View Layer))

现在不要误会我:我不是因为他是最好的库(因为这相当主观),而让你选择React,,只是因为是他相当不错

  • React也许不是受欢迎的库,但是它相当受欢迎。
  • React也需要不是轻的库,但是它相当轻。
  • React也需不是简单易学的库,但是它相当好学。
  • React也需不是优雅的库,但是它相当优雅

换句话说,React也许并不是在任何情况下都是最好的选择,但是我坚信他是最安全的。相信我,“当你要开始项目的时候”。这不是最佳承担技术选择风险的时间。

React会向你引入一些有用的概念,比如组件,应用程序状态,和无状态函数,这会向你证明,无论最终,你在职业生涯中用的哪个框架或者库,这都是非常有用的。

最后,React有一个强大的插件的生态系统,这和它配合的很好,这非常受欢迎意味着你可以在网上找到许多帮助,比如Stack Overflow。

我个人推荐Wes Bos上的课程React for Beginners。这就是我如何自学React的,而且这刚刚按照最新的React最佳实践进行了大幅修改。

你应该首先“学会合理使用javascript”?

如果你是一个有条理的学习者,在你做任何事之前,你也许想要先打好JavaScript的基础。

但是对于其他的人来说,这个感觉就像通过学习人体解剖学和流体动力学来学习游泳。当然,他们都在在游泳中占了很重要的角色,但是直接跳到水中会更有趣!

这里没有正确或者错误的答案,这全部取决于你学习的方式。真相是,最基础的React教程很可能就用了一小部分的javascript。无论如何,专注在你现在需要的,将其他的留到以后,这是极佳的。

大体上,这也适用于javascript的生态圈。现在,不要担心太多关于理解像webpack或者Babel这些东西的详情。实际上,React最近出了一个自己的小巧的工具command-line utility,这可以让你在不用任何搭建参数下,创建apps。

Week 2: 你的第一个React项目

假定你已经完成了一个React课程。如果你就像我一样,两件事就可以确定了:

  • 刚刚学的,你已经忘记了一半。
  • 你已经迫不及待地想用你记住的一般投入练习了。

我坚信学习一种框架或者语言的最好方式就是使用他。任何个人项目都是尝试新技术的极佳场合。

个人项目可以是任何东西,从一张单独页面到一个复杂的web应用,但是我感觉重新设计你个人网站也许是不错的且适中的尝试。外加,我知道你已经把他放在一边很多年了!

我说的有点早,不过,对于静态内容使用单页应用常常使用过度,但是React实际上有一个秘密武器: Gatsby,一个React静态网站生成器,让你“欺骗”自己,他没有任何缺陷获,能够获得React所有的好处。

这里,是为什么Gatsby是使用React开始最好的方法:

  • 一个提前配置好的webpack,意味着你已经完全了解了好处,而没有任何头疼的地方。
  • 自动路由建立在目录结构上
  • 所有的html内容都在服务器端生成,因此你可以得到最好的/
  • 静态内容意味着这没有服务器,而是在GitHub Pages超简单的托管。

State Of JavaScript网站上,我用的是Gatsby,并且不需要考虑路由,构建工具参数,或者服务器端渲染这些问题,这省了我很多的时间。

Week 3: 掌握ES6

在我探秘React的时候,我不久便发现一点,虽然我可以复制粘贴代码,但是还是有很多我不理解的地方。

特别是,我曾经对所有的 ES6引入的新特性不熟悉,比如:

  • 数组函数
  • 对象解构赋值
  • 分割符号

如果你和我在同一条船上,这可能需要一些时间,需要几天来学习ES6会比较合适。如果你喜欢初学React的课程,你可能会查一下Wes的 适用于每个人的ES 6视频.

或者你喜欢免费的课程,查看Nicolas Bevacqua’s book, Practical ES6

对于掌握ES6的最佳练习就是浏览一个老旧的代码库 (比如你才在Week2中创建的!),并将你的代码中无论哪里可以转换为ES6简短,简介的语法。

Week 4: 开始状态管理

在这一点上,你必须能够创建一个简单依靠静态内容的React前端。

但是现实的web应用不是静态的:他们需要从某处取数据,通常就是数据库。

现在,你能够传数据到你的独立组件中,但是很快就会乱了。举个例子,如果两个组件需要展示相同部分的数据?或者需要互相沟通?

这里状态管理就出现啦。不同于一点点存储你的在不同组件中的状态(换句话说,你的数据),你将它存储在一个单独的全局存储,然后通过此调度到React组件之中:

在React世界中,最受欢迎的状态管理库是Redux。Redux不仅帮助集中数据,而且这还加强一些操作数据的严格条款。

你可以把Redux想象成一个银行,你不能去当地分行并且手动改动你的所有的账户(“这里,让我加一些零”)。反之,你填了一张存款条,然后将此交给银行出纳员,授权执行这个动作。

同样,Redux同样不会让你直接修改你的全局状态。反之,你通过actionsreducers,特殊的方法,执行操作返回新数据,更新状态。

所有这些额外工作的结果就是高度格式化和可维护的数据流贯穿整个app,并且能够获得诸如Redux Devtools等工具来帮助你可视化数据:

你可以和我们的朋友Wes再次一起学习Redux通过他的Redux课程,这可是完全免费的!

或者你可以看看Redux的创建者Dan Abramov的 在egghead.io上的视频系列,也是完全免费的。

奖励 Week 5: 用GraphQL创建APIS

到目前为止,我们已经讲了许多关于客户端的,并且只是一半的旅程。就算我们还没有走进整个Node生态系统,这也是每个web应用关键的一个方面:如何将数据从服务器端取向客户端。

这变化的飞速,并不会感到惊讶,和GraphQL(这是另一个Facebook的开源项目)作为传统的REST API的一个严谨的选择。

而一个REST API暴露众多的REST路由,每一个都允许你获得预定义的数据集(也就是说/api/posts, /api/comments,等等),GraphQL暴露了一个单独的端点让客户端请求需要的数据

将这个想象成到屠夫商店,烘烤点,和杂货店的不同旅途,与给一个人一张购物清单,把它们送到三个方向的路上。

这个新策略在你需要请求不同数据源的时候,显得格外重要。就像我们的购物清单的例子,你可以现在从所有源中获取数据,仅仅通过一个请求。

GraphQL在过去几年已经开始有名气,许多项目(比如Gatsby,我们在Week2的时候用过)计划着接受它。

GraphQL本身只是一个协议,对于它最好的实现的库可能是Apollo,一个和Redux合作愉快的库。但是这仍然缺少关于GraphQ和Apollo的教学材料,不够过希望Apollo documentation可以帮助你开始。

Beyond React & Co

我推荐你从React生态开始学习,因为这是一个安全的选择,但是这绝不意味着是唯一一条路,如果你想继续探索,这里有两个推荐:

Vue

Vue是一个相对新的库,但是它以创纪录的速度增长并且已经被主流公司所接受了,尤其是在中国,像百度和阿里巴巴(就是中国的谷歌和亚马逊)。并且,这也是PHP框架Laravel的官方前端层。

相比较React,它的关键买点是:

  • 官方维护的路由和状态管理库
  • 专注于性能
  • 低学习曲线,因为他们使用html基础的模板
  • 更少的引用代码

从现状来说,React胜过Vue有两个主要的原因,分别是React的生态系统的规模以及React Native (之后会将部分的).但是如果日后看到Vue追上来,我是不会觉得惊讶的!

Elm

如果Vue是更加平易近人的选择,那么Elm就是更加先进的一个。Elm不是框架,但是他是一整个新语言编译成javascript。

这个带来了很多的好处,比如更好的性能,执行语义化版本控制,以及没有运行意外。

我个人还没有尝试过Elm,但是这被朋友们和Elm使用者热情地推荐,看上去他们使用这个十分快乐(显示了 84% 满意程度在javascript调研问卷之中)

下一步

现在你你应该对整个React前端掌握得不错了吧,并且希望你可以用它提高效率。

这并不意味着,你已经过关了!这这是你的javascript生态系统的旅途的开端。还有一些其他的主题你需要搞定的:

我不能涵盖所有的,但是不要绝望!第一步是最艰辛的,并且猜猜:你已经阅读完了学习计划了!

你现在认识了有多少不同的生态系统混合在一起,你需要将想学的列一个表格,每个月搞定一个新技术。

保持联系

这份学习计划有用不?你希望我接下来写javascript的哪一部分?给我留言或者tweet我,让我知道!

如果你希望知道我下次发文的时间,你可以注册State Of JavaScript mailing list.

相关文章