寫給想成為前端工程師的同學們―前端工程師是做什么的怎抛?

前端工程師是做什么的?

前端工程師是互聯(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)品與視覺和交互有關的部分纹笼,都是前端工程師的專業(yè)領域。

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



現(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)開始全面進入移動時代兄猩,前端工程師的地位越來越重要,前端領域的技術發(fā)展也越來越快,各種新的思想枢冤、設計模式鸠姨、工具和平臺都快速發(fā)展,對前端工程師的技能要求也越來越高淹真。


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

在2010年之后最流行的新編程語言中有相當部分和前端有關,比如 Dart核蘸、Clojure巍糯、CoffeeScript 和 TypeScript。

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

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


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


JavaScript在最熱編程語言 TOP10


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


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

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

有人說前端工程師的技術棧是這樣的:


還有人說是這樣的:

實際上前端工程師最核心的技能還是:

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

前端是最接近產(chǎn)品和設計的工程師仔引,起到銜接產(chǎn)品和技術的作用,前端為用戶可以看到的部分負責嫌佑,所以也是最接近用戶的工程師杆故。
在多終端的時代迅箩,如果一個產(chǎn)品同時支持PC、移動端处铛,前端工程師還需要和更多的角色打交道:

JavaScript 對于前端是最重要的技能饲趋,所以優(yōu)秀的前端工程師要有扎實的JavaScript基本功。而JavaScript這門編程語言也是目前程序設計領域炙手可熱的寵兒撤蟆,如今的它不僅僅只是用來開發(fā)Web奕塑,還可以用在各個方面。

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

前端工程師也是軟件工程師家肯,所以軟件工程師的基礎知識也是非常重要的龄砰,這些基礎知識包括:

  • 數(shù)學

  • 計算機體系

  • 操作系統(tǒng)

  • 數(shù)據(jù)結構和算法

  • 編譯原理

HTML和CSS也是前端工程師非常重要的基本功,很多同學讨衣,尤其是喜歡寫代碼的同學容易忽視 Markup Language换棚,實際上 ML 也是 UI 相關的領域里面很重要的內(nèi)容,不應該被忽視反镇。

  • HTML: The Living Standard
  • HTML & CSS

有同學問說:“前端工作需求很多固蚤,老是改來改去,實際的技術點并沒有多少歹茶,產(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)造者,工程師們怎樣讓自己過得更好友题,這個領域值得研究嗤堰。

另外,不要覺得實際的技術點沒有多少度宦,舉幾個例子:實現(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ā)展很快涧窒,各種新技術新思想不斷涌現(xiàn)心肪,這是一個好現(xiàn)象。但是前端發(fā)展太快也帶來一些問題纠吴,比如有同學就問到我究竟應該學些什么硬鞍,Angular.js、React戴已、Node.js固该、ES6、ES7糖儡、CoffeeScript伐坏、TypeScript……似乎永遠有太多東西需要學習,有些東西好像還沒學明白就被另一些新的技術取代而“過時了”握联。

其實還是那句話桦沉,前端工程師首先是軟件工程師每瞒,基礎是最重要的,如果基礎不扎實纯露,一切應用技能就都是“浮云”剿骨。前端的基礎是什么?HTML埠褪、CSS浓利、JavaScript基本功數(shù)學组橄、算法荞膘、數(shù)據(jù)結構、操作系統(tǒng)玉工、編譯原理基本功羽资。

一個優(yōu)秀的前端工程師必須要有自己擅長的領域,并且鉆研得足夠深入遵班,同時要有眼界屠升,能“跨界”∠林#可以以前端作為職業(yè)腹暖,但千萬不要把自己的技能限制在前端領域,因為有很多東西翰萨,只有站在前端之外脏答,才能看得更清晰,更透徹亩鬼。

學東西千萬別盲目跟風殖告,大家都在談AngularJS就立即跑去學習,過幾天大家都談React了雳锋,就又放下AngularJS去學習React黄绩。前端領域知識點很多,值得學的東西也很多玷过,聰明的同學懂得花時間學習成體系的知識并且研究得足夠深入爽丹,因為只有這樣才能從中總結出規(guī)律,形成方法論辛蚊,這樣才能最大化學習的價值粤蝎。

