原文链接The Path to Becoming a Front End Developer in 2019

一点儿我自己的铺垫

本文更多的是侧重前端入门方法，适用于那些踌躇不前无从下手的即将入门前端的小伙伴一点小tips。

也算是我自己在临毕业之前的空档期里给自己找一点事儿做消遣吧，顺便温习一下我的English，也能看看别人在干啥在想啥，翻译的多有纰漏牵强之处，多多包涵，不吝指教。

文中一些链接可能需要梯子。

铺垫

随着2019年揭开序幕，像往常一样，新年目标再一次潮水般涌现。

减肥、更健康的饮食、拿到一个前端开发的offer。

你看，是不是不怎么多，又很简单，这有啥难的。

当然我是开玩笑的，这些巨大的生活目标从来都没有说起来那么容易。可能你认为每天都去一次健身房，中午要吃沙拉当午餐，每晚回家都敲代码进行练习没有那么难，但是请以你自身的经验来客观评估一下，把这类事情真真的每天都做一次实践起来有多不容易。

结果从来都不会如我们想象中那样来的快。日复一日，你就会发现这是多么吃力的差事。不，有时甚至到了举步维艰的地步。

然而，如果我们想在自己的目标上取得一些成效，日常努力会加快这一进度。
那么，最重要的决定就变成了去关注什么。你需要掌握哪些关键技能，又是按照怎样的顺序去解决它们。

我将尝试给你一些观点以及具体的行动计划。

学习就是拼图游戏

如果你正在玩拼图游戏，你可能不会尝试先拼好第一行，然后第二行，第三行...拼图游戏的本意并不是让人们按行来就能合适拼起来的。我给出的上面那张图除外，因为很容易就能用这种方式画出来。

更有可能的方式是你从角落和边缘开始拼起，然后再以你自己的方式进行。简言之，就是用你最确定的方式开头。

一路走来，你会发现你手里现在有一小把拼图零片适合组成整个拼图的一小部分，可能是两片，也可能是3片、5片。这时你又不知道这一部分该放在哪里了，你可能会在整个拼图游戏的后期才能找到答案。

学习web开发就是这么个道理。

你不停收集着小撮的零碎知识，其中一部分你可能每天都会用到，还有一部分几乎很少用到(但如果你掌握了，在未来的某一天就会变得非常方便，比如说某一天你的服务器在凌晨2点时崩了，你记得你用过一次grep命令，那么你就可以顺利的使用这条命令全面搜索服务器上的日志来找出问题所在)。这些全都是web开发领域的大量“拼图零片”。

拆解式学习

无论何时，你都可以将你想要学习的主题拆解成尽可能小的颗粒度，即独立的技术。

然后，每次只去研究学习一项技术，即便这样做会让你分心或者走弯路，去创建一个小型的沙箱项目专攻该技术。这样会使得学习更加迅速，且能掌握的更多。

如果说在学习web开发过程中存在窍门的话，我只能跟各位说去习得这样一个能力，那就是：看待一个问题或项目时，不再把它当做一个不可分割的个体，而是要将其作为可拆解的一组技术进行逐一攻破，然后再组合起来。

全栈React应用：掰碎了看

举个栗子，假如你想学习打造一个基于React全套技术的生产级app，来为自己或老板开发应用。

这样一个app由很多部分组成。

前端方面，大概率使用JavaScript来写，既然要用到React，那么就有可能会涉及到Redux或MobX。还有可能要对Webpack进行配置，一定会用到JSX，有可能会用到CSS或Sass，甚至是CSS-in-JS。还可能涉及到通过fetch或axios发送http请求，也有可能用到GraphQL。

后端可能会用到Node + Express或Ruby on Rails，Elixir和Phoenix等等。该后端还有可能跟数据库交互，可能是关系型数据库PostgreSQL 或 MySQL，也可能是非关系型数据库MongoDB。

