[譯] 寫給「老派」 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 還有另外一個不同的地方：建立程序花費的時間感受和寫應用的時間同樣多。須要以「正確的方式」去作的工具、插件、軟件包和依賴以及編輯器配置和構建配置所需的絕對數量足以使你在啓動項目以前望而卻步。

Markdown

不要所以止步不前。我不得不放手去作，從起步到正確配置，容許本身的不完美甚至一些業餘，只爲溫馨地使用本身的工具。（我不會告訴你我曾用 nodemon 作代碼檢查）隨後我會找到更好的方法而且在每一個新項目中歸入進來。

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

Markdown

教程 / 項目 / 捨棄 / 重複

不管學習什麼語言都要經歷寫代碼 - 捨棄 - 寫更多代碼這個過程。個人現代 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、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。