[譯] 寫給“老派” Web 開發者的“現代” JavaScript 指南

• 原文地址：Modern JavaScript for Ancient Web Developers
• 原文作者：Gina Trapani
• 譯文出自：掘金翻譯計劃
• 譯者：sun
• 校對者：xilihuasi、 Reid

用 JavaScript 學習 JavaScript。圖片來自 learnyounode。

有這樣一種守舊的後端 web 開發者，他們很久以前就掌握了諸如 Perl 、Python、PHP 或 Java Server Pages 一類的東西，甚至還掌握了 Rails 或者 Django。他們使用巨大的關係型資料庫構建 JSON API 服務，呃甚至是 XML。

他是個後端開發者， 因此對他而言，JavaScript 一直只是個可以新增一些前端花招，使網頁上的東西變色的有趣小玩具。如果說 JavaScript 真的很有用，那也不過是給表單新增驗證，以防止錯誤的資料進入資料庫。八年前 jQuery 讓這個人十分震驚。JavaScript 本身依然是可以被容忍但從未被接納的語言。

隨後 JavaScript 及其現代框架侵蝕了後端、前端和他們之間的一切，對於 JavaScript 開發者而言，2017年正是重新成為一個全新 web 開發者的時刻。

Hi.我是一個正在學習現代 JavaScript 的“老派” web 開發者。我才剛剛起步玩得也還算盡興，當然也踩了一些坑。有一些現代 JavaScript 的概念我希望我能在開始學習之前就融會貫通。

在舊程式語言的慣性思維模式之上學習一個新的生態系統，我在心態和期望方面得做下面一些改變。

轉移目標 (.jS)

現代 JS 的特點就是朝氣蓬勃和發展迅速，所以很容易就選擇了過時的框架、模板引擎、構建工具、 教程或者已經不是最佳實踐的技術。（如果真有一個被廣泛接受的最佳實踐的概念的話）

這種情況下，就有必要向你身邊的 JavaScript 工程師朋友伸手求助了，和他們聊一聊你的技術路線。我很榮幸在 Postlight 得到了工程師朋友(特別是 Jeremy Mack)的精湛指導，感謝他們容忍我無窮無盡的問題。

我要說的是，學習現代的 JavaScript 需要人為干預。事物還在不斷髮展變化，各種教程尚未成熟和定型，所謂最佳實踐也未形成正式規範。如果你身邊沒有大牛，那麼至少也得檢查 Medium 上文章或教程的日期，或 GitHub 倉庫的最近一次提交時間。如果時間超過了一年，基本上可以確定已經過時。

新的問題，而不是已經確定的解決方案

走類似這樣的路線：當你在學習現代 JavaScript 時，你遇到的問題的解決方案還在漸漸得到解決，這正是一個好機會。事實上，很可能僅僅差一次 code review，你在使用這個包時就可以修復問題。

當你在使用一種像 PHP 這樣的古老的語言的時候，你可以 Google 一個提問或者問題，幾乎百分之百能找到一個 5 年前的 Stack Overflow 回答來解決它，或者你能在（詳盡的、大量評論的、無與倫比的）文件裡找到整個描述。

現代 JavaScript 就並非如此了。 我曾經徜徉在 GitHub issues 和原始碼的時候不止一次找到的都是一些過時的文件。剖析 GitHub 版本庫是學習和使用各種包的一部分，而且對於我這樣的“老派人”，差之毫釐的學習總是令人迷惑。

工具過載

在 2017 年學習 JavaScript 還有另一個不一樣的地方：建立程式花費的時間感覺和寫應用的時間一樣多。需要以“正確的方式”去做的工具、外掛、軟體包和依賴以及編輯器配置和構建配置所需的絕對數量足以使你在啟動專案之前望而卻步。

不要因此止步不前。我不得不放手去做，從起步到正確配置，允許自己的不完美甚至一些業餘，只為舒適地使用自己的工具。（我不會告訴你我曾用 nodemon 做程式碼檢查）隨後我會找到更好的方法並且在每個新專案中納入進來。

這方面 JS 還有大量的工作要做。現代 JavaScript 領域依然是不斷變化的，但我一個現代 JS 工程師親友告訴我，這份來自 Jonathan Verrecchia 的教程是目前構建一個當代 JavaScript 棧的不二之選。對，就是現在。

