[譯] 新一代 JavaScript 的開發圖譜(2017)

guoyang134340發表於2017-03-20

過去 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

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

相關文章