月影談:寫給想成為前端工程師的同學(xué)們【轉(zhuǎn)】

2016-10-13 10:50:9 | 作者：sw996 | 0個(gè)評論 | 人瀏覽

??編者按：本文由360副總監(jiān)、奇舞團(tuán)負(fù)責(zé)人月影編寫，文中解釋了什么是前端工程師，前端工程師的發(fā)展之路、前景、需要的知識體系、以前前端工程師的學(xué)習(xí)與成長等內(nèi)容，在最后，還提到了關(guān)于在校大學(xué)生學(xué)習(xí)前端的一些看法。

　　前端工程師是做什么的？

　　

　　前端工程師是互聯(lián)網(wǎng)時(shí)代軟件產(chǎn)品研發(fā)中不可缺少的一種專業(yè)研發(fā)角色。從狹義上講，前端工程師使用 HTML、CSS、Java 等專業(yè)技能和工具將產(chǎn)品UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動端網(wǎng)頁，處理視覺和交互問題。從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分，都是前端工程師的專業(yè)領(lǐng)域。

　　2005年的時(shí)候大多數(shù)網(wǎng)頁長這樣：

　　

　　現(xiàn)在的網(wǎng)頁一般是這樣的：

　　

　　前端工程師的發(fā)展之路和前景是怎么樣的？

　　前端是一個(gè)相對比較新的行業(yè)，互聯(lián)網(wǎng)發(fā)展早期（1995年~2005年）是沒有專業(yè)的前端工程師的。隨著互聯(lián)網(wǎng)的發(fā)展，大約從2005年開始，正式的前端工程師角色被行業(yè)認(rèn)可，到了2010年，互聯(lián)網(wǎng)開始全面進(jìn)入移動時(shí)代，前端工程師的地位越來越重要，前端領(lǐng)域的技術(shù)發(fā)展也越來越快，各種新的思想、設(shè)計(jì)模式、工具和平臺都快速發(fā)展，對前端工程師的技能要求也越來越高。

　　有一些數(shù)據(jù)可以說明前端行業(yè)的發(fā)展迅速：

　　在2010年之后最流行的新編程語言中有相當(dāng)部分和前端有關(guān)，比如 Dart、Clojure、Coffee 和 Type。

　　作為前端最重要的編程語言 Java，在最近幾年里不論是代碼量還是關(guān)注數(shù)都穩(wěn)居 Github 平臺熱門編程語言榜。

　　行業(yè)對前端需求量持續(xù)增加，前端程序員薪水在行業(yè)里面處于較領(lǐng)先的位置。

　　

　　近年來最流行的編程語言很多都是Java替代語言

　　

　　Java在最熱編程語言 TOP10

　　

　　近幾年互聯(lián)網(wǎng)公司前端團(tuán)隊(duì)每年擴(kuò)張一倍

　　

　　Java工程師平均薪水排名在程序語言工程師收入前10

　　前端工程師需要什么樣的知識和技能？

　　有人說前端工程師的技術(shù)棧是這樣的：

　　

　　還有人說是這樣的：

　　

　　實(shí)際上前端工程師最核心的技能還是：

　　

　　在一個(gè)典型的互聯(lián)網(wǎng)公司的產(chǎn)品研發(fā)流程中，前端工程師和其他角色的關(guān)系大致上是這樣的：

　　

　　前端是最接近產(chǎn)品和設(shè)計(jì)的工程師，起到銜接產(chǎn)品和技術(shù)的作用，前端為用戶可以看到的部分負(fù)責(zé)，所以也是最接近用戶的工程師。

　　在多終端的時(shí)代，如果一個(gè)產(chǎn)品同時(shí)支持PC、移動端，前端工程師還需要和更多的角色打交道：

　　

　　Java 對于前端是最重要的技能，所以優(yōu)秀的前端工程師要有扎實(shí)的Java基本功。而Java這門編程語言也是目前程序設(shè)計(jì)領(lǐng)域炙手可熱的寵兒，如今的它不僅僅只是用來開發(fā)Web，還可以用在各個(gè)方面。

　　

　　Java 可以用在“樹莓派”這類智能硬件芯片開發(fā)

　　前端工程師也是軟件工程師，所以軟件工程師的基礎(chǔ)知識也是非常重要的，這些基礎(chǔ)知識包括：

　　數(shù)學(xué)

　　計(jì)算機(jī)體系

　　操作系統(tǒng)

　　數(shù)據(jù)結(jié)構(gòu)和算法