教程 / 專案 / 捨棄 / 重複

無論學習什麼語言都要經歷寫程式碼 - 捨棄 - 寫更多程式碼這個過程。我的現代 JavaScript 學習經歷已經成為一個個教程組成的階梯，然後做一個小巧簡單的專案，期間總結出現的疑問和困惑列出清單。然後和我的同事碰頭以獲得答案和解釋，然後刷更多的教程，然後做一個稍微大一些的專案，更多的問題，再碰頭，如此重複。

這是迄今為止我在這個過程中經歷過的一些研討會和教程的不完整列表。

• HOW-TO-NPM —— npm 是 JavaScript 的包管理器。即使在學習這個教程之前我已經敲打過上千次 “npm install”，但是知道學完這個我才知道 npm 做的所有事情。（在很多專案中我已經轉移使用 yarn，而不是 npm，但所有的概念都是相通的）

npm i -g how-to-npm

• learnyounode——我打算專注於服務端 JavaScript，因為那有令我安逸的東西，那就是 Node.js。Learnyounode 是一個互動式教程，結構上類似 how-to-npm。

• expressworks —— 和前面兩個專案類似，Expressworks 是 Express.js 的介紹，一個 Node.js 的 web 框架。在 Postlight 公司 Express 沒有得到廣泛使用，但對於初學者，它值得學習去上手構建一個簡單的 web 應用。

• 現在是時候做點真東西了。我發現 Tomomi Imura 的一篇教程 Creating a Slack Command Bot from Scratch with Node.js 已經可以學到足夠的 Node 和 Express 的新技能來應對工作。因為我專注於後端，使用 Slack 建立一個 “/” 命令是一個很好的開始，因為沒有前端演示（Slack 幫你做好了）
• 在構建這個命令的過程中，我不使用演練中所推薦的 ngrok 或者 Heroku，而是使用 Zeit Now，這是任何人可用的、建立快速一次性的 JS 應用的寶貴工具。
• 一旦開始寫真正意義的程式碼，我也開始掉下工具無底洞了，安裝 Sublime 外掛，獲取正確的 Node 版本，配置 ESLint，使用 Airbnb 的程式碼規範 (Postlight 公司的偏好) —— 這些事情拖了我的後退，但也都是有價值的初始化投資。對於這方面我還在坑裡，例如 Webpack 對我來說依然美妙又神祕，不過這個視訊是個很不錯的介紹.
• 某些時候 JS 的非同步執行（特別是回撥地獄）開始困擾我，Promise It Won’t Hurt 是另一個教你怎樣使用 Promise 書寫優雅非同步邏輯的教程。Promise 是用於解決非同步執行的 JS 新概念。說實話 Promise 令我耳目一新，他們是巧妙的正規化轉變。感謝 Mariko Kosaka，現在我每次買漢堡的時候都能想起這些。
  

burger.resolve() — 圖片來自 The Promise of a Burger Party.

我知道在這會陷入各種各樣的麻煩，比如嘗試使用 Jest 測試，使用 Botkit 讓 Slack 機器人更有趣，使用 Serverless 真正打破函數語言程式設計的價值。如果你不知道這些是什麼意思，其實也沒關係。這是一個大世界，我們都有屬於自己的路要走。

“首先做，然後做對，然後做得更好.”

最後這件最重要的事我一定要提起：不斷去做就是學習的過程，做得很糟糕？那也是學習的過程。

這年頭學習現代 JavaScript 感覺就像是在不知所以然得做無用功。當你在想有這麼多時間搬搬磚不是更好嗎的時候，Google 的 Addy Osmani 有個不錯的建議

我鼓勵人們採用這種方法來跟上 JavaScript 生態系統：首先做，然後做對，然後才是做得更好. […]

掌握任何新技能的基本要求都需要時間，實踐和技巧。如果不使用每日一庫或者響應式學習，容易產生挫敗感。學會正確使用 Babel 和 React 花費了我數週時間，學習 Isomorphic JS，WebPack 和其他所有相關的庫花了更多的時間。 簡簡單單地開始並且從基礎做起就好.

這裡感謝 NodeSchool 和 Free Code Camp，幫助初學者學習 JavaScript 的兩個神奇的網站.

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。