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

一點(diǎn)兒我自己的鋪墊

本文更多的是側(cè)重前端入門方法，適用于那些躊躇不前無從下手的即將入門前端的小伙伴一點(diǎn)小tips。

也算是我自己在臨畢業(yè)之前的空檔期里給自己找一點(diǎn)事兒做消遣吧，順便溫習(xí)一下我的English，也能看看別人在干啥在想啥，翻譯的多有紕漏牽強(qiáng)之處，多多包涵，不吝指教。

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

鋪墊

隨著2019年揭開序幕，像往常一樣，新年目標(biāo)再一次潮水般涌現(xiàn)。

減肥、更健康的飲食、拿到一個前端開發(fā)的offer。

你看，是不是不怎么多，又很簡單，這有啥難的。

當(dāng)然我是開玩笑的，這些巨大的生活目標(biāo)從來都沒有說起來那么容易。可能你認(rèn)為每天都去一次健身房，中午要吃沙拉當(dāng)午餐，每晚回家都敲代碼進(jìn)行練習(xí)沒有那么難，但是請以你自身的經(jīng)驗(yàn)來客觀評估一下，把這類事情真真的每天都做一次實(shí)踐起來有多不容易。

結(jié)果從來都不會如我們想象中那樣來的快。日復(fù)一日，你就會發(fā)現(xiàn)這是多么吃力的差事。不，有時甚至到了舉步維艱的地步。

然而，如果我們想在自己的目標(biāo)上取得一些成效，日常努力會加快這一進(jìn)度。
那么，最重要的決定就變成了去關(guān)注什么。你需要掌握哪些關(guān)鍵技能，又是按照怎樣的順序去解決它們。

我將嘗試給你一些觀點(diǎn)以及具體的行動計劃。

學(xué)習(xí)就是拼圖游戲

如果你正在玩拼圖游戲，你可能不會嘗試先拼好第一行，然后第二行，第三行...拼圖游戲的本意并不是讓人們按行來就能合適拼起來的。我給出的上面那張圖除外，因?yàn)楹苋菀拙湍苡眠@種方式畫出來。

更有可能的方式是你從角落和邊緣開始拼起，然后再以你自己的方式進(jìn)行。簡言之，就是用你最確定的方式開頭。

一路走來，你會發(fā)現(xiàn)你手里現(xiàn)在有一小把拼圖零片適合組成整個拼圖的一小部分，可能是兩片，也可能是3片、5片。這時你又不知道這一部分該放在哪里了，你可能會在整個拼圖游戲的后期才能找到答案。

學(xué)習(xí)web開發(fā)就是這么個道理。

你不停收集著小撮的零碎知識，其中一部分你可能每天都會用到，還有一部分幾乎很少用到(但如果你掌握了，在未來的某一天就會變得非常方便，比如說某一天你的服務(wù)器在凌晨2點(diǎn)時崩了，你記得你用過一次grep命令，那么你就可以順利的使用這條命令全面搜索服務(wù)器上的日志來找出問題所在)。這些全都是web開發(fā)領(lǐng)域的大量“拼圖零片”。

拆解式學(xué)習(xí)

無論何時，你都可以將你想要學(xué)習(xí)的主題拆解成盡可能小的顆粒度，即獨(dú)立的技術(shù)。

然后，每次只去研究學(xué)習(xí)一項技術(shù)，即便這樣做會讓你分心或者走彎路，去創(chuàng)建一個小型的沙箱項目專攻該技術(shù)。這樣會使得學(xué)習(xí)更加迅速，且能掌握的更多。

如果說在學(xué)習(xí)web開發(fā)過程中存在竅門的話，我只能跟各位說去習(xí)得這樣一個能力，那就是：看待一個問題或項目時，不再把它當(dāng)做一個不可分割的個體，而是要將其作為可拆解的一組技術(shù)進(jìn)行逐一攻破，然后再組合起來。

全棧React應(yīng)用：掰碎了看

舉個栗子，假如你想學(xué)習(xí)打造一個基于React全套技術(shù)的生產(chǎn)級app，來為自己或老板開發(fā)應(yīng)用。

這樣一個app由很多部分組成。