所有上面提到的这些技术多到让人无法同时学习。要是你把它当做一个大项目，当你准备去学习它时，你就会发现它在你脑袋里就是一团乱麻，更难的是记住每个知识点的走向，不禁会怀疑我是谁，我在哪，我为啥要学前端。即使你仅仅试着把前端部分分离出来，这也是可观的工作量。

所以，问问你自己，我能根据技术来对其进行分割吗？我能每次只学习其中一项技术吗？

分别学习其中的每一项技能

你能单独学习JavaScript吗？当然能，这里就有超棒的You Don’t Know JS系列(免费在线)，以及其他很多资源可以使用。

你能单独学习React吗？(作者推荐了自己的书)，以我个人的学习经历来看，我更倾向于react官网和reactjs小书。

JSX看起来更像HTML，因此在学习React+JSX之前先搞懂HTML的使用和原理相对来说更容易一点。

你可以在根本不接触CSS的情况下写出一个看起来不甚美观的app，所以你绝对可以在没掌握CSS的情况下学习React，反之亦然。同理，类似styled-components这种CSS-in-JS类库也可以在掌握CSS之后再去深入也来得及。

Redux是React的一个插件，当你对React有一些了解之后，就可以去看看redux是如何起作用的了。

如果你觉得Redux有点难，那就先去看看React内置的React Context API，它同样解决了很多Redux能解决的问题，我也写了相关教程，React Context for State Management。

Webpack配置与你想打造的React app是相互独立的，在搞清楚Webpack之前你完全可以使用Create React App进行开发。

先不管你的外部数据是否来自REST API 或 GraphQL，这是另一回事儿了。你的目的是搞清楚React的运行原理，完全可以在最开始使用静态数据来代替，打开浏览器的DevTools，进入Network标签，选择一个http请求，查看response中的数据，把接口响应的JSON数据复制出来存到变量中。如何异步获取数据可以后期慢慢去学。

后端部分可同理进行拆解。

要始终对那些被认为必须作为整体进行学习或构建的项目保持怀疑的态度。去看看是否能对其进行拆解，剥离出每一个单独的部分或层级。去学习每一个你当前能掌握的部分。即使做到这种程度有困难，仍然要记得：剥去尽可能多的不必要的东西。

一个针对Web开发的学习计划

说了那么多，但是站在岸上可学不会游泳。

我想在这里给出一点尽可能线性化的建议。同时也要时刻保持“及时学习”的好习惯。

学到新东西就马上动手去练习，阅读博客、观看教程当然很赞，但缺少实践的话，你的脑袋瓜可不一定能长久的记住它。如果没有相关练习提供那就自己动手设计一个，我有一些设计实践项目想法可供你参考。

对于本文提到的每一个你不了解的技术、术语，学到刚好能解决你的问题就好，然后再继续深入下去。

你不需要对每一个HTML元素、CSS选择器、JS特性或者命令行工具都了如指掌，不然要Google和Stack Overflow这种网站干啥？即使我们这些从业多年的老鸟突然学到了某个非常基础的知识点不禁也会惊讶一翻。(就在此时，我才知道有一个HTML元素叫<dialog/>，我的天)。

掌握一些命令行

很多时候，入门某个项目的第一步就是从GitHub代码仓库中把它克隆到本地，或者是使用create-react-app命令来创建一个新项目。然后你需要运行npm或者yarn来安装依赖，同时能引导你在文件系统上创建你的项目。

了解一点命令行的知识可以避免让你觉得你是在一个魔法盒里敲击一些神奇的命令。

你无需对此感到抓狂，但是理解基本的引导文件系统、展示文件等等类似的操作是一件比较合算的事情。推荐看看Learn Enough Command Line to Be Dangerous和The Shell Introduction I Wish I Had。

使用Git做版本控制

设想一个场景，你知道你的代码还有一点小小的问题，但是现在也能正常运行，然后你对其中一处代码进行的细微改动，不知道啥原因就崩溃了。

你撤销了刚才的改动，程序还是没能启动，咋回事？？？

这就是真正意义上的最坏情况。

