05月13, 2016
寫給想成為前端工程師的同學們
前端工程師是做什么的？
[圖片上傳失敗...(image-d565d3-1549090858745)]
前端工程師是互聯(lián)網(wǎng)時代軟件產(chǎn)品研發(fā)中不可缺少的一種專業(yè)研發(fā)角色。從狹義上講，前端工程師使用 HTML、CSS亏掀、JavaScript 等專業(yè)技能和工具將產(chǎn)品UI設計稿實現(xiàn)成網(wǎng)站產(chǎn)品忱反，涵蓋用戶PC端、移動端網(wǎng)頁幌氮，處理視覺和交互問題缭受。從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分该互，都是前端工程師的專業(yè)領域米者。
2005年的時候大多數(shù)網(wǎng)頁長這樣：
[圖片上傳失敗...(image-c15ad8-1549090858745)]
現(xiàn)在的網(wǎng)頁一般是這樣的：
前端工程師的發(fā)展之路和前景是怎么樣的？
前端是一個相對比較新的行業(yè)宇智，互聯(lián)網(wǎng)發(fā)展早期（1995年~2005年）是沒有專業(yè)的前端工程師的蔓搞。隨著互聯(lián)網(wǎng)的發(fā)展，大約從2005年開始随橘，正式的前端工程師角色被行業(yè)認可喂分，到了2010年，互聯(lián)網(wǎng)開始全面進入移動時代机蔗，前端工程師的地位越來越重要蒲祈，前端領域的技術(shù)發(fā)展也越來越快，各種新的思想萝嘁、設計模式梆掸、工具和平臺都快速發(fā)展，對前端工程師的技能要求也越來越高牙言。
有一些數(shù)據(jù)可以說明前端行業(yè)的發(fā)展迅速酸钦。
- 在2010年之后最流行的新編程語言中有相當部分和前端有關(guān)，比如 Dart咱枉、Clojure卑硫、CoffeeScript 和 TypeScript。
- 作為前端最重要的編程語言 JavaScript蚕断，在最近幾年里不論是代碼量還是關(guān)注數(shù)都穩(wěn)居 Github 平臺熱門編程語言榜欢伏。
- 行業(yè)對前端需求量持續(xù)增加，前端程序員薪水在行業(yè)里面處于較領先的位置基括。
近年來最流行的編程語言很多都是JavaScript替代語言
[圖片上傳失敗...(image-a29d2f-1549090858745)]
JavaScript在最熱編程語言 TOP10
近幾年互聯(lián)網(wǎng)公司前端團隊每年擴張一倍
JavaScript工程師平均薪水排名在程序語言工程師收入前10
前端工程師需要什么樣的知識和技能颜懊？
有人說前端工程師的技術(shù)棧是這樣的：
[圖片上傳失敗...(image-605e24-1549090858745)]
還有人說是這樣的：
[圖片上傳失敗...(image-a7105f-1549090858745)]
實際上前端工程師最核心的技能還是：
在一個典型的互聯(lián)網(wǎng)公司的產(chǎn)品研發(fā)流程中，前端工程師和其他角色的關(guān)系大致上是這樣的：
[圖片上傳失敗...(image-8c1a4c-1549090858745)]
前端是最接近產(chǎn)品和設計的工程師风皿，起到銜接產(chǎn)品和技術(shù)的作用河爹，前端為用戶可以看到的部分負責，所以也是最接近用戶的工程師桐款。
在多終端的時代咸这，如果一個產(chǎn)品同時支持PC、移動端魔眨，前端工程師還需要和更多的角色打交道：
[圖片上傳失敗...(image-5bf58f-1549090858745)]
JavaScript 對于前端是最重要的技能媳维，所以優(yōu)秀的前端工程師要有扎實的JavaScript基本功酿雪。而JavaScript這門編程語言也是目前程序設計領域炙手可熱的寵兒，如今的它不僅僅只是用來開發(fā)Web侄刽，還可以用在各個方面指黎。
JavaScript 可以用在“樹莓派”這類智能硬件芯片開發(fā)
前端工程師也是軟件工程師，所以軟件工程師的基礎知識也是非常重要的州丹，這些基礎知識包括：
- 數(shù)學
- 計算機體系
- 操作系統(tǒng)
- 數(shù)據(jù)結(jié)構(gòu)和算法
- 編譯原理
HTML和CSS也是前端工程師非常重要的基本功醋安，很多同學，尤其是喜歡寫代碼的同學容易忽視 Markup Language墓毒，實際上 ML 也是 UI 相關(guān)的領域里面很重要的內(nèi)容吓揪，不應該被忽視。
有同學問說：“前端工作需求很多所计，老是改來改去柠辞，實際的技術(shù)點并沒有多少，產(chǎn)品決定業(yè)務邏輯主胧，從事底層基礎服務會不會更有挑戰(zhàn)和職業(yè)未來叭首？”
的確，越貼近業(yè)務和產(chǎn)品層面上的工作踪栋，需求差異性越大放棒，可能改動越頻繁。不僅僅是前端改來改去己英，PHP服務端做業(yè)務的同學也面臨這樣的問題，業(yè)務邏輯改來改去吴旋。越底層通用性越強损肛，改動相對較少。
不過事情都是有兩面性的荣瑟，首先可以這么想想治拿，是底層基礎服務的市場大還是互聯(lián)網(wǎng)業(yè)務和產(chǎn)品的市場大。其次笆焰，基礎服務的通用性很容易達成劫谅，而產(chǎn)品層面上如何通用化，如何在業(yè)務驅(qū)動的產(chǎn)品研發(fā)中利用工程化和工具化提升開發(fā)效率嚷掠，這其實是一個很難的問題捏检。豐富的互聯(lián)網(wǎng)產(chǎn)品已改變和正在改變著我們的生活，然而作為產(chǎn)品的創(chuàng)造者不皆，工程師們怎樣讓自己過得更好贯城，這個領域值得研究。
另外霹娄，不要覺得實際的技術(shù)點沒有多少能犯，舉幾個例子：實現(xiàn)曲線和曲面動畫鲫骗，計算地圖的最短路徑，讓png靜態(tài)圖片類似于gif圖一樣做局部的運動踩晶，抽獎游戲执泰，物理效果的HTML5游戲，3D圖表渡蜻，增強現(xiàn)實的WebGL視頻流處理等等术吝，這些都是在前端領域中遇到的實際問題。
就 JavaScript 來說晴楔，在實際項目中設計最合適的模型高效率解決現(xiàn)實問題本身就很有挑戰(zhàn)顿苇。作為一種典型的新生代編程語言，JavaScript 特性豐富税弃，使用靈活纪岁，性能優(yōu)良。面向?qū)ο笤蚬⒑瘮?shù)式編程幔翰、各種設計模式、MVC 和 MVVM西壮，這些本身就有足夠的吸引力遗增。
前端要解決界面和交互問題，實際上UI層面上的問題一直是軟件工程方面的一個難題款青，因為UI不停地在變化做修。瀏覽器各個版本的兼容性、Web 標準抡草、移動設備饰及、多終端適配，給了前端工程師很大的挑戰(zhàn)康震，對前端工程師的能力也有很高的要求燎含。許多UI問題有不只一種解決方法，許多問題有非常巧妙的思路和精彩的解決辦法腿短，前端在工程師群體里是屬于非常有創(chuàng)造力的一個群體屏箍，因為這個行業(yè)需要豐富的創(chuàng)造力和想象力。
前端工程師還是Web標準的制定者橘忱、實踐者和推動者赴魁，而現(xiàn)在的W3C標準不僅僅局限于瀏覽器，還包括各種手持智能設備鹦付，車載設備尚粘、智能家居等等。在未來萬物互聯(lián)的時代敲长，前端將不僅僅是網(wǎng)頁上的工程師郎嫁，而是所有人機交互領域的工程師秉继。
前端工程師的學習和成長
前端領域發(fā)展很快，各種新技術(shù)新思想不斷涌現(xiàn)泽铛，這是一個好現(xiàn)象尚辑。但是前端發(fā)展太快也帶來一些問題，比如有同學就問到我究竟應該學些什么盔腔，Angular.js杠茬、React、Node.js弛随、ES6瓢喉、ES7、CoffeeScript舀透、TypeScript……似乎永遠有太多東西需要學習栓票，有些東西好像還沒學明白就被另一些新的技術(shù)取代而“過時了”。
其實還是那句話愕够，前端工程師首先是軟件工程師走贪，基礎是最重要的，如果基礎不扎實惑芭，一切應用技能就都是“浮云”坠狡。前端的基礎是什么？HTML遂跟、CSS逃沿、JavaScript基本功，數(shù)學幻锁、算法感挥、數(shù)據(jù)結(jié)構(gòu)、操作系統(tǒng)越败、編譯原理基本功。
一個優(yōu)秀的前端工程師必須要有自己擅長的領域硼瓣，并且鉆研得足夠深入究飞，同時要有眼界，能“跨界”堂鲤∫诟担可以以前端作為職業(yè)，但千萬不要把自己的技能限制在前端領域瘟栖，因為有很多東西葵擎，只有站在前端之外，才能看得更清晰半哟，更透徹酬滤。
學東西千萬別盲目跟風签餐，大家都在談AngularJS就立即跑去學習，過幾天大家都談React了盯串，就又放下AngularJS去學習React氯檐。前端領域知識點很多，值得學的東西也很多体捏，聰明的同學懂得花時間學習成體系的知識并且研究得足夠深入冠摄，因為只有這樣才能從中總結(jié)出規(guī)律，形成方法論几缭，這樣才能最大化學習的價值河泳。
[圖片上傳失敗...(image-5458ed-1549090858745)]
知識的正確用法 —— 一個領域里面的大師永遠不會是另一個類似領域的菜鳥
這次前端星計劃布置的一個實現(xiàn)帶有農(nóng)歷和節(jié)氣的萬年歷，有些同學卡在農(nóng)歷計算上年栓，大約70%的同學懂得去網(wǎng)上找代碼拆挥，但只有不到1%的同學真正弄明白農(nóng)歷計算的原理。
在面試的時候韵洋，面試官問到如何做前端性能優(yōu)化竿刁，有的同學能夠拿雅虎的性能優(yōu)化軍規(guī)回答得頭頭是道，反復強調(diào)使用工具壓縮靜態(tài)資源搪缨，但是自己搭建的博客的nginx服務卻沒有開啟gzip食拜。都知道說要合并靜態(tài)資源，要減少HTTP請求副编，然而為什么要減少HTTP請求负甸，減少請求之后預計能改善多少性能，獲得多少收益呢痹届？需要弄明白這些問題呻待，也需要深入了解HTTP協(xié)議本身。
還有一個更有趣的問題队腐，大家都說寫HTML的關(guān)鍵是語義化蚕捉，那么到底什么是語義化呢？這個問題難住了不少同學柴淘。標簽要符合語義迫淹，這個答案看似簡單標準，但什么樣的標簽才是符合語義为严？強調(diào)用 strong 不用 b敛熬？那如果有個外星文明，它們的語言里 strong 相當于地球的 bold第股，bold 相當于地球的 strong应民，那么它們究竟該用 strong 還是用 b？我們說 i 標簽是斜體的意思，那為什么 fontawesome.io 拿它做 icon font 的標簽诲锹，這是不是“反語義”的繁仁？
過去很多地方農(nóng)村有一種民間的染坊，制作染布的染料辕狰。這種染房里面有一口很大的鐵缸改备，通常都要有一個身體非常強壯的工人拿一根很長的鐵棒在染缸里面用力地敲擊，敲得越響蔓倍，制作出來的染料顏色越鮮艷悬钳。 為什么越用力敲打鐵缸染料就越好？染坊的人說這是祖祖輩輩傳下來的經(jīng)驗偶翅，而事實上也是如此默勾，真的染料的顏色和敲打用力有很大關(guān)系。直到有一天聚谁，一位從村里走出去學化學的大學生母剥，弄明白了原來只需要在染料中加適當比例的鐵屑，就能讓染料和含鐵元素氧化物產(chǎn)生化學反應而變得更鮮艷形导。原來祖祖輩輩傳下來的“儀式”實際上在真實原理面前只是一種信仰和宗教环疼。同樣，如果我們不去了解技術(shù)的本質(zhì)而止步于應用朵耕，那么我們就只是技術(shù)宗教的信徒炫隶。所以在周愛民老師的《JavaScript 語言精髓與編程實踐》中說，計算機語言如同祭司手中的神杖阎曹，神杖換了伪阶，祭司還是祭司，世人還是會把頭叩得山響处嫌。祭司掌握了與神交流的方法栅贴，而世人只看見了神杖。
由興趣選擇前端
在我學程序設計的最初熏迹，我學習的是C語言檐薯，然而整整一本書除了教我如何在黑洞洞的控制臺上輸出 Hello World 和各種其他字符或者用鍵盤輸入一些什么然后依然是字符輸出外，就沒有什么其他的內(nèi)容了注暗。學習了一段時間之后厨剪，我的內(nèi)心一度是崩潰的，因為我覺得這和我想得不一樣友存，學了那么多知識，我都不知道自己究竟算不算是“學會”了C語言陶衅，因為在我看來屡立，那些豐富多彩的操作系統(tǒng)和各種應用軟件和黑洞洞的控制臺之間明顯還有著非常巨大的鴻溝。
事后回想起來，當時的想法當然是幼稚可笑的膨俐，那時候的我并不知道程序語言和運行環(huán)境之間的區(qū)別勇皇，對操作系統(tǒng)、用戶API焚刺、硬件接口敛摘、網(wǎng)絡服務等等都完全不了解。然而這并不能怪我乳愉，因為C語言的教程并沒有任何一言半語來告訴我這一點兄淫，我也不知道學習了C語言的語法之后接下來還應該學習些什么。
相對來說蔓姚，Web開發(fā)更吸引我捕虽，因為不需要安裝任何環(huán)境，只需要在文本編輯器里面輸入一些字符坡脐，保存后打開瀏覽器泄私，馬上就能看到豐富的視覺效果，這就是前端的優(yōu)勢备闲，你所做的努力立即就能看得見晌端。
相對于死板的輸入輸出，Web開發(fā)在界面可見的一層要豐富多彩得多恬砂，這一點吸引了我咧纠，如果這一點也能吸引你，讓你著迷觉既，那么你就適合學習前端惧盹。
在選擇前端作為職業(yè)之前，要明確判斷自己對前端開發(fā)的確感興趣瞪讼，選擇做前端钧椰，應該是確認自己喜歡和適合做前端，而不是為了一份看起來體面而且薪水不菲的工作符欠。如果你對構(gòu)建豐富多彩的界面嫡霞、處理各種交互邏輯不感興趣，甚至厭煩希柿，那么最明智的選擇是放棄成為前端工程師的想法 —— 因為選擇一個自己不喜歡的職業(yè)诊沪，為之忍受數(shù)十年直到退休，實在是一件很悲催的事情曾撤。
對在校學生端姚，我們看重哪方面能力？
有同學問挤悉，360前端是否一定要求實際經(jīng)驗的學生渐裸，在這里我可以回答：否。
對于學生，我們比較關(guān)心的是：
- 基礎：包括數(shù)學昏鹃、算法尚氛、數(shù)據(jù)結(jié)構(gòu)、計算機相關(guān)基礎的掌握洞渤。
- 學習能力和學習方法：如何學的前端阅嘶，學了多久，學到什么程度载迄，遇到過什么問題讯柔，是如何嘗試解決這些問題。
- 興趣：對前端的興趣如何宪巨，這一點可以體現(xiàn)在很多細節(jié)上磷杏。有一個反面的例子比較常見，一般來說我會問學生最近在關(guān)注什么前端新知識捏卓，有的學生會說我關(guān)注某某某极祸，但當我再問他究竟關(guān)注到什么程度虽另，會發(fā)現(xiàn)他實際上根本沒有在這項新知識上花費多少時間蹬刷。如果你對感興趣的問題都不花費時間，如何證明你自己對前端的“興趣”呢睛驳。
- 解決問題的能力：遇到難題如何解決的蒜田，遇到?jīng)]接觸過的問題是如何思考和最終解決的稿械。從這里可以判斷出同學有沒有前端思維，這些問題沒有標準答案冲粤，我們不追求某些“官方思路”美莫，看重過程而不是結(jié)果。
關(guān)于簡歷梯捕，有同學提到說現(xiàn)在似乎很多公司都希望學生會點 Node.js厢呵，會點 React，我自己不會該怎么辦傀顾。
我想說的是襟铭，我們并不要求學生必須會這些。相反短曾，我個人更鼓勵學生利用時間打好基礎寒砖。簡歷上寫自己真正擅長的內(nèi)容即可，我們不會因為在你的簡歷上看不到 Node.js 或者 React 就忽略你嫉拐。只要你真心熱愛前端并用心學了哩都，你應該明白如何用前端基礎來打動我。有的學生喜歡在簡歷上堆砌詞匯婉徘，實際上這一點不見得好漠嵌，因為如果你寫了一個你自己一知半解的東西璃赡，最后在面試中被面到了，一定會得負分的献雅。
技術(shù)本身是有深度的，A 同學說“我知道React但沒用它做過東西”塌计， B 同學說“我用AngularJS寫過一些個人的小項目”挺身， C 同學說“我上個月使用彈性布局的思路來寫我的博客，結(jié)果在Android系統(tǒng)4.1版本的Webkit瀏覽器下出現(xiàn)了一個顯示bug锌仅，最后我是這樣這樣解決的”章钾。你們說 A、B热芹、C 三個同學我們會選擇哪個同學贱傀？
面試是一個彼此交流的過程，我們希望看到大家在前端領域的能力和潛力伊脓，“知道”一件事府寒，并不是一種有價值的能力，尤其是在知識廉價的互聯(lián)網(wǎng)時代报腔。我們的同學千萬不要像背書一樣去死記硬背一樣東西株搔，而應該真正用心去學。我們的高等學校不僅僅教授大家知識纯蛾，還有如何真正學習和做研究纤房，不是嗎？
如果你對前端真的感興趣并有潛力翻诉，花點小心思炮姨，你該知道如何學習它。
最后碰煌，祝愿大家都能成為優(yōu)秀的前端工程師舒岸。