知識的正確用法 —— 一個領域里面的大師永遠不會是另一個類似領域的菜鳥

這次前端星計劃布置的一個實現(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的關鍵是語義化钓葫,那么到底什么是語義化呢?這個問題難住了不少同學票顾。標簽要符合語義础浮,這個答案看似簡單標準,但什么樣的標簽才是符合語義奠骄?強調(diào)用 strong 不用 b豆同?那如果有個外星文明,它們的語言里 strong 相當于地球的 bold含鳞,bold 相當于地球的 strong影锈,那么它們究竟該用 strong 還是用 b?我們說 i 標簽是斜體的意思蝉绷,那為什么fontawesome.io 拿它做 icon font 的標簽鸭廷,這是不是“反語義”的?

過去很多地方農(nóng)村有一種民間的染坊潜必,制作染布的染料靴姿。這種染房里面有一口很大的鐵缸,通常都要有一個身體非常強壯的工人拿一根很長的鐵棒在染缸里面用力地敲擊磁滚,敲得越響佛吓,制作出來的染料顏色越鮮艷。 為什么越用力敲打鐵缸染料就越好垂攘?染坊的人說這是祖祖輩輩傳下來的經(jīng)驗维雇,而事實上也是如此,真的染料的顏色和敲打用力有很大關系晒他。直到有一天吱型,一位從村里走出去學化學的大學生,弄明白了原來只需要在染料中加適當比例的鐵屑陨仅,就能讓染料和含鐵元素氧化物產(chǎn)生化學反應而變得更鮮艷津滞。原來祖祖輩輩傳下來的“儀式”實際上在真實原理面前只是一種信仰和宗教铝侵。同樣,如果我們不去了解技術的本質(zhì)而止步于應用触徐,那么我們就只是技術宗教的信徒咪鲜。所以在周愛民老師的《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ā)的確感興趣叠穆,選擇做前端少漆,應該是確認自己喜歡和適合做前端,而不是為了一份看起來體面而且薪水不菲的工作硼被。如果你對構建豐富多彩的界面示损、處理各種交互邏輯不感興趣,甚至厭煩嚷硫,那么最明智的選擇是放棄成為前端工程師的想法 —— 因為選擇一個自己不喜歡的職業(yè)检访,為之忍受數(shù)十年直到退休,實在是一件很悲催的事情仔掸。

對在校學生脆贵,我們看重哪方面能力?

有同學問起暮,360前端是否一定要求實際經(jīng)驗的學生卖氨,在這里我可以回答:否。

對于學生负懦,我們比較關心的是:

  • 基礎:包括數(shù)學筒捺、算法、數(shù)據(jù)結構纸厉、計算機相關基礎的掌握系吭。
    學習能力和學習方法:如何學的前端,學了多久颗品,學到什么程度肯尺,遇到過什么問題,是如何嘗試解決這些問題抛猫。

  • 興趣:對前端的興趣如何蟆盹,這一點可以體現(xiàn)在很多細節(jié)上。有一個反面的例子比較常見闺金,一般來說我會問學生最近在關注什么前端新知識逾滥,有的學生會說我關注某某某,但當我再問他究竟關注到什么程度,會發(fā)現(xiàn)他實際上根本沒有在這項新知識上花費多少時間寨昙。如果你對感興趣的問題都不花費時間讥巡,如何證明你自己對前端的“興趣”呢。

  • 解決問題的能力:遇到難題如何解決的舔哪,遇到?jīng)]接觸過的問題是如何思考和最終解決的欢顷。從這里可以判斷出同學有沒有前端思維,這些問題沒有標準答案捉蚤,我們不追求某些“官方思路”抬驴,看重過程而不是結果。

關于簡歷缆巧,有同學提到說現(xiàn)在似乎很多公司都希望學生會點 Node.js布持,會點 React,我自己不會該怎么辦陕悬。