　　編譯原理

　　HTML和CSS也是前端工程師非常重要的基本功，很多同學(xué)，尤其是喜歡寫代碼的同學(xué)容易忽視 Markup Language，實(shí)際上 ML 也是 UI 相關(guān)的領(lǐng)域里面很重要的內(nèi)容，不應(yīng)該被忽視。

　　HTML: The Living Standard

　　HTML & CSS

　　有同學(xué)問說：“前端工作需求很多，老是改來改去，實(shí)際的技術(shù)點(diǎn)并沒有多少，產(chǎn)品決定業(yè)務(wù)邏輯，從事底層基礎(chǔ)服務(wù)會不會更有挑戰(zhàn)和職業(yè)未來？”

　　的確，越貼近業(yè)務(wù)和產(chǎn)品層面上的工作，需求差異性越大，可能改動越頻繁。不僅僅是前端改來改去，PHP服務(wù)端做業(yè)務(wù)的同學(xué)也面臨這樣的問題，業(yè)務(wù)邏輯改來改去。越底層通用性越強(qiáng)，改動相對較少。

　　不過事情都是有兩面性的，首先可以這么想想，是底層基礎(chǔ)服務(wù)的市場大還是互聯(lián)網(wǎng)業(yè)務(wù)和產(chǎn)品的市場大。其次，基礎(chǔ)服務(wù)的通用性很容易達(dá)成，而產(chǎn)品層面上如何通用化，如何在業(yè)務(wù)驅(qū)動的產(chǎn)品研發(fā)中利用工程化和工具化提升開發(fā)效率，這其實(shí)是一個(gè)很難的問題。豐富的互聯(lián)網(wǎng)產(chǎn)品已改變和正在改變著我們的生活，然而作為產(chǎn)品的創(chuàng)造者，工程師們怎樣讓自己過得更好，這個(gè)領(lǐng)域值得研究。

　　另外，不要覺得實(shí)際的技術(shù)點(diǎn)沒有多少，舉幾個(gè)例子：實(shí)現(xiàn)曲線和曲面動畫，計(jì)算地圖的最短路徑，讓png靜態(tài)圖片類似于gif圖一樣做局部的運(yùn)動，抽獎游戲，物理效果的HTML5游戲，3D圖表，增強(qiáng)現(xiàn)實(shí)的WebGL視頻流處理等等，這些都是在前端領(lǐng)域中遇到的實(shí)際問題。

　　就 Java 來說，在實(shí)際項(xiàng)目中設(shè)計(jì)最合適的模型高效率解決現(xiàn)實(shí)問題本身就很有挑戰(zhàn)。作為一種典型的新生代編程語言，Java 特性豐富，使用靈活，性能優(yōu)良。面向?qū)ο蟆⒑瘮?shù)式編程、各種設(shè)計(jì)模式、MVC 和 MVVM，這些本身就有足夠的吸引力。

　　前端要解決界面和交互問題，實(shí)際上UI層面上的問題一直是軟件工程方面的一個(gè)難題，因?yàn)閁I不停地在變化。瀏覽器各個(gè)版本的兼容性、Web 標(biāo)準(zhǔn)、移動設(shè)備、多終端適配，給了前端工程師很大的挑戰(zhàn)，對前端工程師的能力也有很高的要求。許多UI問題有不只一種解決方法，許多問題有非常巧妙的思路和精彩的解決辦法，前端在工程師群體里是屬于非常有創(chuàng)造力的一個(gè)群體，因?yàn)檫@個(gè)行業(yè)需要豐富的創(chuàng)造力和想象力。

　　前端工程師還是Web標(biāo)準(zhǔn)的制定者、實(shí)踐者和推動者，而現(xiàn)在的W3C標(biāo)準(zhǔn)不僅僅局限于瀏覽器，還包括各種手持智能設(shè)備，車載設(shè)備、智能家居等等。在未來萬物互聯(lián)的時(shí)代，前端將不僅僅是網(wǎng)頁上的工程師，而是所有人機(jī)交互領(lǐng)域的工程師。

　　前端工程師的學(xué)習(xí)和成長

　　前端領(lǐng)域發(fā)展很快，各種新技術(shù)新思想不斷涌現(xiàn)，這是一個(gè)好現(xiàn)象。但是前端發(fā)展太快也帶來一些問題，比如有同學(xué)就問到我究竟應(yīng)該學(xué)些什么，Angular.js、React、Node.js、ES6、ES7、Coffee、Type……似乎永遠(yuǎn)有太多東西需要學(xué)習(xí)，有些東西好像還沒學(xué)明白就被另一些新的技術(shù)取代而“過時(shí)了”。

