PS: 本文相關Javascript名詞翻譯都使用犀牛書的翻譯
Warning：這篇文章很長，End也不會有懶人包。
JS的受歡迎程度讓它變成了一種科技，一種生態系還有一種Libraries，但是它的多元程度還有它的生態系的活力讓大多數的人相當困擾，到底哪項技術我該關心的呢？
到底把時間投資在哪項技術會讓我得到最多的利益？哪種技術人員是現在的公司們所需要的，哪種技術是最有成長潛力的？
哪種技術是你現在最需要知道的？這篇文章概括了介紹你所知道的一切東西，還附上連結。
記得一件事，如果你還在學著實驗一些code，Codepen.io會是你的好朋友，如果你還在學習ES6，你可以學著用線上轉譯器Babel REPL
這篇文章會是一個很長的清單，但是不要太沮喪。你辦得到的，如果你現在正在看這個清單，而且很煩惱如何利用你所知道的一切來建立一個現代化的應用，請讀“Why I’m Thankful for JavaScript Fatigue”，然後下定決心的開始工作吧。
建議學習但不是必須的符號＊
如題，有些技術嚴格來說只是建議學習的，換句話說，如果你有興趣的話，我會推薦這些技術，或是如果你會需要為了工作而學它。但是不用覺得學習它是一種義務。任何名詞加上*號(ex:”example*”)就會是建議學習
所有沒有加上星號的名詞就是你應該要學的。但是一樣，不需要覺得學習這些東西是一種義務。你必須瞭解這些名詞是必須要學習的事物，但是你不用成為所有技術的專家。
Javascript & DOM的基本
當你要開始把JS當飯喫的時候，你應該要把這些JS的基礎掌握得很好:
- 內建的方法：
學習這些標準的資料型態(特別是矩陣，物件，字串還有數字) - 函式還有純函式(Function
& pure functions)：
你可能已經覺得你已經掌握函式掌握得很好了，但是JS有一些不為人知的小技巧，而且你需要學習純函式來掌握Functional Programming - 閉包(Clourses)：
學習Javascript的函式作用域的行為 - 回呼(Callbacks)：
回呼函式是一隻用來表示其他支函式的結果已經準備好的函式，它說”黑，做好你的工作，做完（到了）叫我（咦?” - Promise(不知道怎麼翻，所以決定不翻)：
一個Promise物件是一種處理未來尚未發生的結果的方式，當一個function回傳了一個Promise，你可以利用 .then() 方法在Promise resolve (Promise.resolve是一個靜態方法，所以我就不翻譯了)之後執行你的callback，resolved value會傳進你的callback function中
const doSomething = (err) => new Promise((resolve, reject) => {
if (err) return reject(err);
setTimeout(() => {
resolve(42);
}, 1000);
});
const log = value => console.log(value);
// Using returned promises
doSomething().then(
// on resolve:
log, // logs 42
// on reject (not called this time)
log
);
// remember to handle errors!
doSomething(new Error('oops'))
.then(log) // not called this time
.catch(log); // logs 'Error: oops'
- Ajax & server API calls：
大部分有趣的應用程式最終都是需要跟網路溝通的，你應該要知道如何跟API(Application Interface 應用程式介面)溝通 - ES6：
現在最新版本的JS已經是ES2016了（又叫做ES7)，不過很多開發者都還沒好好的學習ES6 - 類別：(note: Avoid class inheritance. See How to Use Classes and Sleep at Night.)
- 函式型程式設計(Functional
Programming)：
Functional Programming是由許多數學函式所組成，避免了共用的狀態跟可改變的資料。我上一次見到沒有使用大量的Functional Programming的JS app已經是一年多之前了，是時候要精通這些基礎了。 - Generators & async/await：
我個人的意見，這是讓你的非同步程式碼看起來像是同步原始碼的最好的方式，它需要花時間學習，但是你學完之後，會讓你的原始碼更容易閱讀。 - 效能: RAIL?—?從這裡開始 “PageSpeed Insights” & “WebPageTest.org”
- Node
& Express：
Node讓你在server端使用JS，Express是Node最受歡迎的框架 - Lodash：
一個很棒，模組化的JS工具，把funcitonal programming的好處都包了進去，Import the data-last functional modules fromlodash/fp.(這句不知道怎麼翻我就放上原文了)
工具
- Chrome Dev Tools: DOM
inspect & JS debugger:
最好的除蟲工具，雖然你可能也會想試試看Firefox的一些很棒的工具 - npm:
原本是Node.js的套件管理工具，現在已經變成了一套開源的JS套件管理工具 - git & GitHub:
分散式的版本管理系統，讓你總是可以追朔你的原始碼的改變。 - Babel:
用來在一些比較舊的瀏覽器上轉譯你的ES6 - Webpack:
目前最受歡迎的打包工具，當你要創建一些簡單的範例的時候，方便你設定。 - Atom, VSCode,
or WebStorm + vim:
如果你需要一個編輯器， Atom and VSCode是目前最受歡迎的JS編輯器。Webstorm也是其中之ㄧ。我推薦學習vim，或是至少把相關的小抄(cheat sheet)加入你的瀏覽器書籤，因為早晚你都會需要用它來編輯在伺服器上的檔案，而這是最簡單的方式。vim 被安裝在所有Unix相容的作業系統上，而且利用SSH遠端連線操作起來相當方便。 - ESLint:
提早把語法以及格式錯誤抓出來。排名在Code review跟TDD(Test Driven Development)之後，第三佳的方式讓你減少你原始碼的bug - Tern.js(我沒用過所以我就保持原文了，怕翻錯): Type inference tools for standard JavaScript, and currently my favorite type related tool for JavaScript?—?no compile step or annotations required. I’ve kicked all the tires, and Tern.js delivers most of the benefits, and virtually none of the costs of using a static type system for JS.
- Yarn*:
跟npm很像，但是安裝的行為卻是確定性的，而且Yarn看起來比npm還快。 - TypeScript*(一樣沒用過我就不翻譯了): Static types for JavaScript. Completely optional unless you’re learning Angular 2. If you’re not using Angular 2, you should evaluate carefully before choosing TypeScript. I like it a lot and I admire the TypeScript team’s excellent work, but there are tradeoffs you need to know about. Required reading: “The Shocking Secret About Static Types” & “You Might Not Need TypeScript”.
- Flow*: Static type checker for JavaScript. See “TypeScript vs Flow” for an impressively informed and objective comparison of the two. Note that I’ve had some difficulty getting Flow to give me good IDE feedback, even using Nuclide.
React
React 是一個用來建立使用者介面的框架，由Facebook所創建，它的理念建立在於單向資料流，意思是所有的資料更新循環會是：
(我也沒用過React所以不確定的我就不亂翻譯了)
- React takes inputs to components as props and conditionally renders DOM updates if data has changed for specific parts of the DOM. Data updates during this phase can’t retrigger the render until the next drawing phase.
- Event handling phase?—?after the DOM has rendered, React listens for and events, delegating events to a single event listener at the root of its DOM tree (for better performance). You can listen to those events and update data in response.
- Using any changes to the data, the process repeats at 1.
這是一個跟雙向資料綁定相反的方式，讓DOM的改變直接更新資料(舉例像是Angular 1還有Knockout)。使用雙向綁定的話，如果在DOM渲染過程中DOM又有改變的話(在Angular 1中叫做digest 循環)可能會在這個渲染過程還沒結束前又觸發另一個渲染過程，會讓效能變慢。
React 並沒有規定資料管理系統，不過Flux是強力推薦的，React的單向資料流借用了Function programming還有immutable data structure的想法，改變了我們對於前端框架結構的想法。
以下是更多相關資料
For more on React & Flux architecture, read “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.
- create-react-app*: 最快開始建立一個React App的方法
- react-router*: 簡單到死的React router
- Next.js*: Dead simple Universal render & Routing for Node & React.
- velocity-react*: Animations for React?—?allows you to use the VMD bookmarklet for interactive visual motion design on your pages.
Redux
Redux 為你的應用提供了一個交易性(transactional)的，決定性的狀態管理方式。我們呈現了一個action物件來減少現有應用程式的狀態，要知道為什麼它很重要“10 Tips for Better Redux Architecture.” To get started with Redux, check out the excellent courses by the creator of Redux, Dan Abramov:
Redux是必學的
Redux是必學的
Redux是必學的
很重要所以說三次，就算你從來沒過它
為什麼呢？因為他會讓你練習而且教你使用 pure functions 的價值，並且教你新的思考 reducers 的方式，像是用來產生資料叢集的共用的函式 (general-purpose functions)並且從這中間提取一些資料。Reducers 是如此的重要以致於 Array.prototype.reduce 被加入到JS的標準中。
(以下這段很難翻所以我也保留原文)
Why? Because it will give you lots of practice and teach you the value of using pure functions and teach you new ways to think about reducers, which are general-purpose functions for iterating over collections
of data and extracting some value from them. Reducers are so generally useful that Array.prototype.reduce was added to the JS specification.
Reducers 的重要性遠大於一個陣列，而且學習新的Reducer工作方式是相當有價值的。
- redux-saga*(沒用過就不翻了): A synchronous-style side-effect library for Redux. Use this to manage I/O (such as handling network requests).
Angular 2*
(其實我也沒用過，就盡量翻翻看)
Angular 2 是Google 的超級受歡迎的框架?—?Angular 的大成。因為它的瘋狂受歡迎的程度，所以放在你的履歷上會很漂亮?—?不過我還是推薦先學React
我相當推薦先學React因為
- 簡單
- 相當受歡迎而且很多工作都需要他(Angular 2 也是)
因為這些理由，所以我推薦先學React，不過我認為Angular 2 只是個建議學習的選項。如果你對它有強烈愛好，可以交換一下學習順序，任何一個都會讓你覺得受益。
不管你最後選了什麼，在拋棄它學習另一個之前，請至少專注於使用它六個月到一年，要讓它產生強大的效益需要時間，我想任何的學習都是一樣的。
EDIT:你為什麼不列出<你最喜歡的？>
有些人問我為何不列出他們最喜歡的框架，其中一個重要的原則是，我認為“這項技術在實際工作上是否有用？”
是的，這是一個歡迎程度的競賽。不過有機會知道一個框架會開放是當你在考慮你要如何投資你的學習時間的時候一個重要的考慮因素。
為了回答上面的問題，我找了一些資料。首先是Google Trends。如果你想要重新產生這個Google Trends的圖表，記得要選取by主題而不是by關鍵字。因為部分的字會產生負面結果。
這張圖告訴我們的是這些不同的專案的相關關注程度。如果人們搜尋這些字，很有可能是他們正在探索他們的選項，或是尋找幫助或是技術文件。這是一個相當適合表示相關專案的使用程度的圖表。
另一個很好的資源是 Indeed.com，它是一個有大量且多樣資源的求職網站。雖然各項技能的受歡迎程度已經漸漸不能表示什麼了，但是他們仍然收集了足量的資料來告訴你現在人們正在用來產生實際專案的框架。
要重新產生這個圖表，你可以搜尋framework name in JS然後讓location 這一欄空白，結果就如你所見。
Angular and React 支配了整個生態圈:甚至沒有可以望其項背的其他選項。 (jQuery 例外，因為它是被用來應用在所有網站，也包含非app類?—?因為它被幾乎所有 legacy system，包括熱門的CMS系統像是 WordPress)
你可能會發現Angular 有一個顯著的領先，但是為什麼我推薦React呢？
- More people are interested in learning React than Angular
- React significantly leads Angular in user satisfaction
換句話說，React是贏在mindshare還有使用者體驗上。而如果這個趨勢在往後延個一年或一年半，React會非常有機會成為主宰的前端框架。
Angular 2 有機會翻盤，不過目前React是表現相當的好
RxJS*
(沒用過，相關資料)
is a collection of reactive programming utilities for JavaScript. Think of it as Lodash for streams. Reactive programming has officially arrived on the JavaScript scene. The ECMAScript Observables proposal is a stage-1 draft, and RxJS 5+ is the canonical standard implementation.
如果要使用，別引入整包RxJS，可以分批次使用，讓你的app少了大概200k以上，會讓你的app加快不少。
下一個階段
Now that you’ve studied up on all this hot tech, read “How to Land Your First Development Job in 5 Simple Steps”.
Level up your JavaScript game. If you’re not a member, you’re missing out.
翻了三個小時，眼睛都快脫窗了。有錯誤請不吝惜指教瞜