版本控制解决了这个问题，我比较遗憾没能更早学到这项技术(我希望人们能把版本控制技术当做好事而不是苦差事，因为好处真的很大，Git的出现使其变得非常容易)。

我有一篇介绍Git的文章，The Git Parable，是以故事的形式来解释Git的运行原理的。文章值得一读，我打赌即使你了解一些Git命令，也会从中学到一些新东西。

Git仅仅是众多版本控制系统中的一员，但它在当前这一领域无人能及，由GitHub推广普及。

有趣的是，Git和GitHub不是同一个东西，GitHub提供对Git仓库的托管服务，而Git早在GitHub出现前的很长时间就已经存在了，并且能独立运行使用。你甚至可以在未连接网络的情况下使用Git来管理本地代码，这也是Git为啥??的一个因素之一。

因此一旦你学到了一些命令行的相关知识，抓紧安装Git吧，这样不论何时你想创建一个项目目录，使用这几条命令即可：

git init .
git add .
git commit -m "Initial commit"
复制代码

每次你的代码处于正常运行状态、或在提交可能引起程序崩溃的改动之前，提交你的代码：

git add .
git commit -m "Saving this before I break it."
复制代码

每一次提交都相当于一个检查站。你可以及时跳回到任何之前提交的版本(回到你代码正常工作时的版本)。有一个小问题就是，这些全都是存储在你计算机本地的，假如你的电脑被一场大火付之一炬，那就啥都没有了。所以，GitHub作用就体现出来了(换个地方进行备份)。

要是你想学更多Git的相关知识，比如如何拿到之前的提交版本来恢复你能正常运行的代码，或向GitHub推送代码等等，参考Learn Enough Git to Be Dangerous教程。教程不是很长，而且学到最后你还能做出一个部署在Github Pages上的网页。这又是一个沙盒...

Web语言

构建Web应用时，你能掌握HTML、CSS、JavaScript差不多就够了。

你可以在没有任何CSS和JS的情况下写HTML，但是在没有HTML的情况下，你就不能用CSS做太多事情了。因此在学习CSS前要先去学点儿HTML。

JavaScript的作用可就多了，它可以添加到HTML文档上，可以用来写互动app...甚至可以用到浏览器之外的nodejs上来做很多有趣的事情，比如开发服务端，制作命令行app，控制物联网设备，或者是做机器学习。

哪个看起来更有趣一点儿？在浏览器中实现一些东西？还是说在Node环境下单独做一些练习来学习js？这就要看你的个人目标和喜好了。

如果你想往前端开发方向发展，我会建议你最开始先通过从浏览器中写JS来进行学习，从MDN开始，去他的React、Webpack以及其他等等等等当前阶段我无需考虑的东西。

记住，这里所说的最重要的一点就是不必完全掌握每一项技能，只要你觉得差不多了，且可以应付下一项要学习的技能就够了。

我很有可能会因为说了下面的话而受到别人的指责，我认为你在学习类似React的技术前并不一定需要掌握普通的JS和DOM，当然了，这是建立在你仅仅只是想使用框架的情况下。我确实认为针对普通JS和DOM进行一些小练习和实践更为有益，知道他们的存在，当你需要用到它们的时候你知道去哪里查找他们的使用细节(例如MDN)。

学着去Debug

debug是一个可以习得的技能。幸运的是，如果你像我或其他大多数刚入门的人一样，你会遇到很多程序错误并去解决。

当然了，最容易的方法就是把错误信息复制粘贴到Google中去。

虽然有些时候Google是帮不上忙的，也许这个错误只在你的代码中出现过，比如说语法错误。

还有一些情况就是Google搜索出了一些不相关的结果给你，这就意味着有很大可能是你犯的错误很简单，甚至有些犯傻。比如说“我忘记保存文件了”或者“我忘了重启服务”。

有一次，我在Eclipse的某些版本中遇到了编辑器错误，其Save函数不起作用。