　　其實(shí)還是那句話，前端工程師首先是軟件工程師，基礎(chǔ)是最重要的，如果基礎(chǔ)不扎實(shí)，一切應(yīng)用技能就都是“浮云”。前端的基礎(chǔ)是什么？HTML、CSS、Java基本功，數(shù)學(xué)、算法、數(shù)據(jù)結(jié)構(gòu)、操作系統(tǒng)、編譯原理基本功。

　　一個(gè)優(yōu)秀的前端工程師必須要有自己擅長的領(lǐng)域，并且鉆研得足夠深入，同時(shí)要有眼界，能“跨界”。可以以前端作為職業(yè)，但千萬不要把自己的技能限制在前端領(lǐng)域，因?yàn)橛泻芏鄸|西，只有站在前端之外，才能看得更清晰，更透徹。

　　學(xué)東西千萬別盲目跟風(fēng)，大家都在談AngularJS就立即跑去學(xué)習(xí)，過幾天大家都談React了，就又放下AngularJS去學(xué)習(xí)React。前端領(lǐng)域知識點(diǎn)很多，值得學(xué)的東西也很多，聰明的同學(xué)懂得花時(shí)間學(xué)習(xí)成體系的知識并且研究得足夠深入，因?yàn)橹挥羞@樣才能從中總結(jié)出規(guī)律，形成方法論，這樣才能最大化學(xué)習(xí)的價(jià)值。

　　

　　知識的正確用法 —— 一個(gè)領(lǐng)域里面的大師永遠(yuǎn)不會是另一個(gè)類似領(lǐng)域的菜鳥

　　這次前端星計(jì)劃布置的一個(gè)實(shí)現(xiàn)帶有農(nóng)歷和節(jié)氣的萬年歷，有些同學(xué)卡在農(nóng)歷計(jì)算上，大約70%的同學(xué)懂得去網(wǎng)上找代碼，但只有不到1%的同學(xué)真正弄明白農(nóng)歷計(jì)算的原理。

　　在面試的時(shí)候，面試官問到如何做前端性能優(yōu)化，有的同學(xué)能夠拿雅虎的性能優(yōu)化軍規(guī)回答得頭頭是道，反復(fù)強(qiáng)調(diào)使用工具壓縮靜態(tài)資源，但是自己搭建的博客的nginx服務(wù)卻沒有開啟gzip。都知道說要合并靜態(tài)資源，要減少HTTP請求，然而為什么要減少HTTP請求，減少請求之后預(yù)計(jì)能改善多少性能，獲得多少收益呢？需要弄明白這些問題，也需要深入了解HTTP協(xié)議本身。

　　還有一個(gè)更有趣的問題，大家都說寫HTML的關(guān)鍵是語義化，那么到底什么是語義化呢？這個(gè)問題難住了不少同學(xué)。標(biāo)簽要符合語義，這個(gè)答案看似簡單標(biāo)準(zhǔn)，但什么樣的標(biāo)簽才是符合語義？強(qiáng)調(diào)用 strong 不用 b？那如果有個(gè)外星文明，它們的語言里 strong 相當(dāng)于地球的 bold，bold 相當(dāng)于地球的 strong，那么它們究竟該用 strong 還是用 b？我們說 i 標(biāo)簽是斜體的意思，那為什么 fontawesome.io 拿它做 icon font 的標(biāo)簽，這是不是“反語義”的？

　　過去很多地方農(nóng)村有一種民間的染坊，制作染布的染料。這種染房里面有一口很大的鐵缸，通常都要有一個(gè)身體非常強(qiáng)壯的工人拿一根很長的鐵棒在染缸里面用力地敲擊，敲得越響，制作出來的染料顏色越鮮艷。 為什么越用力敲打鐵缸染料就越好？染坊的人說這是祖祖輩輩傳下來的經(jīng)驗(yàn)，而事實(shí)上也是如此，真的染料的顏色和敲打用力有很大關(guān)系。直到有一天，一位從村里走出去學(xué)化學(xué)的大學(xué)生，弄明白了原來只需要在染料中加適當(dāng)比例的鐵屑，就能讓染料和含鐵元素氧化物產(chǎn)生化學(xué)反應(yīng)而變得更鮮艷。原來祖祖輩輩傳下來的“儀式”實(shí)際上在真實(shí)原理面前只是一種信仰和宗教。同樣，如果我們不去了解技術(shù)的本質(zhì)而止步于應(yīng)用，那么我們就只是技術(shù)宗教的信徒。所以在周愛民老師的《Java 語言精髓與編程實(shí)踐》中說，計(jì)算機(jī)語言如同祭司手中的神杖，神杖換了，祭司還是祭司，世人還是會把頭叩得山響。祭司掌握了與神交流的方法，而世人只看見了神杖。

