[譯] 新一代 JavaScript 的開發圖譜（2017）

guoyang134340發表於2017-03-20
JavaScript

過去 5 年裡你一直使用 REST 介面。或者你一直在優化搜尋公司裡龐大的資料庫。又或者你一直在給微波爐寫嵌入式軟體。自從你用 Prototype.js 來對瀏覽器進行物件導向程式設計已經過去很久了，現在你想提升一下你的前端技能，你看了一下發現情況是這樣。

當然你不是要從一堆徐崢裡找出葛優，你在找 25 個連名字都不知道的人。這種情況在 JavaScript 社群特別常見，以至於存在 “JavaScript 疲勞” 這個詞。當你有時間去看一些關於這個主題的有趣的東西的時候，你會看到在2016年學習JavaScript是怎樣的體驗？絕妙的反映了這個現象。

但你現在沒時間了，你在一個大迷宮裡，你需要一張地圖，所以我做了一張。

一點宣告在前：這是一張可以讓你快速行動，不必做自己太多決定的作弊表。基本我會給通用的前端開發制定一套工具，這將會給你一個舒服的環境而不會讓你太頭疼。一旦你搞定了這些問題，你就可以根據需要自信地調整技術棧。

地圖結構

我將會將這張地圖分為幾個你需要解決的問題，對於每個問題，我將會：

  • 描述問題或工具需求
  • 決定你需要選取哪種工具
  • 討論為什麼這樣選
  • 給一些其他選擇

包管理

  • 問題：需要管理專案和其依賴。
  • 解決辦法：NPM 和 Yarn
  • 原因：NPM 是目前相當多的軟體包管理器。Yarn 基於 NPM 但是優化了依賴的解決方案，並且維護一個鎖檔案（lock file），用來儲存庫確切的版本號（它可以整合在 NPM 中，它們是相輔相成而不是單獨存在的）。
  • 可選：暫時未知。

JavaScript風格

  • 問題：ECMAScript5 (老版本 JavaScript) 太爛。
  • 解決辦法：ES6
  • 原因：這是未來的 JavaScript ，但是你可以現在就用了。結合其他多種語言有用的特性。比如說：箭頭函式、模組匯入/匯出功能、解構、模版字串、let 和 const、生成器、promises。如果你是寫 Python 的你會感覺更舒服和習慣。
  • 可選：TypeScript、CoffeeScript、PureScript、Elm

編譯

  • 問題：許多瀏覽器目前不支援 ES6,你需要東西來把你現代的 ES6 編譯成 ES5。
  • 解決辦法：babel
  • 原因：在服務端編譯，完美的解決辦法，也是事實上的標準。
  • 可選：Traceur
  • 注意：你需要使用 babel-loader，一個 Webpack loader (以及一些其他的)，如果你計劃使用任何風格的 JavaScript 你都需要編譯。

Linting

  • 問題：有一萬種寫 JavaScript 的方式所以很難達到一致性。一些 bug 可以用 linter 檢查出來。
  • 解決辦法：ESLint
  • 原因：完美的檢查和很好的可配置性。airbnb preset 值得遵循。對你熟悉新的語法絕對有幫助。
  • 可選：JSLint

打包工具

  • 問題：你不能使用分開的單獨檔案，依賴需要被解析和正確的載入。
  • 解決辦法：Webpack
  • 原因：高度可配置性，可以載入所有的依賴和檔案，支援熱插拔。事實上，他是 React 專案的打包工具。
  • 可選：Browserify
  • 不利性：一開始可能很難配置
  • 注意：你需要一點時間來了解這東西是怎樣工作的，你還需要了解一點 babel-loader、style-loader、 css-loader、file-loader、url-loader。

測試

  • 問題：你的應用很脆弱，很容易崩潰，所以你需要測試。
  • 解決辦法：mocha (測試執行)，chai (斷言庫) 和 chai-spies (對於假的物件，你可以查詢某些事件應不應該發生)。
  • 原因：使用簡單，功能強大。
  • 可選：Jasmine、Jest、Sinon、Tape。

UI 庫／狀態管理

  • 問題：這是大傢伙，單頁應用越來越複雜，狀態管理也很麻煩
  • 解決辦法：React 和 Redux
  • 使用 React 的原因：令人興奮的正規化轉變，打破許多 web 領域的教條更好的實現。關注比傳統方法更好的分離：取代分離 HTML/CSS/JavaScript 而採取元件化的思想。你的互動介面只是狀態的反映。
  • 使用 Redux 的原因：如果你的應用不是很輕量，你需要你個東西來管理狀態 （否則你疲於對於元件間的互動與資料傳遞，以及元件化的侷限性）。網上的每一個採取抽象的 Flux 架構模式的解決辦法對會讓你擺脫迷惑。幫助你節省時間直接採用 Redux 就行了。 他的實現模式很精簡。即使 Facebook 也使用他。另外的美妙之處：過載並保持應用狀態，可測試性。
  • 可選：Angular2、Vue.js。
  • 警告：當你第一次看到 JSX 風格的程式碼你可能會很吃驚。然後找一個社群大喊，這是多年來認知的失調，事實上將 HTML、JavaScript 和 CSS 寫在一起是很棒的。相信我— 不需要在一個檔案裡寫兩個蹩腳的引用。

DOM 操作和動畫

  • 問題：猜猜看？當你在選擇元素和執行操作 DOM 節點時你仍然需要一點權宜之計。
  • 解決辦法：原生 ES6 或者 jQuery。
  • 原因：是的，jQuery還活著，React 和 jQuery 並不衝突，你的大多數需求都可以用 vanilla React 來實現 (和querySelector)。新增 jQuery 將會使你的打包速度變慢，我想說在 React 上使用 jQuery 不是很好你應當避免他。如果你被 ES6 和 React 不能解決的問題卡住了，或者你正在處理討厭的跨瀏覽器問題，也許需要使用一下jQuery。
  • 可選：Dojo (不知還在不？)。

樣式

  • 問題：現在你有了正確的模組，你希望他們都是獨立的並且可以有組織化的重用。元件化的樣式應該像元件本身一樣輕便。
  • 解決辦法：CSS 模組化。
  • 原因：我喜歡內聯樣式（並且廣泛的使用），我必須承認他們有很多弱點。是的，在 React 內可以寫行內樣式，但是你不能使用偽類選擇器（比如:hover），這將會導致很多問題。
  • 可選：內聯樣式。我特別喜歡內聯風格的原因是他們把樣式看作常規的 JavaScript 物件，可以讓你程式化的處理。另外，他們在你每一個的元件檔案裡，可以讓你更好的維持。一些人仍推薦 SASS/SCSS/Less。這些語言意味著額外的構建步驟，他們並不像 CSS 模組／內聯風格一樣便攜，但是功能強大。

就這樣

你現在有一堆的東西來學習，但至少你不要在花費時間來做調查了。如果發現我少做了或者漏了什麼東西？在 twitter 上給我留言或者評論吧 @bug_factory。

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

相關文章