我改动了文件，标题栏显示的是AbstractFactoryObserverPatternImpl.java *(星号代表文件有改动)，我点过save，也几乎敲碎了Ctrl+S键，但是星号一直都在。我认为可能是个UI bug，所以我使用vim打开了文件，可以确认的是，文件确实没有改动的迹象。

这件事告诉我们 1）荒唐，文本编辑器基本上一共就俩功能，编辑文本和保存文本，你还有一个功能不好使... 2）警钟长鸣，对任何事物保持怀疑的态度，即便是最不可能的因素。

所以，如果你下次遇到了奇怪的问题，拆解问题，多方面考虑，列出每个假设进行检查，对每一个可能导致失败的原因进行头脑风暴。

举个栗子，你修改了代码但是啥都没发生，你可能会从以下几方面考虑：

• 你修改过的那段代码到底有没有运行？能否添加一个console.log函数把它打印出来看看？
• 自动构建功能是否运行了？(如果是手动构建的，那你运行过吗？)
• 如果代码是运行中的服务器的一部分，有没有重启过该服务？
• 你启动的服务是你要改的服务吗？
• 你改动的文件是否正确？
• 你改动的项目是你当前正在测试的项目吗？(可能你对项目代码进行过复制，文件名是myproject-7，但是你的编辑器打开的确实myproject-6.叮，这又提醒了我们Git的重要性哦)
• 文件真的改动过吗？你编辑器的保存函数还好用吗？

在你问过自己上述所有问题后，你检查了每一项，排除了所有可能的因素但还是没解决问题，就是时候重启一些东西了，不必再去求助任何东西或任何人了。

还记得我先前提到的有关学习web开发就像是在构建一簇相互联系的技能，debug的时间就是你用来借鉴学习所有技能的时间。你对事物的运作方式理解的越好，包括你app中不同部分之间的相互联系，你就可以在问题出现时又快又好的把问题解决。

你将开始以更高的分辨率看到问题和解决方案。不会再出现“程序挂了”这种泛泛之词，而是“服务器在准备部分数据时抛出了异常”，或者是“JS代码未能成功解析JSON导致程序停止运行”

学习Web工作原理

一般来说，理解web运行原理会对你的web开发之路大有裨益。你头脑中存储的巨大图景在你开发和debug时都有巨大帮助。

去学习当你在浏览器中输入URL并敲击回车后发生了什么，其实在你看不见的地方还有很多环节在协同，其中的大多数也都会时不时的出点错，要是你了解这个过程中的每一步，你就能诊断是服务器挂了，还是DNS入口错了，或者是服务器没有问题，但是web服务出现问题，又或者是adblocker广告屏蔽插件阻止的你的图标字体加载等等其他所有可能发生的怪事。

开发者工具在学习web工作原理的过程中起到很大的帮助。打开你浏览器的DevTools，查看network标签，刷新页面，从所有发出的请求中揪出发送失败的请求，点进去看看它返回的数据。顺便提一下，这对于发现和使用那些没有文档的接口来说简直太好用了。

学习一个框架

React是当前很流行的框架，得益于海量的在线优秀学习资源，眼下的就业市场也对React开发者很友好。

官方的React教程也特别适合入门，教程写的非常友好，从安装设置到构建一个可用的React app。我也自己整理了一个免费的5天React教程用于学习React基础，如果你想更深入的学习React，可以参考我写的Pure React，里面有很多练习和示例来巩固加深React。

要是你试过React之后发现不喜欢用的话，尝试一下Vue.js吧。Vue是替代React的一种选择，同样受到很多开发者的喜爱。

今天就开始/继续吧

如果学习web开发是你今年的一个目标，我建议你从现在开始就行动起来。光去看、去幻想、去希望不会让你离目标越来越近，伸出你们的双手，在键盘上敲下的代码才是正道。

即使本文不可能覆盖到学习web开发的方方面面，也不能提供给适用于各有不同起点开发者的学习路径建议，我也希望本文给出的指南可以给你在学习web开发的旅程中一些方向。如果本文对你有所帮助，或者你已经做了一些能帮助你前进的特别的技巧，可以留下你的评论。