我想說的是题暖,我們并不要求學生必須會這些。相反捉超,我個人更鼓勵學生利用時間打好基礎胧卤。簡歷上寫自己真正擅長的內(nèi)容即可,我們不會因為在你的簡歷上看不到 Node.js 或者 React 就忽略你拼岳。只要你真心熱愛前端并用心學了枝誊,你應該明白如何用前端基礎來打動我。有的學生喜歡在簡歷上堆砌詞匯裂问,實際上這一點不見得好侧啼,因為如果你寫了一個你自己一知半解的東西,最后在面試中被面到了堪簿,一定會得負分的痊乾。

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

面試是一個彼此交流的過程,我們希望看到大家在前端領域的能力和潛力痛侍,“知道”一件事朝氓,并不是一種有價值的能力,尤其是在知識廉價的互聯(lián)網(wǎng)時代。我們的同學千萬不要像背書一樣去死記硬背一樣東西赵哲,而應該真正用心去學待德。我們的高等學校不僅僅教授大家知識,還有如何真正學習和做研究枫夺,不是嗎将宪?

如果你對前端真的感興趣并有潛力,花點小心思橡庞,你該知道如何學習它较坛。

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

我有一個前端學習交流QQ群:328058344 如果你在學習前端的過程中遇到什么問題燎潮,歡迎來我的QQ群提問,群里每天還會更新一些學習資源扼倘。禁止閑聊,非喜勿進除呵。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末再菊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子颜曾,更是在濱河造成了極大的恐慌纠拔,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泛豪,死亡現(xiàn)場離奇詭異稠诲,居然都是意外死亡,警方通過查閱死者的電腦和手機诡曙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門臀叙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人价卤,你說我怎么就攤上這事劝萤。” “怎么了慎璧?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵床嫌,是天一觀的道長。 經(jīng)常有香客問我胸私,道長厌处,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任岁疼,我火速辦了婚禮阔涉,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己洒敏,他們只是感情好龄恋,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凶伙,像睡著了一般郭毕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上函荣,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天显押,我揣著相機與錄音,去河邊找鬼傻挂。 笑死乘碑,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的金拒。 我是一名探鬼主播兽肤,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼绪抛!你這毒婦竟也來了资铡?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤幢码,失蹤者是張志新(化名)和其女友劉穎笤休,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體症副,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡店雅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了贞铣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闹啦。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖辕坝,靈堂內(nèi)的尸體忽然破棺而出亥揖,到底是詐尸還是另有隱情,我是刑警寧澤圣勒,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布费变,位于F島的核電站,受9級特大地震影響圣贸,放射性物質(zhì)發(fā)生泄漏挚歧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一吁峻、第九天 我趴在偏房一處隱蔽的房頂上張望滑负。 院中可真熱鬧在张,春花似錦、人聲如沸矮慕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽痴鳄。三九已至瘟斜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痪寻,已是汗流浹背螺句。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留橡类,地道東北人蛇尚。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像顾画,于是被迫代替她去往敵國和親取劫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容

  • 編者按:本文由360副總監(jiān)研侣、奇舞團負責人月影編寫勇凭,文中解釋了什么是前端工程師,前端工程師的發(fā)展之路义辕、前景、需要的知...
    景岳閱讀 1,260評論 6 32
  • 列表通過網(wǎng)絡加載數(shù)據(jù)的時候寓盗,不要將網(wǎng)絡異步加載數(shù)據(jù)直接給列表項賦值灌砖。 原來做android項目開發(fā)的時候,在列表通...
    夢隨興飛閱讀 753評論 0 0
  • 《相思》 從別后傀蚌,憶相逢基显,幾回魂夢與君同。 心連心善炫,盼相守撩幽,望眼欲穿君歸兮。--芯瑩 如果是緣份惹的禍讓我受折磨著...
    杜盈賢閱讀 371評論 3 2
  • 學校組織軍訓,導致放假特別遲艺谆。1月20日榨惰,西大學子終于軍訓結束,此時静汤,已經(jīng)是臘月二十三琅催。對此居凶,我只能表示“我懷疑我...
    蔣小志jxz閱讀 666評論 2 2