[翻譯]如何成爲現代前端開發人員?

時間 2019-11-06

標籤翻譯如何成爲現代前端開發人員简体版

原文原文鏈接

我已經爲新的一年從新編寫和替換了這篇文章，使其變得更簡潔以及更易於遵循一些推薦的練習，若是你發現和以前讀過的版本有一些小小的出入或者一些矛盾的評論請不要苦惱。前幾年的版本能夠在GitHub archives裏找到html

Web開發是一個不斷變化的領域——今天咱們創建網站的方式和幾年前咱們習慣的方式已經徹底不一樣了。過剩的現有工具以及天天都會出現的新工具，大多數時候開發者都受困於應該採用哪一種工具去實現目的。前端

我是「開發者路線圖」的做者和維護者，其中列出了您但願學習和進入前端、後端和操做系統的路線圖、工具和技術。我在 2017年建立了這個路線圖，而後在 2018年作了更新，而且在最近作了2019年修訂版。在寫這篇文章的時候，前端開發者路線圖已經對最近幾年作了更新。我仍然還在寫後段和操做系統的路線圖但願能在將來的幾天裏發佈。react

路線圖github地址：kamranahmedse/developer-roadmap Roadmap to frontend, backend or operations in 2019. github.comwebpack

在這篇文章中，我將回顧一下，與你分享製做這些路線圖背後的動機，若是你決定遵循這些路線圖，最後有一些分類和提示，雖不能保證，但也提供瞭如何在2019年成爲緊跟時代的前端開發者的方法。git

動機

在開始這篇文章以前先讓你對我有個瞭解爲，我在過去的六年裏一直在進行着全棧開發目前在 tajawal 擔任首席工程師，在這裏做爲工做的一部分我必須扮演不一樣角色。這不只是個人愛好，也是個人工做職責之一，要密切關注趨勢，接受技術決策並保持開發人員的積極性和訓練。github

Web開發增進了不少，而且進化的很快；前端可供選擇的數量足夠困擾任何人。我在開源社區很是活躍；若是每次在論壇上被問到或者看到有人提問「接下去我該學什麼」這樣的問題我都能拿到一便士，那麼我早在幾年前就能夠退休了。大約2017年，個人一位大學教授正在爲她的學生準備一套路徑讓他們瞭解市場，並但願我提供一份工具清單和網絡開發技術建議。我記下粗略的草圖並轉發給她，但後來我決定將它刪掉並把它放在GitHub上，以便每當我被問到這個問題時我均可以推薦任何人。這就是這些路線圖誕生的初衷。web

免責聲明

在開始跟隨路線圖以前，請記住這些免責聲明。npm

這份路線圖的目的是讓你對前端有個總體的概念，而且當你產生困惑時指導你下一步應該學什麼，而不是爲了追趕潮流去學新的技術。你應該逐漸理解爲何一個工具比另外一個工具更適合某些場景，並記住最新的工具並不意味着最適合這個場景redux

其次，研究下你的就業市場bootstrap

不要忽視語言和工具可能很是依賴於市場這一事實，所以請對你的目標市場作一些研究。

再者，你不必去知道文章裏列出的全部內容。

你不須要了解這裏列出的全部內容便可得到第一份工做。假如你剛進入web開發這個行業不要被這份路線圖嚇到，即便它看上去巨大無比。由於我試圖把你最終會學到乃至用到的全部相關技術都涵蓋到這份路線圖中。你能夠先學習最低限度，並在開始構建東西的時候繼續學習其他部分。

第一階段——準備工做

若是你是一個剛步入前端的初學者，這裏給你準備了一份不同的路線圖。先不要往下深刻，看一下下面的初階路線圖。完成路線圖中列出的項目，並在使用它們製做一些項目後再回來繼續下面的階段。

僅僅是學會列出來的項目，你就能夠自稱是前端開發而且在市場裏找到工做。我知道不少人就是靠作這些，並從自由職業者或平常工做中得到可觀的收入。花一些時間在路線圖中列出的全部項目上，緊緊抓住全部這些內容並多多練習。寫大量的項目。下面列出了一些你能夠作的東西。

任務

寫一個番茄時鐘應用。你能夠克隆而且建立一個 web版本的應用
用良好的響應式佈局去建立一個使用GitHub代碼倉庫接口的網頁項目去獲取並展現本週前十的代碼倉庫。
建立一個簡單的todo list應用你能夠添加任務，標記他們完成，編輯和刪除任務.
建立一個簡單的秒錶，有開始、暫停、中止和重置四個功能。

一旦你作完了上面的這些任務，去學習下版本控制系統，學習git的基礎用法，而且在 GitHub上建立你的帳號。

第二階段——寫更好的CSS

一旦你學會了基礎部分，下一步就是學習如何寫可維護的CSS和使用CSS框架。這裏給出了一份路線圖

完成此步驟後，請繼續對您在第1階段中所作的項目執行如下任務

任務

使用npm 或者 yarn.給以前的項目添加bootstrap庫
把你第一階段的項目改寫成BEM的規範
用SASS來寫CSS
使用NPM的Script把SASS自動轉換成CSS

第三階段——崛起

這一階段將是你邁向現代前端開發的一段時間。繼續去學習更多Javascript相關的內容。瞭解什麼是Webpack，瞭解不一樣的概念以及爲何須要它。瞭解什麼是Babel，爲何咱們使用它並學習如何集成webpack，最後學習如何使用ESLint來檢查代碼。這個階段所列出的全部項目都圍繞webpack。

你將從這個週末開始體會現代前端開發。完成這個階段後，請繼續執行一下步驟，以便更好的掌握構建工具。

任務

建立一個npm包就收一個用戶名，返回從社交網絡上查到的全部連接（若是存在的話）。它應該與webpack捆綁在一塊兒，使用babel進行轉換並使用ESLint進行代碼檢測。
建立一個簡單的待辦事項應用程序，使用SASS來寫CSS，爲樣式添加bootstap框架，使用BEM，使用babel轉義Javascript，將其與webpack捆綁在一塊兒，建立優化的生產構建並將其部署在github pages上。

第四階段——現代前端應用

下一步是學習一些前端框架。有多種選擇，但目前最經常使用的是React，Angular和Vue。我建議你去React。

首先學習React，而後看一下redux，以後再學習JS中的CSS; 這不是必需的，但若是您願意，能夠查看Styled Components和CSS模塊。

一旦你學會了React，請繼續閱讀有關網站漸進加強體驗(PWA)的信息。如今你已經瞭解了前端框架，這對你來講應該不會那麼困難。查看 PWA checklist,，閱讀有關service workers、性能測試、使用lighthouse，查看可使用的不一樣瀏覽器的API來加強你的應用，例如：存儲、位置、通知、設備方向和付款。另外也請閱讀RAIL model和 PRPL pattern的信息。

一旦你作完了這些，你就能夠稱本身是現代前端開發工程師。必定要練習你學到的東西。若是你正在尋找點子，這裏是你能夠選擇的任務列表。

任務

建立一個簡單的應用容許你選擇一些話題(#話題)，並使用 twitter的搜索API 來獲取並向你展現像trello同樣的柵格佈局。嘗試固定主題標籤，以便在用戶刷新頁面時，他會記住你選擇的主題標籤。使用react router來添加頁面。
建立一個與此相似的番茄鍾容許用戶配置工做和休息的持續時間，顯示通知並在工做或休息結束/開始的時候播放提示音
使用react從新建立 github趨勢頁面，並容許使用語言和日期過濾，就像github同樣。你能夠添加任何日期庫。