前端方面，大概率使用JavaScript來寫，既然要用到React，那么就有可能會涉及到Redux或MobX。還有可能要對Webpack進(jìn)行配置，一定會用到JSX，有可能會用到CSS或Sass，甚至是CSS-in-JS。還可能涉及到通過fetch或axios發(fā)送http請求，也有可能用到GraphQL。

后端可能會用到Node + Express或Ruby on Rails，Elixir和Phoenix等等。該后端還有可能跟數(shù)據(jù)庫交互，可能是關(guān)系型數(shù)據(jù)庫PostgreSQL 或 MySQL，也可能是非關(guān)系型數(shù)據(jù)庫MongoDB。

所有上面提到的這些技術(shù)多到讓人無法同時學(xué)習(xí)。要是你把它當(dāng)做一個大項目，當(dāng)你準(zhǔn)備去學(xué)習(xí)它時，你就會發(fā)現(xiàn)它在你腦袋里就是一團(tuán)亂麻，更難的是記住每個知識點(diǎn)的走向，不禁會懷疑我是誰，我在哪，我為啥要學(xué)前端。即使你僅僅試著把前端部分分離出來，這也是可觀的工作量。

所以，問問你自己，我能根據(jù)技術(shù)來對其進(jìn)行分割嗎？我能每次只學(xué)習(xí)其中一項技術(shù)嗎？

分別學(xué)習(xí)其中的每一項技能

你能單獨(dú)學(xué)習(xí)JavaScript嗎？當(dāng)然能，這里就有超棒的You Don’t Know JS系列(免費(fèi)在線)，以及其他很多資源可以使用。

你能單獨(dú)學(xué)習(xí)React嗎？(作者推薦了自己的書)，以我個人的學(xué)習(xí)經(jīng)歷來看，我更傾向于react官網(wǎng)和reactjs小書。

JSX看起來更像HTML，因此在學(xué)習(xí)React+JSX之前先搞懂HTML的使用和原理相對來說更容易一點(diǎn)。

你可以在根本不接觸CSS的情況下寫出一個看起來不甚美觀的app，所以你絕對可以在沒掌握CSS的情況下學(xué)習(xí)React，反之亦然。同理，類似styled-components這種CSS-in-JS類庫也可以在掌握CSS之后再去深入也來得及。

Redux是React的一個插件，當(dāng)你對React有一些了解之后，就可以去看看redux是如何起作用的了。

如果你覺得Redux有點(diǎn)難，那就先去看看React內(nèi)置的React Context API，它同樣解決了很多Redux能解決的問題，我也寫了相關(guān)教程，React Context for State Management。

Webpack配置與你想打造的React app是相互獨(dú)立的，在搞清楚Webpack之前你完全可以使用Create React App進(jìn)行開發(fā)。

先不管你的外部數(shù)據(jù)是否來自REST API 或 GraphQL，這是另一回事兒了。你的目的是搞清楚React的運(yùn)行原理，完全可以在最開始使用靜態(tài)數(shù)據(jù)來代替，打開瀏覽器的DevTools，進(jìn)入Network標(biāo)簽，選擇一個http請求，查看response中的數(shù)據(jù)，把接口響應(yīng)的JSON數(shù)據(jù)復(fù)制出來存到變量中。如何異步獲取數(shù)據(jù)可以后期慢慢去學(xué)。

后端部分可同理進(jìn)行拆解。

要始終對那些被認(rèn)為必須作為整體進(jìn)行學(xué)習(xí)或構(gòu)建的項目保持懷疑的態(tài)度。去看看是否能對其進(jìn)行拆解，剝離出每一個單獨(dú)的部分或?qū)蛹墶ＨW(xué)習(xí)每一個你當(dāng)前能掌握的部分。即使做到這種程度有困難，仍然要記得：剝?nèi)ケM可能多的不必要的東西。

一個針對Web開發(fā)的學(xué)習(xí)計劃

說了那么多，但是站在岸上可學(xué)不會游泳。

我想在這里給出一點(diǎn)盡可能線性化的建議。同時也要時刻保持“及時學(xué)習(xí)”的好習(xí)慣。

學(xué)到新東西就馬上動手去練習(xí)，閱讀博客、觀看教程當(dāng)然很贊，但缺少實(shí)踐的話，你的腦袋瓜可不一定能長久的記住它。如果沒有相關(guān)練習(xí)提供那就自己動手設(shè)計一個，我有一些設(shè)計實(shí)踐項目想法可供你參考。

