前端框架和技術

JavaScript 的普及造就了一個很是活躍的技術，框架和庫的生態系統。 這個生態系統不斷涌現多式多樣的框架和技術，對許多人來講都是高度的混亂。 那麼你應該關注什麼樣的技術呢？

你應該在哪裏方面投入時間來得到最大收益呢？ 目前公司招聘哪些技術棧呢？ 哪些技術增加潛力最大呢？

如今最重要的技術是什麼？這篇文章高度歸納了你須要知道的內容，你能夠經過文章中的連接瞭解全部關於它的一些信息。

記住，當你在學習一些實際的代碼時，您能夠在 Codepen.io 上交互式地執行代碼。若是你還在學習 ES6 ，您能夠看看如何使用 Babel REPL 進行轉譯。

這個列表很長，但不要氣餒。你能夠作到！ 在看這個清單列表時，若是你擔憂你將如何學習全部構建現代應用程序所需知識，那麼建議你先閱讀一下 「爲何我要感謝 JavaScript 疲勞」 。而後靜下心來，開始學習和工做。

可選學習標記

有些東西嚴格的說是 可選的* ，這意味着，若是您對他們感興趣，我推薦它們，或者你的工做須要瞭解它們，但你不該該以爲必須去學習它們。任何標有星號的東西(例如:example*)都是可選的。

任何沒有帶 * 的東西都應該學習，可是不要以爲要學習一切或知道一切。應該有一個很好的認知，不必定須要成爲一名各個領域都出衆的專家。

JavaScript ＆ DOM基礎知識

在嘗試以 Javscript 爲生，進行工做以前，您應該對 Javascript 的基礎知識有深入的瞭解：

• ES6 ：當前最新版本的 JavaScript 是 ES2016（又名 ES7 ），但不少開發人員尚未正確學習 ES6 。是時候學習是 ES6 要點 了： Arrow functions(箭頭函數) ，rest(剩餘參數) / spread(擴展操做符) ，default parameters(默認參數) ， concise object literals(對象字面量) ，destructuring(解構)，解構等等…
• Closures(閉包) ：瞭解 JavaScript 函數做用域的基本特性。
• 函數 和 pure functions(純函數)：你可能覺得你已經很好地掌握了函數，可是 JavaScript 有一些技巧，您須要瞭解 純函數 來掌握函數式編程。
• Functional programming basics(函數式編程基礎) ：函數式編程經過組合數學中的函數來生成一個大的程序，避免共享狀態和可變數據。多年以來，我尚未看到一個大量使用函數式編程的 JavaScript 應用程序。是時候掌握基本原理了。 (愚人碼頭注：能夠看看知乎上的這個回答：https://zhihu.com/question/28292740/answer/40336090)
• Partial application(局部應用) 和 Curry(柯里化)
• Builtin methods(內置方法) ：學習標準的數據類型 (特別是 arrays ， objects ， strings ， 和 numbers )。
• Callbacks(回調): 回調是一個函數，當另外一個函數有結果就緒時當即執行。 就像你說，「作你的工做，作完後打電話給我。」
• Promises ： promise 是處理將來值的一種方式。當函數返回 promise 時，您可使用 .then() 方法附加回調，這個回調將在 promise resolves時運行。resolved 值被傳遞到你的回調函數中，例如：doSomething().then(value => console.log(value));

JavaScript 代碼:

1. const doSomething = (err) => new Promise((resolve, reject) => {
2. if (err) return reject(err);
3.  
4. setTimeout(() => {
5. resolve(42);
6. }, 1000);
7. });
8.  
9. const log = value => console.log(value);
10.  
11. // 使用返回的 promises
12. doSomething().then(
13. // 當 resolve 時:
14. log, // logs 42
15. // 當 reject 時(resolve 時不會調用)
16. log
17. );
18.  
19. // 記得處理錯誤哦!
20. doSomething(new Error('oops'))
21. .then(log) // not called this time
22. .catch(log); // logs 'Error: oops'

• Ajax & server API calls (Ajax 和 服務器API調用) ： 那些有趣的應用程序最終須要與網絡服務器通訊。 你應該知道如何與 API 進行通訊。
• Classes (注意: Avoid class inheritance(避免類繼承)。查看 How to Use Classes and Sleep at Night(如何使用類才能晚上睡個好覺).)
• Generators & async/await 在我看來，最好的異步代碼的寫法就是用寫同步代碼的方式去寫異步代碼。不能否認這些都存在學習曲線，但一旦你學會了，代碼將更容易閱讀。
• Performance(性能)：RAIL — 從 「PageSpeed Insights」> & 「WebPageTest.org」 開始，他們會給你一些建議

• Progressive Web Applications (PWAs) ： 查看 「Native Apps are Doomed」 & 「Why Native Apps Really Are Doomed」

• Node & Express： Node 容許你在服務端運行 JavaScript ，這意味着您的用戶能夠將數據存儲在雲中並隨時隨地訪問。而 Express 是 Node 社區最爲流行的 Web 框架。

• Lodash ：一個很好用的、模塊化的 JavaScript 實用工具函數庫，包含功能編程的好東西，你能夠經過 lodash/fp 導入 data-last 功能模塊。

• 工具

  • Chrome Dev Tools：DOM inspect & JS debugger: 最爲好的調試工具，雖然 Firefox 也有不少很是酷的工具，你也能夠去體驗一下。
  • npm：JavaScript 語言公然的開源包倉庫庫。
  • git & GitHub ： 分佈式版本管理系統，隨時跟蹤你源代碼的變化。
  • Babel ：用於將 ES6 代碼轉譯到 ES5 以使之可以兼容老版本瀏覽器。
  • Webpack : 最流行的標準 Javascript打包工具，經過一個簡單的配置文件，就能快速讓項目運行。
  • Atom ，VSCode，或者 WebStorm + vim： 你須要爲本身選擇一個合適的編輯器來輔助你快速開發。Atom 和 VSCode 是當今最流行的 JS 編輯器。 Webstorm 是另外一種解決方案，它對質量工具的支持很是強大。我建議學習 vim ，或至少加入到你的收藏書籤，由於早晚，你須要在服務器上編輯文件，掌握 vim 是最簡單的方法 – vim 安裝在幾乎全部的 Unix 兼容的操做系統，經過 SSH 終端鏈接能夠很好的運做。
  • ESLint:： 儘早發現語法錯誤和代碼風格問題。除了代碼評審和TDD以外，這是你能夠作的第三件事，儘可能減小代碼中的Bug。
  • Tern.js：標準 JavaScript 類型的推理工具，這是我目前最喜歡的類型相關的 JavaScript 工具 – 不須要編譯步驟或註釋。我踢掉了其餘相關工具，Tern.js 提供了大部分的功能，而且幾乎沒有爲 JS 使用靜態類型系統的成本。
  • Yarn: 相似於npm，可是安裝起來更爲可靠快速。
  • *:：靜態類型的JavaScript。除非你學習 Angular 2+，不然是徹底可選的。若是你不使用 Angular 2+ ，你應該在選擇學習以前要仔細評估。我很是喜歡它，我很欽佩 TypeScript 團隊的出色工做，可是你須要知道一些權衡。必讀：「關於靜態類型的驚人祕密」 和 「你可能不須要 TypeScript」 。
  • Flow*:： JavaScript靜態類型檢測工具，能夠閱讀 「TypeScript vs Flow」 來對於這兩者有個大概的瞭解，請注意，我讓 Flow 來反饋給個人 IDE 有一些困難，即便使用Nuclide。
  • (轉)