【前言】 近一年多的時間，筆者在公司中擔任過應屆生導師、實習生導師、應屆生專案導師等一系列導師角色。期間，筆者發現一些即將和準備成為前端攻城獅的同學其實並沒有明確前端真正的核心和定位，也沒有給自己制定一個學習和發展的方向。當初選擇前端這個職業，也僅僅只是為了找一份工作而已。筆者很想以自己的多年工作經驗，為前端應屆生們分享一下我心中適合前端工程師的職業規劃，讓大家對自己有一個比較清醒的認知，避免在以後的成長過程中產生迷茫情緒。當然，筆者其實也才工作五年，能達到現在的技術水平和職級，應該算是發展上升比較快的，一些經驗具備一定的借鑑價值。
前端的興起
前端真正興起和開始頻繁出現在大家的視線裡，大概是在十年前。彼時的 Web 開發基本是由後端主導，前端能做的只是校驗一下資料、操作一下 DOM。（其中資料檢驗是 JS 產生的根本原因：當時網路太慢，在服務端檢驗資料並反饋給使用者，讓使用者知曉輸入錯誤，這個流程太長、反應太慢，因此通過指令碼在使用者端完成第一步校驗，既方便了使用者，又減輕了頻寬的壓力。）即使 06 年 jQuery 釋出並風靡全球，以及 XMLHttpRequest 被納入 W3C 標準，也沒有改變這種狀況。制約它進度的原因很簡單，因為很多事情前端 做不了 或者 做不好。隨著時間的推移，近幾年，Angular、Backbone、React、Vue 等框架陸續釋出，讓前端越來越正規化、體系化。此時雖然仍有很多事，前端 做不了 或者 做不好，但前端這個崗位卻已變得熱辣空前。那麼，是什麼推動著前端發展到如此大的規模和火熱的程度？
也許，你可以列舉出很多各種各樣的原因，但是綜其一點，就是 『使用者體驗』 ，是由於所有人對使用者體驗的重視，才讓前端發展得這麼迅猛，這麼快地興起。這裡，可能要感謝 Apple，感謝 iPhone，感謝 Jobs，07 年第一代 iPhone 釋出，正式引發了幾乎所有人對使用者體驗的重視，從『只要能用就好』，變成『要好用我才買單』的心理。而，前端的先驅者們、瀏覽器的開發者們，也順應了這個潮流，將一系列重要的能力加入了瀏覽器，加入了前端。
其中最重要的一項是 XMLHttpRequest，也就是 Ajax，它是富 Web 應用的基礎，它讓前端可以脫離後端的掌控，不用通過跳轉的方式就能實現資料互動。感謝微軟，感謝 IE，雖然被 IE 6~8 虐了無數遍，但是是它引入了 XMLHttpRequest ，引入了 Ajax，開啟了富 Web 應用的時代，讓使用者體驗大幅提升。
而近幾年，隨著移動網際網路的發展，多端多平臺的需求越來越多，產品形態和資料分離，是形勢所趨。而與此同時，移動時代對產品形態跨端、跨平臺、多元化的使用者體驗要求，讓本身就有跨平臺特性的前端技術著實又火了一把，它讓開發者有更多的時間和精力關注使用者體驗，並很容易保持多平臺使用者體驗的統一（不同平臺用不同技術實現，雖然可以，但成本太高）；除去上面的原因之外，前端技術自帶的熱釋出、熱更新特性，能在及時更新業務需求的同時快速修復使用者所遇到的問題，也是大家選擇它的一種原因。雖然另外還有很多零零總總、各種各樣的原因，再促使著前端成為當前最火爆的幾個職位之一，但是最根本的原因仍舊是大家對使用者體驗的要求。
從上面可以看出，前端的興起源於所有人對 使用者體驗 的重視，而火爆更是由於所有人對 多元化的使用者體驗 的關注。當然，使用者體驗不只只是 UI 漂亮、好看，它是多方面的，例如檢視的載入速度和流暢程度，這些取決於你選擇技術的編碼體積、執行效率等多種因素。說白了，前端的目的就是 讓使用者用得爽，那麼 使用者體驗 必須是重中之重。
說了這麼多，其實有一個很重要的點沒有提到，那就是 CSS。注重使用者體驗，首先你要用介面要有 UI，HTML + CSS 作為最簡單的 UI 構建方式，讓前端的 UI 開發成本低到無與倫比，而開發成本低才會有更多的時間和精力去注重使用者體驗。同時，現在 CSS 也有相應的框架，像 PostCss、Sass 等，更進一步降低了開發成本，釋放了開發者的時間和精力。
前端興起這十年，也是使用者體驗飛速增長的十年。不管是技術完善度還是從業人數，前端這個方向受到了足夠多技術人員的關注，同時也受到了足夠多企業的重視。經過前端人不斷的努力，現在的情況又如何呢？
前端的現狀
提到現狀，必須先提到一個概念 大前端。由於近幾年網際網路的發展，尤其是移動網際網路的發展，有的大前端概念將 Native 歸入前端的範疇，有的大前端概念將 Node 甚至只渲染頁面的 PHP 歸入前端範疇，但不管怎麼說，筆者認為 大前端 是未來的一個趨勢，將最終目標（提升使用者體驗）一致的技術歸類到一起，讓開發者清楚自己的最終目標是什麼，要怎麼做。當然，也正因為這點，作為一個前端工程師，如果你想更好的發展，你應該有更廣的知識面，包括移動端知識、服務端知識。這些知識結合你的前端技術，才能更好地實現優秀的使用者體驗。
拋開大前端，單談前端，從前端架構層面談，最近比較流行的有四個：老牌勁旅 jQuery、最近火得不能再火的 React、Google 精品 Angular 以及 MVVM 框架 Vue。現在幾乎所有的專案都會在這四種架構方案中選擇其一作為基礎，進行業務開發。四種框架，四種不同的思想，簡單來說：jQuery Dom 驅動的思想深入人心；React 則推崇元件化，萬物皆元件；Angular 則把 MVC 在前端領域發揚光大；而 Vue 則是以資料驅動為核心的 MVVM 架構。作為一個前端新人，不可能很快就理解所有知識和思想，只能一步一步來，先把你在工作中所使用的框架理解透徹，再去思考和學習別的。說實話，會用和理解的差距很大。
在這裡，可能會有個疑問，上述四個架構，都很火，但是哪裡涉及到使用者體驗了？是的，這些架構都沒有直接涉及到 UI。但是就像足球，沒有勤奮的訓練和優秀的戰術，再好的11人也踢不出好的比賽一樣，這些架構從開發成本和開發體驗上，降低了開發者編碼和維護的難度，讓其在 UI 的使用者體驗上的付出，事半功倍。當然，框架在編碼體積、執行效率等多個方面影響了最終的使用者體驗。
上面所說的是，當前前端的一大現狀 —— 框架橫行，現在很少有公司、有工程師用純原始的方式擼程式碼了。而前端另一大現狀就是 —— 移動為先。原因很簡單，隨著移動網際網路使用者的暴漲，各個公司的產品都是移動為先，技術跟隨著產品的步伐，也必須移動為先。這時，為了解決多平臺的問題，Hybrid 方案脫穎而出，包括傳統的基於 WebView 的 Hybrid 方案（例如 Cordova）和 React-Native 等一系列技術方案。在這裡我就不多說了，關於移動前端的內容最近充斥著各種技術論壇、交流群、公共號，具體的，大家可以自己親身去了解。
最後，對於現狀，我想大家可能最關心的其實是職業形勢。由於前端的興起，前端人才市場相當活躍，平均薪金水平也是名列前茅。與此同時，前端的技術入門比較容易，造成另一個極端情況：人員氾濫、人才稀缺。這種情況，一方面由於前端發展太快，很難短時間掌握全部知識；另一方面，高等院校並沒有開設專門的前端專業，大家更多是自學，野路子很多。所謂亂世出英雄，這樣的前端大環境或許對一個新入行的同學更有利。當然，在如此『亂世』中，一個好的職業規劃，才能避免『誤入歧途』，保證自身順利地成長。
如何做一個職業規劃
上面講述了前端如何興起和前端的現狀，下面將基於上述兩點，分幾個方面為大家提供一些有關職業規劃的觀點，希望對大家有幫助。
確定方向
做職業規劃的目的是避免迷茫，而避免迷茫最有效的方式就是確定明確的方向和目標。
對於任何一個技術崗位，都有固定的兩個方向：技術專家（架構師）和 開發經理。前者偏重技術，需要你在當前領域鑽研得很深；後者偏向管理，需要你在對技術有很深掌握的同時，可以帶領團隊完成專案的開發。當然，兩者並不是魚與熊掌的關係，你可以同時成為技術專家和開發經理。
對於技術專家和開發經理兩個方向的選擇，更多取決於你自身在工作中多巴胺的分泌情況。當你專研技術時，多巴胺分泌得更多，感到更興奮，或許你會很容易成為技術專家；反之，當你跟團隊一起做業務時，多巴胺分泌得更多，更有獲得感，那麼你可以嘗試向開發經理方向發展。當然，你也可能做什麼都沒有分泌太多的多巴胺，那麼，你可以在嘗試一段時間後，轉型其他職業，例如產品經理。前端作為核心是使用者體驗，與使用者最近的工程師，轉型產品經理，阻礙會小一些。況且，文藝型前端佈道人豆瓣前端負責人張克軍認為，前端工程師正慢慢演變為產品工程師，前端和產品離得確實很近。
當你選擇好一個方向後，你就要朝著這個方向一步一步進發。丹尼爾在《一萬小時天才理論》提出一萬小時定律，即要成為某個領域的專家，需要積累一萬小時。當然這只是個概數，不過每天花更多的時間去學習和實踐，肯定是最有效的。這裡，成為技術專家和開發經理過程中，關注的點略有差別。成長為技術專家，要更多關注技術本身的實現，包括邏輯、架構、設計模式、方法論等；而成長為技術經理，則要更多關注技術開發的過程，考慮如何提高開發效率、降低開發成本、優化開發質量等等。不同的人，精力是有限的，選擇性關注一些必要的方面，對自身快速的成長是很有必要的。
做業務還是做架構
做業務，時間要求比較緊，程式碼質量要求高，可參考的程式碼比較多，業務知識需要學習。做架構，時間稍微自由，對經驗要求比較高，無可參考程式碼，專業基礎知識需要深刻理解；最主要的，做架構的你既是開發，又是使用者，還是 PM ，只有 80% - 90% 的明確目標，並在開發過程中不斷微調最終的目標。
對於一個新人，其實不用糾結，做業務才是好的選擇，而且做 技術含量高、使用流行技術 的業務才是最好的。原因很簡單，架構的最終的目的是解決業務當中的問題，你沒做過業務，哪能知道業務的問題在哪，你都不知道要解決什麼問題，如何做好架構。所以，從業務做起，是新人最好的選擇，也是唯一可行的選擇。而選擇有技術含量、使用流行技術的業務的原因更多在於成長，這樣你的成長可能會更快、成長道路可能會更直。當然，這只是『可能』，不同的人適合不同的業務，所以不要強求一定『技術含量高、使用流行技術』的業務，更多的而是改變自己，去 適應團隊、適應業務，這樣才能 更快地成長。
事實上，很多時候，你會遇到很業務工作很繁重沒有額外時間學習的情況。而如何在這樣環境中更快地成長呢？說白了就是『抄』，不不，是 參考。將學習融入到工作中，是最好的方法。做新專案，參考老專案程式碼；做新需求，參考老需求的程式碼；沒有同型別的程式碼，參考別的業務的程式碼。參考前人的經驗，在巨人的肩膀上，成長才會變得更快。同時，你的導師和你的夥伴，也會在業務中給你指點，幫你快速解決成長路上的問題。
在這裡，總結一下，在繁重的業務環境下快速成長，你需要 很優秀的學習能力、很持久的耐心 以及 很好的導師和夥伴，這樣才能在技術成長的路上事半功倍。
技術的學習
說了半天，到了最核心的問題了，對於一個新人如何學習技術？筆者給的建議是：千萬不要囫圇吞棗，先把當前使用的技術學透用熟，才是最重要的；千萬不要在還沒把當前使用的技術吃透之前，去學新的東西，不管新的東西有多火。就像上文所說，不同的框架，有不同的核心，有不同的思想。兩個框架程式碼相似之處的思想不一定相似，例如 Angular 和 Vue 都有雙向繫結，雖然效果相似，但是實現思想和內部實現方式是截然不同的。還在入門階段的你，會被各種思想充斥頭腦，反而會更不清楚。
一定的時間後，當你理解透一個架構體系後，你可以 類比地去看 更多的架構體系。這時候，你會發現不同架構很多東西都是殊途同歸，理解得很快。
當然，理解透一個架構體系，有人需要一年，有人需要三年，還有人可能需要更長時間。為什麼有這麼大的區別呢？因為有些人在開發中，並不認為完成就可以了，會在開發中，追求程式碼的優美，會不斷優化自己的程式碼，讓自己的程式碼效能更好、可讀性更高，並通過長時間的積累，達到 量變導致質變 的程度。即使一個特別聰明的人，沒有『量』也不可能『質變』的，只不過他的量可能比其他人少而已。
要提醒的一點是，學技術，一定要結合你所在公司、團隊的技術棧。例如，去哪兒前端應屆生會在進入業務線前，進行3個月的脫產培訓，2017年的前端培訓課程內容中涉及的技術主要是 React 和 React Native，而去哪兒業務的技術棧也大多是 React，那麼作為去哪兒的前端應屆生，你優先學習 React 的技術體系是事半功倍的，既有前人可以問，又有專案可以實踐。
當然，在學習架構的同時，不要忽略兩樣最基本的東西，一個是 技術基礎，一個是 開發規範。
技術基礎是一切開發、架構的前提，沒有一個好的基礎，是無法讓你自身的技術水平達到足夠高的維度。例如你對於繼承理解的並不透徹，你很難理解清晰 React 的內部實現。
對於開發規範，筆者在帶應屆生時特別注意讓他們遵守。程式碼規範比比皆是，但是很少有人嚴格遵守。究其原因，多是在程式碼規範制定之前，已經有自己的一套程式碼習慣，很難短時間改變自己的習慣。而應屆生，一般來說程式碼並不多，還沒有形成自己的編碼習慣。這時候，開始遵守一定的規範，會促使他們養成一個較好的編碼習慣，為後續的成長打好基礎。下面，列舉一下開發規範的幾點好處，讓大家明白程式碼規範的重要性：
- 規範的程式碼可以促進團隊合作。
- 規範的程式碼可以減少 Bug 處理。
- 規範的程式碼可以降低維護成本。
- 規範的程式碼有助於程式碼審查。
- 養成程式碼規範的習慣，有助於程式設計師自身的成長。
這部分最後，推薦一些學習技術的好地方，例如情封大大三年不停更的《前端早讀課》、阿里大漠（不是大漠窮秋）的 w3cplus.com、微信公眾號《前端圈》、《前端之巔》、《Node 全棧》，當然還有公司內的 《Qunar 技術沙龍》微信公眾號，筆者所在團隊 YMFE 的部落格 blog.ymfe.org 等，都是學習技術的好地方。
主戰場 —— 移動混合開發
隨著移動浪潮的興起，業務在移動端App 的需求量迅速擴大，應用迭代更新的頻率也隨之極速攀升，但與此同時純 Native 的開發和更新成本成為了業務增長難以逾越的瓶頸。因此，引入一種開發更高效、成本更低的解決方案勢在必行。
在當前的移動網際網路環境下，iOS 和 Android 上的 App 已經成了每個網際網路產品的標配。如果一個使用者端產品並不提供相應 App 版本，幾乎會直接定義成一個不完整的產品。而被網際網路人尊為鐵律的『唯快不破』—— 快速開發、高速迭代、低成本上線，同時也是移動時代每個開發團隊所追求的目標。綜合以上兩點原因，『Native 搭臺，Web 唱戲』的 Hybrid 開發模式，以『快』的特點贏得了大家的青睞，並紛紛投入大量開發力量，使這種開發模式迅速走紅。當前最常見的技術架構方案有以下三種：
- 基於 Web 的 Hybrid 解決方案：例如微信瀏覽器、各公司的 Hybrid 方案
- 非基於 Web UI 但業務邏輯基於 JavaScript 的解決方案：例如 React-Native
- 基於 Web UI，但是為了追求執行效率，對 UI 展現邏輯和業務邏輯的 JavaScript 進行了隔離的解決方案：微信小程式
對於一個前端，筆者感覺每個人必須瞭解這三種常見方案的實現方式和優缺點，這樣才能在開發移動端業務的時候，更為清楚自己所要注意、所要學習的地方。當然，僅僅瞭解實現方式是不夠的，你要有環境去實踐你學習的東西。再拿去哪兒為例，去哪兒現在大多數業務都是移動端的，Hybrid 和 RN 方案都在被使用。所以，作為一個應屆生，你很有可能去做一些 Hybrid 或者 RN 的專案。做 Hybrid 專案時，你更多要考慮的是『如何高效地操作 Dom』；反之，做 RN 專案，你更多要考慮的則是『如何減少和 Native 的通訊』。這兩點，最終都會反應在專案的使用者體驗上。
前端中的『另類』—— Node
對於 Node，作為一個前端，應該並不陌生。Node 最大的賣點在於完全非同步的 I/O 模型，相比於阻塞 I/O ，非同步 I/O 模型極大提高 Web 服務的併發性。因此，前端都可以自己開發服務端了？
這樣認為的同學，筆者只能說，你想多了。Node 是可以開發服務端，但是不代表所有前端都可以使用 Node 去開發一個龐大業務的服務端。你去知乎搜尋使用 Node 開發服務端的相關問題，一部分人會說 Node 不能替代之前的服務端語言，另一部分人會說什麼也阻擋不了 Node 在服務端的腳步；同時有很多諸如 Paypal、阿里這樣大公司大規模使用 Node，也很多公司在落入 Node 深坑而不起。不論爭論如何，筆者認為，Node 是否能寫服務端，主要在於使用 Node 的人是否有服務端的思想。開發服務端和開發前端是完全不同的思想，服務端更注重效率、更注重穩定、更注重高併發情況下資料的處理，用前端的思想去開發服務端顯然是不行的。當然，成功的案例中，Node 也更多運用在頁面渲染這一層，配合前端更快的渲染頁面，提高使用者體驗；而複雜的資料邏輯，還是用傳統的服務端語言進行開發，畢竟技術成熟、運維成本低。
這裡，會出現一個問題，我只是前端，需不需要去學習 Node？筆者的答案是 需要。前端興起已經很多年，已經從游擊隊亂槍打鳥的階段逐漸變為規模化、工程化的時代。在這個時代中，尤其是在工具和流程方面，Node 起到了很大的作用，扮演很重要的角色。諸如 Webpack、Gulp、NPM 這些工具，他們被運用在各個公司的各類前端專案中。學習 Node 其實就是去學習前端的工具，去學習前端的工程化。
當然，如果你立志是全棧，或者想做服務端的一些工作，再或者想通過 Node 學習服務端的技術和原理，都可以去學習 Node。請相信筆者，你不會失望的。
前端一直在『造輪子』中不斷前進
造輪子 的意義是重新實現已有的功能，以達到更好的效果。這個詞語，常見於技術圈，尤其是前端圈，逐漸被人貶義地用來『嘲諷』一個重新實現已有功能的工具、框架以及方案。那麼，造輪子究竟是怎樣一種行為？
首先，筆者並不排斥造輪子，至少有一位大神造輪子造得很成功，那就是 Linus Torvalds。Minix 不好用，就造了一個 Linux；Bitkeeper 停止授權，就造了一個 Git。並且兩個新『輪子』已經成為世界上最好的輪子之二。這種創造性的造輪子，是令人讚賞的。
其次，不同的技術體系，互相學習，參考對方的思想，造自己的輪子，也是一個非常好的想法。尤其是前端，它通過學習其他語言、體系的架構方案，豐富自身，短短几年就上升到很高的高度。可以舉得列子很多：例如 Angular 的 MVC + DI + IoC 的模式，很多人會直接想到 Java 的 Spring，甚至 Angular 也包含 AOP 的程式設計思想；再例如 MVVM 雙向資料流的模式，本身就是微軟的 WPF 首先提出的。輪子可以造，對開發有意義即可。
最後，大家 反感造輪子，其實更多在於反感造一個沒有任何創新的輪子，還天天到處宣揚自己的產物。你可以自己造一個沒有任何創新的輪子，用來學習造輪子的過程，同時這也是深入輪子最好的方式，沒有之一。當你瞭解當前輪子的根本構造之後，你就能在這個基礎上進行更多的創新。
其他方面的學習
作為一個前端，最該學習的兩個方面是 產品 和 設計 。學習產品思維，會幫助你從使用者的角度審查你開發的產品，找出使用者體驗不優、互動不好的地方；而學習設計，則幫助你分析不優的地方的原因，並找出解決方案。當然，每個人的精力有限，不可能把這兩個方面學得特別深，但最好都要有接觸，有一定深度的學習。
小總結
前文並沒有直接跟大家說明怎麼做職業規劃，而是從發展方向、技術學習、主要業務場景、NodeJS、造輪子問題等多個方面，來給大家分析：作為前端，哪些需要做、哪些不需要做、哪些必須做、哪些可以做。大家可以根據自己的興趣、能力等特性，並且和自己在公司所做的專案結合，決定做哪些、不做哪些、強制自己做哪些、有空餘時間做哪些等等類似的決定。這裡可以舉個例子，例如：我的目標是成為一個技術專家，因此，我要深植業務一到兩年，嚴格控制自己的程式碼規範，深入瞭解 React 體系，在移動端主攻 React Native，而且有時間看 Node 及 Babel 相關工具，目標是徹底理解 React 的技術實現和 Web Component 的開發思想。當你有這樣一個目標時，你可以清楚知道自己做事的目的，可以清晰看到自己的成長。
要注意的是，如果你已經有工作的話，你的職業規劃絕對不能脫離你現在的工作。實踐出真知，工作帶給你的實踐環境，才是你成長的營養來源。
前端的未來
對於前端的未來，或者說是網際網路技術的未來，我比較認同阮一峰老師的一個觀點：將來程式設計師只分為兩類，端工程師 和 雲工程師。端工程師，直面使用者，為了使用者能更好使用產品而殫精竭慮，包括傳統的前端、Native、AR/VR、TV 端開發等；而云工程師，直面資料，將冰冷冷的資料轉化為與使用者息息相關的產品，包括分散式、大資料、機器學習等等。
前端不管演變成什麼，它所關注的永遠是 使用者體驗，只不過端增加了，開發的方式也增多了而已。作為一個前端工程師，要時時關注業界動態，更多地學習新技術，提升自己的實力，來適應更大的挑戰。
寫在最後
作為一個初入前端圈的新人，你或許對上面描述的東西並不完全理解，這沒有任何問題。做一個適合自己的職業規劃，並不急於一時，其實最好是在工作一段時間後，和你的 leader 或者夥伴們一起對自己做一個評估，並根據前面所講，給自己制定一個適合自身情況、符合自身興趣的職業規劃，並按照規劃一步步不斷提高自己，向前方的成功邁進。
筆者真心希望這篇文章可以給正在迷茫的你些許幫助。年輕且精力旺盛的前端領域，還沒有形成像後端那樣多的實施標準和最佳實踐，每個人都可能有不同的思維、不同的思路。本文僅是筆者個人觀點和看法，有錯誤或者疏漏之處，敬請諒解。同時也歡迎私下和筆者進行更深層次的探討。
最後，送給大家 PHP核心開發者『鳥哥』惠新宸 在近日微博上更新的一句話：
