前端程序員：月薪5K到5萬，我幹了啥

摘要： 高貴的前端程序猿們： 如何在前端開發這種高精尖的技術領域找到心儀的工做？實如今咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峯的職業夢想？這篇《進化論：從 0 到 100，前端猿茁壯成長的精神飼料史》，確定能給你事業的加速動力。

高貴的前端程序猿們：

如何在前端開發這種高精尖的技術領域找到心儀的工做？實如今咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峯的職業夢想？這篇《進化論：從 0 到 100，前端猿茁壯成長的精神飼料史》，確定能給你事業的加速動力。

前端開發工做已經變的愈來愈複雜，僅僅是想羅列一份前端開發的學習列表就已是一件艱鉅的工做。曾經只要會編寫 HTML, CSS 和 Javascript 就是可以找到一份前端開發工做的所有要求。而如今，web 開發遠遠不止是簡單編碼。由於咱們的互聯網上有了更多的內容，也由於有更多的人、更多設備能夠訪問互聯網,  web 前端開發技能也就更多了。咱們如今須要考慮的問題不少，好比載入時間，性能，不一樣的屏幕尺寸, 不一樣的輸入方式, build 系統, 部署策略，還有如何組織好咱們的代碼。

這仍是想象中前端開發麼？好吧其實只要你有熱情，這些仍是頗有趣的，如今就來仔細看看，一份前端開發的工做，到底須要你準備些什麼?

入行行頭：5 大硬件

請準備好如下東西

1. 一顆人類的大腦：智商在平均水平線以上便可
2. 一份強烈的渴望：個人代碼要能夠運行在任何一個有瀏覽器的設備上。
3. 一臺筆記本電腦：不須要花費不少錢得那種，只要它能夠運行 Windows, Mac OS X, 或 Linux 系統。固然你也能夠只用一臺臺式機，可是那樣就不能帶着它坐在咖啡館裏…
4. 一個文本編輯器：能夠推薦的好比 Atom,Visual Studio Code, TextMate, 它們都有在 Mac OS, Windows 的免費版本，什麼還有 Sublime, WebStorm? 啊，那些都很流行，不過須要須要一筆很多於 70 美圓的花費…
5. 一個代理：這個你們都懂的，我就不解釋了

初級資質要求

一些專業基礎

你須要學會瀏覽器能理解的三大語言：HTML, CSS, Javascript – 神聖的三位一體！

很是重要的一點是，必定要理解這三大語言後再去學習別的，確保知道怎樣在各類尺寸的屏幕上排列好你的網頁，怎樣在一個按鈕被按下後 do something!

一些頗有用的學習資源

• Codeacademy: interactive, code-along tutorials (this site is the bomb btw)
• Web Development for Beginners: article from webplatform.org.
• MDN：https://developer.mozilla.org/en-US/docs/Web

中級進階路徑

一旦掌握了三大語言，就能夠開始學習專業的開發流程啦：

1. Command line：好吧,命令行也許都會,可是要掌握最基本的操做,熟悉怎樣配置你的環境,還有那些奇怪的 shell 腳本，由於你會常常用到它們。
2. CSS 已經不夠用了,咱們有了 CSS 的預處理：Sass, LESS。
3. 知道如何搭建一個 build 系統：Gulp 或 Grunt 這類的構建任務腳本器,編譯 LESS 成 CSS, concatenating Javascript, minify 壓縮靜態資源, 選一個異步或同步的方式加載它們，而後一個好的 build 系統要能自動作到那些,包括一個本地的 web 服務器用於測試代碼。
4. 代碼版本管理，git。
5. 在 github 上分享你的代碼！
6. 部署! 讓你的網站上線。能夠找一個免費的服務提供商，好比 heroku.com, https://pages.github.com

這些幾乎就是現代前端開發者會用到的工具和技術，好了，你如今能夠成爲一個前端開發工程師了。

高級炸裂裝備

你已經可以爲你的朋友的業務搭建一個網站了，簡潔的排版，高清大照片，你成功了，它甚至在你的手機都看着很棒。那麼還有什麼值得學的？

把你的網站和一個內容管理系統 (CMS）集成在一塊兒。一個 CMS 可以讓你經過用戶界面增、刪、改、組織你的內容，不須要任何代碼。這就是那些博客網站如何工做的。好比免費的 WordPress，去熟悉一個開源的 CMS 吧，會頗有用的。

學習怎樣搭建一個 CMS，意味着你講要熟悉一個服務器端的語言，好比 Node.js, 或 PHP，而後你還會想要知道怎樣和數據庫打交道，好比 MySql 或者 MongoDB。

來熟悉一種 Javascript 框架吧，這樣你能夠真正的搭建一個交互出色的 web 應用，那真的很重要，好比 Angular, React, Ember。只要挑一個你喜歡的，可是必定要精通它。

Javascript design patterns，javascript 也有設計模式？ 是的，讀一下吧。

突破天際的大招

溝通技巧！你須要和你的小夥伴們溝通，他們是你的 coder 夥伴，你的老闆，你的用戶，你的….stackoverflow.com， 有問題找 stackoverflow，擴展一下人脈把，上 meetup.com, 在博客上寫一些你的學習體驗， 在 Gitgub 貢獻一下你的 Pull request。

界面設計和用戶體驗設計 UI/UX design，前段開發的小夥伴須要具有基本的 UI/UX 設計知識。

搜索優化，要知道怎樣提升網站的搜索排名，更容易被人們搜索到。

CSS 過分效果，給你的按鈕寫一個 hover 的 CSS 動畫，還有你的從右邊滑入的導航菜單也須要一個平滑的動畫。

關於性能，讓你的網站儘量快的被加載，減小 DOM 的 reflow 和 repaint 操做，防止滾動性能瓶頸，優化 Javascript, 讀一讀這個吧 google web developer fundamentals。

用一些測試框架來實現 Javascript 單元測試，好比 Jasmine，QUnit。

持續集成 Continuous integration (CI)，知道怎樣配置一套和夥伴們一塊兒使用的自動測試和部署的工具，好比 CircleCI, Travis CI, Jenkins.

超好用的其餘加成技能

↓↓↓這些並不是必須，但能幫你脫穎而出：

用 CSS3, SVG, Canvas API 實現動畫。

後端開發， Node.js

最後：去找工做吧！

有了技能是不夠的，你須要能展現它們，你還能幹的是：

1. 搭建一個小網站，公開你的 gitub 代碼庫，確保你的代碼和文檔清楚漂亮，還有一份 README
2. 去 meetup.com 找你的老闆或者投資人吧，開一個博客，申請一個 linkedin 賬號
3. 由於 web 技術老是在變化，最後，即便找到了一份趁心的工做，仍是須要 stay motivated, 你須要時常去下面這些地方轉轉：CSS Tricks，SitePoint，Smashing Magazine
4. 固然還有些像 CSDN 這樣中文社區，總之遇到任何難題，社區裏有總有樂於助人的。
5. 保持好的職業態度：Stay humble, and build cool shit

本文編譯：劉晶，一個玩 web 前端開發的 code monkey，也喜歡 UI 設計，他還作事後端開發，現擔任點融前端資深開發工程師。

 

來源：51CTO