對于本文提到的每一個你不了解的技術(shù)、術(shù)語，學(xué)到剛好能解決你的問題就好，然后再繼續(xù)深入下去。

你不需要對每一個HTML元素、CSS選擇器、JS特性或者命令行工具都了如指掌，不然要Google和Stack Overflow這種網(wǎng)站干啥？即使我們這些從業(yè)多年的老鳥突然學(xué)到了某個非常基礎(chǔ)的知識點(diǎn)不禁也會驚訝一翻。(就在此時，我才知道有一個HTML元素叫<dialog/>，我的天)。

掌握一些命令行

很多時候，入門某個項目的第一步就是從GitHub代碼倉庫中把它克隆到本地，或者是使用create-react-app命令來創(chuàng)建一個新項目。然后你需要運(yùn)行npm或者yarn來安裝依賴，同時能引導(dǎo)你在文件系統(tǒng)上創(chuàng)建你的項目。

了解一點(diǎn)命令行的知識可以避免讓你覺得你是在一個魔法盒里敲擊一些神奇的命令。

你無需對此感到抓狂，但是理解基本的引導(dǎo)文件系統(tǒng)、展示文件等等類似的操作是一件比較合算的事情。推薦看看Learn Enough Command Line to Be Dangerous和The Shell Introduction I Wish I Had。

使用Git做版本控制

設(shè)想一個場景，你知道你的代碼還有一點(diǎn)小小的問題，但是現(xiàn)在也能正常運(yùn)行，然后你對其中一處代碼進(jìn)行的細(xì)微改動，不知道啥原因就崩潰了。

你撤銷了剛才的改動，程序還是沒能啟動，咋回事？？？

這就是真正意義上的最壞情況。

版本控制解決了這個問題，我比較遺憾沒能更早學(xué)到這項技術(shù)(我希望人們能把版本控制技術(shù)當(dāng)做好事而不是苦差事，因?yàn)楹锰幷娴?strong>很大，Git的出現(xiàn)使其變得非常容易)。

我有一篇介紹Git的文章，The Git Parable，是以故事的形式來解釋Git的運(yùn)行原理的。文章值得一讀，我打賭即使你了解一些Git命令，也會從中學(xué)到一些新東西。

Git僅僅是眾多版本控制系統(tǒng)中的一員，但它在當(dāng)前這一領(lǐng)域無人能及，由GitHub推廣普及。

有趣的是，Git和GitHub不是同一個東西，GitHub提供對Git倉庫的托管服務(wù)，而Git早在GitHub出現(xiàn)前的很長時間就已經(jīng)存在了，并且能獨(dú)立運(yùn)行使用。你甚至可以在未連接網(wǎng)絡(luò)的情況下使用Git來管理本地代碼，這也是Git為啥??的一個因素之一。

因此一旦你學(xué)到了一些命令行的相關(guān)知識，抓緊安裝Git吧，這樣不論何時你想創(chuàng)建一個項目目錄，使用這幾條命令即可：

git init . git add . git commit -m "Initial commit" 復(fù)制代碼

每次你的代碼處于正常運(yùn)行狀態(tài)、或在提交可能引起程序崩潰的改動之前，提交你的代碼：

git add . git commit -m "Saving this before I break it." 復(fù)制代碼

每一次提交都相當(dāng)于一個檢查站。你可以及時跳回到任何之前提交的版本(回到你代碼正常工作時的版本)。有一個小問題就是，這些全都是存儲在你計算機(jī)本地的，假如你的電腦被一場大火付之一炬，那就啥都沒有了。所以，GitHub作用就體現(xiàn)出來了(換個地方進(jìn)行備份)。

要是你想學(xué)更多Git的相關(guān)知識，比如如何拿到之前的提交版本來恢復(fù)你能正常運(yùn)行的代碼，或向GitHub推送代碼等等，參考Learn Enough Git to Be Dangerous教程。教程不是很長，而且學(xué)到最后你還能做出一個部署在Github Pages上的網(wǎng)頁。這又是一個沙盒...

Web語言