　　由興趣選擇前端

　　在我學(xué)程序設(shè)計(jì)的最初，我學(xué)習(xí)的是C語言，然而整整一本書除了教我如何在黑洞洞的控制臺上輸出 Hello World 和各種其他字符或者用鍵盤輸入一些什么然后依然是字符輸出外，就沒有什么其他的內(nèi)容了。學(xué)習(xí)了一段時(shí)間之后，我的內(nèi)心一度是崩潰的，因?yàn)槲矣X得這和我想得不一樣，學(xué)了那么多知識，我都不知道自己究竟算不算是“學(xué)會”了C語言，因?yàn)樵谖铱磥恚切┴S富多彩的操作系統(tǒng)和各種應(yīng)用軟件和黑洞洞的控制臺之間明顯還有著非常巨大的鴻溝。

　　事后回想起來，當(dāng)時(shí)的想法當(dāng)然是幼稚可笑的，那時(shí)候的我并不知道程序語言和運(yùn)行環(huán)境之間的區(qū)別，對操作系統(tǒng)、用戶API、硬件接口、網(wǎng)絡(luò)服務(wù)等等都完全不了解。然而這并不能怪我，因?yàn)镃語言的教程并沒有任何一言半語來告訴我這一點(diǎn)，我也不知道學(xué)習(xí)了C語言的語法之后接下來還應(yīng)該學(xué)習(xí)些什么。

　　相對來說，Web開發(fā)更吸引我，因?yàn)椴恍枰惭b任何環(huán)境，只需要在文本編輯器里面輸入一些字符，保存后打開瀏覽器，馬上就能看到豐富的視覺效果，這就是前端的優(yōu)勢，你所做的努力立即就能看得見。

　　相對于死板的輸入輸出，Web開發(fā)在界面可見的一層要豐富多彩得多，這一點(diǎn)吸引了我，如果這一點(diǎn)也能吸引你，讓你著迷，那么你就適合學(xué)習(xí)前端。

　　在選擇前端作為職業(yè)之前，要明確判斷自己對前端開發(fā)的確感興趣，選擇做前端，應(yīng)該是確認(rèn)自己喜歡和適合做前端，而不是為了一份看起來體面而且薪水不菲的工作。如果你對構(gòu)建豐富多彩的界面、處理各種交互邏輯不感興趣，甚至厭煩，那么最明智的選擇是放棄成為前端工程師的想法 —— 因?yàn)檫x擇一個(gè)自己不喜歡的職業(yè)，為之忍受數(shù)十年直到退休，實(shí)在是一件很悲催的事情。

　　對在校學(xué)生，我們看重哪方面能力？

　　有同學(xué)問，360前端是否一定要求實(shí)際經(jīng)驗(yàn)的學(xué)生，在這里我可以回答：否。

　　對于學(xué)生，我們比較關(guān)心的是：

　　基礎(chǔ)：包括數(shù)學(xué)、算法、數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)相關(guān)基礎(chǔ)的掌握。

　　學(xué)習(xí)能力和學(xué)習(xí)方法：如何學(xué)的前端，學(xué)了多久，學(xué)到什么程度，遇到過什么問題，是如何嘗試解決這些問題。

　　興趣：對前端的興趣如何，這一點(diǎn)可以體現(xiàn)在很多細(xì)節(jié)上。有一個(gè)反面的例子比較常見，一般來說我會問學(xué)生最近在關(guān)注什么前端新知識，有的學(xué)生會說我關(guān)注某某某，但當(dāng)我再問他究竟關(guān)注到什么程度，會發(fā)現(xiàn)他實(shí)際上根本沒有在這項(xiàng)新知識上花費(fèi)多少時(shí)間。如果你對感興趣的問題都不花費(fèi)時(shí)間，如何證明你自己對前端的“興趣”呢。

　　解決問題的能力：遇到難題如何解決的，遇到?jīng)]接觸過的問題是如何思考和最終解決的。從這里可以判斷出同學(xué)有沒有前端思維，這些問題沒有標(biāo)準(zhǔn)答案，我們不追求某些“官方思路”，看重過程而不是結(jié)果。

