原文鏈接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開發的旅程中一些方向。如果本文對你有所幫助，或者你已經做了一些能幫助你前進的特別的技巧，可以留下你的評論。

總結

以上是生活随笔為你收集整理的[译]2019年修炼前端开发者之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。