構(gòu)建Web應(yīng)用時，你能掌握HTML、CSS、JavaScript差不多就夠了。

你可以在沒有任何CSS和JS的情況下寫HTML，但是在沒有HTML的情況下，你就不能用CSS做太多事情了。因此在學(xué)習(xí)CSS前要先去學(xué)點(diǎn)兒HTML。

JavaScript的作用可就多了，它可以添加到HTML文檔上，可以用來寫互動app...甚至可以用到瀏覽器之外的nodejs上來做很多有趣的事情，比如開發(fā)服務(wù)端，制作命令行app，控制物聯(lián)網(wǎng)設(shè)備，或者是做機(jī)器學(xué)習(xí)。

哪個看起來更有趣一點(diǎn)兒？在瀏覽器中實(shí)現(xiàn)一些東西？還是說在Node環(huán)境下單獨(dú)做一些練習(xí)來學(xué)習(xí)js？這就要看你的個人目標(biāo)和喜好了。

如果你想往前端開發(fā)方向發(fā)展，我會建議你最開始先通過從瀏覽器中寫JS來進(jìn)行學(xué)習(xí)，從MDN開始，去他的React、Webpack以及其他等等等等當(dāng)前階段我無需考慮的東西。

記住，這里所說的最重要的一點(diǎn)就是不必完全掌握每一項技能，只要你覺得差不多了，且可以應(yīng)付下一項要學(xué)習(xí)的技能就夠了。

我很有可能會因?yàn)檎f了下面的話而受到別人的指責(zé)，我認(rèn)為你在學(xué)習(xí)類似React的技術(shù)前并不一定需要掌握普通的JS和DOM，當(dāng)然了，這是建立在你僅僅只是想使用框架的情況下。我確實(shí)認(rèn)為針對普通JS和DOM進(jìn)行一些小練習(xí)和實(shí)踐更為有益，知道他們的存在，當(dāng)你需要用到它們的時候你知道去哪里查找他們的使用細(xì)節(jié)(例如MDN)。

學(xué)著去Debug

debug是一個可以習(xí)得的技能。幸運(yùn)的是，如果你像我或其他大多數(shù)剛?cè)腴T的人一樣，你會遇到很多程序錯誤并去解決。

當(dāng)然了，最容易的方法就是把錯誤信息復(fù)制粘貼到Google中去。

雖然有些時候Google是幫不上忙的，也許這個錯誤只在你的代碼中出現(xiàn)過，比如說語法錯誤。

還有一些情況就是Google搜索出了一些不相關(guān)的結(jié)果給你，這就意味著有很大可能是你犯的錯誤很簡單，甚至有些犯傻。比如說“我忘記保存文件了”或者“我忘了重啟服務(wù)”。

有一次，我在Eclipse的某些版本中遇到了編輯器錯誤，其Save函數(shù)不起作用。

我改動了文件，標(biāo)題欄顯示的是AbstractFactoryObserverPatternImpl.java *(星號代表文件有改動)，我點(diǎn)過save，也幾乎敲碎了Ctrl+S鍵，但是星號一直都在。我認(rèn)為可能是個UI bug，所以我使用vim打開了文件，可以確認(rèn)的是，文件確實(shí)沒有改動的跡象。

這件事告訴我們 1）荒唐，文本編輯器基本上一共就倆功能，編輯文本和保存文本，你還有一個功能不好使... 2）警鐘長鳴，對任何事物保持懷疑的態(tài)度，即便是最不可能的因素。

所以，如果你下次遇到了奇怪的問題，拆解問題，多方面考慮，列出每個假設(shè)進(jìn)行檢查，對每一個可能導(dǎo)致失敗的原因進(jìn)行頭腦風(fēng)暴。

舉個栗子，你修改了代碼但是啥都沒發(fā)生，你可能會從以下幾方面考慮：

• 你修改過的那段代碼到底有沒有運(yùn)行？能否添加一個console.log函數(shù)把它打印出來看看？
• 自動構(gòu)建功能是否運(yùn)行了？(如果是手動構(gòu)建的，那你運(yùn)行過嗎？)
• 如果代碼是運(yùn)行中的服務(wù)器的一部分，有沒有重啟過該服務(wù)？
• 你啟動的服務(wù)是你要改的服務(wù)嗎？
• 你改動的文件是否正確？
• 你改動的項目是你當(dāng)前正在測試的項目嗎？(可能你對項目代碼進(jìn)行過復(fù)制，文件名是myproject-7，但是你的編輯器打開的確實(shí)myproject-6.叮，這又提醒了我們Git的重要性哦)
• 文件真的改動過嗎？你編輯器的保存函數(shù)還好用嗎？