　　關(guān)于簡歷，有同學(xué)提到說現(xiàn)在似乎很多公司都希望學(xué)生會點(diǎn) Node.js，會點(diǎn) React，我自己不會該怎么辦。

　　我想說的是，我們并不要求學(xué)生必須會這些。相反，我個(gè)人更鼓勵學(xué)生利用時(shí)間打好基礎(chǔ)。簡歷上寫自己真正擅長的內(nèi)容即可，我們不會因?yàn)樵谀愕暮啔v上看不到 Node.js 或者 React 就忽略你。只要你真心熱愛前端并用心學(xué)了，你應(yīng)該明白如何用前端基礎(chǔ)來打動我。有的學(xué)生喜歡在簡歷上堆砌詞匯，實(shí)際上這一點(diǎn)不見得好，因?yàn)槿绻銓懥艘粋€(gè)你自己一知半解的東西，最后在面試中被面到了，一定會得負(fù)分的。

　　技術(shù)本身是有深度的，A 同學(xué)說“我知道React但沒用它做過東西”， B 同學(xué)說“我用AngularJS寫過一些個(gè)人的小項(xiàng)目”， C 同學(xué)說“我上個(gè)月使用彈性布局的思路來寫我的博客，結(jié)果在Android系統(tǒng)4.1版本的Webkit瀏覽器下出現(xiàn)了一個(gè)顯示bug，最后我是這樣這樣解決的”。你們說 A、B、C 三個(gè)同學(xué)我們會選擇哪個(gè)同學(xué)？

　　面試是一個(gè)彼此交流的過程，我們希望看到大家在前端領(lǐng)域的能力和潛力，“知道”一件事，并不是一種有價(jià)值的能力，尤其是在知識廉價(jià)的互聯(lián)網(wǎng)時(shí)代。我們的同學(xué)千萬不要像背書一樣去死記硬背一樣?xùn)|西，而應(yīng)該真正用心去學(xué)。我們的高等學(xué)校不僅僅教授大家知識，還有如何真正學(xué)習(xí)和做研究，不是嗎？

　　如果你對前端真的感興趣并有潛力，花點(diǎn)小心思，你該知道如何學(xué)習(xí)它。

　　最后，祝愿大家都能成為優(yōu)秀的前端工程師。

??

本文來自: 成都百度快照優(yōu)化|成都百度關(guān)鍵詞排名優(yōu)化|成都SEO【思為網(wǎng)絡(luò)】，轉(zhuǎn)載請保留出處！歡迎發(fā)表您的評論

相關(guān)標(biāo)簽：成都百度優(yōu)化  成都網(wǎng)站優(yōu)化  百度優(yōu)化  移動互聯(lián)網(wǎng)  網(wǎng)站優(yōu)化  搜索引擎  

相關(guān)推薦

• SEO需要多長時(shí)間？來看SEO專家的深度分析【轉(zhuǎn)】2018-10-18 9:58:10
• 網(wǎng)頁設(shè)計(jì)之：移動用戶體驗(yàn)設(shè)計(jì)之列表視圖與網(wǎng)格視圖2017-12-16 13:14:49
• 微信搜索優(yōu)化WSO即將誕生了嗎？【轉(zhuǎn)】2017-5-29 0:0:31
• 360搜索上線“悟空算法” 可識別被黑網(wǎng)站 不掛“彩”！2016-12-21 22:42:52
• 搜索引擎的工作原理，搜索引擎怎么收錄網(wǎng)站，網(wǎng)站怎么排名[轉(zhuǎn)]2016-12-21 12:40:7
• 馬云：“電子商務(wù)”將消失 新五通一平將引領(lǐng)未來2016-10-13 22:4:19
• 一篇文章讀懂微信小程序(應(yīng)用號)是什么，是否值得投入進(jìn)來做？[轉(zhuǎn)]2016-9-22 22:27:54
• 網(wǎng)頁設(shè)計(jì)中靈活使用HTML5表單驗(yàn)證技術(shù)2016-6-16 23:57:50
• 百度競價(jià)排名調(diào)整后，企業(yè)怎樣做網(wǎng)站關(guān)鍵詞優(yōu)化排名2016-6-1 1:33:10
• 谷歌搜索付費(fèi)廣告布局調(diào)整對SEO、用戶們有何影響？2016-4-6 0:24:54