在你問過自己上述所有問題后，你檢查了每一項，排除了所有可能的因素但還是沒解決問題，就是時候重啟一些東西了，不必再去求助任何東西或任何人了。

還記得我先前提到的有關(guān)學(xué)習(xí)web開發(fā)就像是在構(gòu)建一簇相互聯(lián)系的技能，debug的時間就是你用來借鑒學(xué)習(xí)所有技能的時間。你對事物的運(yùn)作方式理解的越好，包括你app中不同部分之間的相互聯(lián)系，你就可以在問題出現(xiàn)時又快又好的把問題解決。

你將開始以更高的分辨率看到問題和解決方案。不會再出現(xiàn)“程序掛了”這種泛泛之詞，而是“服務(wù)器在準(zhǔn)備部分?jǐn)?shù)據(jù)時拋出了異常”，或者是“JS代碼未能成功解析JSON導(dǎo)致程序停止運(yùn)行”

學(xué)習(xí)Web工作原理

一般來說，理解web運(yùn)行原理會對你的web開發(fā)之路大有裨益。你頭腦中存儲的巨大圖景在你開發(fā)和debug時都有巨大幫助。

去學(xué)習(xí)當(dāng)你在瀏覽器中輸入URL并敲擊回車后發(fā)生了什么，其實(shí)在你看不見的地方還有很多環(huán)節(jié)在協(xié)同，其中的大多數(shù)也都會時不時的出點(diǎn)錯，要是你了解這個過程中的每一步，你就能診斷是服務(wù)器掛了，還是DNS入口錯了，或者是服務(wù)器沒有問題，但是web服務(wù)出現(xiàn)問題，又或者是adblocker廣告屏蔽插件阻止的你的圖標(biāo)字體加載等等其他所有可能發(fā)生的怪事。

開發(fā)者工具在學(xué)習(xí)web工作原理的過程中起到很大的幫助。打開你瀏覽器的DevTools，查看network標(biāo)簽，刷新頁面，從所有發(fā)出的請求中揪出發(fā)送失敗的請求，點(diǎn)進(jìn)去看看它返回的數(shù)據(jù)。順便提一下，這對于發(fā)現(xiàn)和使用那些沒有文檔的接口來說簡直太好用了。

學(xué)習(xí)一個框架

React是當(dāng)前很流行的框架，得益于海量的在線優(yōu)秀學(xué)習(xí)資源，眼下的就業(yè)市場也對React開發(fā)者很友好。

官方的React教程也特別適合入門，教程寫的非常友好，從安裝設(shè)置到構(gòu)建一個可用的React app。我也自己整理了一個免費(fèi)的5天React教程用于學(xué)習(xí)React基礎(chǔ)，如果你想更深入的學(xué)習(xí)React，可以參考我寫的Pure React，里面有很多練習(xí)和示例來鞏固加深React。

要是你試過React之后發(fā)現(xiàn)不喜歡用的話，嘗試一下Vue.js吧。Vue是替代React的一種選擇，同樣受到很多開發(fā)者的喜愛。

今天就開始/繼續(xù)吧

如果學(xué)習(xí)web開發(fā)是你今年的一個目標(biāo)，我建議你從現(xiàn)在開始就行動起來。光去看、去幻想、去希望不會讓你離目標(biāo)越來越近，伸出你們的雙手，在鍵盤上敲下的代碼才是正道。

即使本文不可能覆蓋到學(xué)習(xí)web開發(fā)的方方面面，也不能提供給適用于各有不同起點(diǎn)開發(fā)者的學(xué)習(xí)路徑建議，我也希望本文給出的指南可以給你在學(xué)習(xí)web開發(fā)的旅程中一些方向。如果本文對你有所幫助，或者你已經(jīng)做了一些能幫助你前進(jìn)的特別的技巧，可以留下你的評論。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。