大家好，我是若川，點(diǎn)此加我微信進(jìn)源碼群，一起學(xué)習(xí)源碼。同時(shí)可以進(jìn)群免費(fèi)看Vue專場(chǎng)直播，有尤雨溪分享「Vue3 生態(tài)現(xiàn)狀以及展望」

背景

最近我在公眾號(hào)的后臺(tái)收到一條留言：

言語里充滿了對(duì)前端的不屑和鄙夷，但仔細(xì)看看這條留言，里面的觀點(diǎn)是一點(diǎn)都經(jīng)不起推敲。

按理說這種毫無道理的噴我是不用搭理的，但考慮到有這種想法的人可能不止他一個(gè)，而我又是一個(gè)講道理的人，因此今兒我就把這事兒放到明面上說說。

逐條反駁

前端搞模塊化、構(gòu)建工具是為了刷存在感？

隨著前端的開發(fā)日益復(fù)雜，傳統(tǒng)的手寫 HTML、JS、CSS 的方式已經(jīng)不能滿足需求，在這種背景下，才誕生出前端 MVVM 框架，組件化、模塊化開發(fā)的開發(fā)方式以及前端構(gòu)建工具。

分而治之是軟件工程中的重要思想，是復(fù)雜系統(tǒng)開發(fā)和維護(hù)的基石，這點(diǎn)放在前端開發(fā)中同樣適用。而組件化，模塊化的開發(fā)方式目前是前端最流行的分治手段。

前端 MVVM 框架，比如 Vue、React、Angular，就提供了組件化的開發(fā)方式。

而構(gòu)建工具的出現(xiàn)，是讓模塊化的開發(fā)方式得以落地。比如 Webpack 就支持了 JS 的模塊化開發(fā)方式；借助于 Loader，你甚至可以在 JS 中加載 CSS、圖片等資源。

除此之外，代碼的校驗(yàn)、測(cè)試、打包、壓縮等步驟都可以通過構(gòu)建工具完成，再接入 jenkins 這樣的平臺(tái)，就很好的實(shí)現(xiàn)了前端項(xiàng)目的可持續(xù)集成和代碼部署。

因此，前端做這些事情，是為了提升研發(fā)效率和代碼的可維護(hù)性。前端的重要性已經(jīng)隨著需求的復(fù)雜而自然得到了提升，需要刷什么存在感？

從事前端的人總是用各種東西在證明自己很厲害，自己不簡(jiǎn)單？

這話說的毫無邏輯。前端這些年確實(shí)發(fā)展的不錯(cuò)，隨著瀏覽器和 HTML 標(biāo)準(zhǔn)的發(fā)展，前端在前端框架、構(gòu)建工具、可視化、跨端框架、復(fù)雜應(yīng)用開發(fā)等方面均有建樹。

但做這些事情是因?yàn)橛行枨蟛艜?huì)去做，而不是要證明什么，也不需要證明什么。

只要你從事了后端，就代表你是一個(gè)敢于接受困難的人，敢于從事困難工作的人。

這話就很搞笑了。無論后端還是前端，都是寫代碼的，只不過是工作分配的內(nèi)容和方向不同。工作中或多或少都會(huì)遇到困難，敢不敢于接受困難和挑戰(zhàn)，和人有關(guān)，和做什么工作無關(guān)。

前端的悲劇就是，要通過各種東西來證明自己的地位？

前端并不悲劇，說這話的人挺悲劇的。其實(shí)越是厲害的人越謙虛，越是覺得自己渺小，對(duì)自己不了解的領(lǐng)域會(huì)有敬畏心。而那些井底之蛙往往都是半桶水亂晃之人，無知而無畏。

最后，他還來了句“拋掉技術(shù)能力強(qiáng)弱的，僅僅從前后端職業(yè)，社會(huì)的普遍認(rèn)知來說的”。

Excuse me? 這還是社會(huì)普遍認(rèn)知嗎？我都被氣笑了。噴子下結(jié)論往往都是特別主觀，缺少論據(jù)。

前端的發(fā)展方向

反駁完了，我們?cè)賮砹狞c(diǎn)有用的。

最近參與了幾場(chǎng)校招面試，問了候選人為什么會(huì)選擇做前端，很多人回答說喜歡前端更容易得到反饋，能快速看到自己做的作品，也喜歡酷炫的交互和動(dòng)畫。

他們可能不知道，前端開發(fā)除了切圖外，整個(gè)知識(shí)結(jié)構(gòu)還是非常豐富的。

這張圖相信大部分前端并不陌生，它是多年前的一張老圖，大致描述了前端工程師的知識(shí)圖譜。隨著時(shí)間的遷移，雖然里面一些技術(shù)點(diǎn)發(fā)生了改變，但它仍然具有非常不錯(cuò)的指導(dǎo)意義。

結(jié)合這個(gè)知識(shí)圖譜，和我多年工作經(jīng)驗(yàn)，我認(rèn)為前端大致有以下幾個(gè)發(fā)展方向：

• 復(fù)雜應(yīng)用開發(fā)

大部分前端工程師做的都是業(yè)務(wù)開發(fā)工作，這是很正常的現(xiàn)象。對(duì)于企業(yè)而言，尤其是 C 端的業(yè)務(wù)，對(duì)前端開發(fā)的需求量是很大。

對(duì)于開發(fā)者而言，能做公司的核心業(yè)務(wù)開發(fā)是非常幸運(yùn)的，因?yàn)槟愕墓ぷ鹘o企業(yè)帶來最直接的收益，你也能得到不錯(cuò)的鍛煉和成長(zhǎng)。

有些人可能會(huì)覺得做應(yīng)用開發(fā)技術(shù)含量不大，那是因?yàn)榻佑|到的業(yè)務(wù)還不夠復(fù)雜。如果去開發(fā) web im、web doc、proceeson、figma 這些重前端交互的產(chǎn)品，對(duì)前端的技能要求也是很高的。

因此千萬不要看不起開發(fā)業(yè)務(wù)的前端，他們能給公司帶來最直接的價(jià)值，甚至有些公司的業(yè)務(wù)還是前端主導(dǎo)的。

做復(fù)雜應(yīng)用開發(fā)可能是大部分前端開發(fā)的發(fā)展方向。

• 前端框架開發(fā)

這里說的前端框架主要分為兩類，一種是比較通用前端開發(fā)框架，比如 Vue、React、Angular。大部分公司會(huì)依賴這些開源框架做業(yè)務(wù)開發(fā)，也有部分公司會(huì) fork 它們做一些符合自己公司使用場(chǎng)景的魔改（比如我司）。

當(dāng)然，還有一部分人力充裕的大公司會(huì)自研前端 MVVM 框架，比如百度的 san。

另一種是跨端框架的開發(fā)。很多公司都有跨端需求，write once，run everywhere。早期的跨端需求是一份代碼跑 iOS 和 Android 端，代表作有 React Native、Weex、Flutter。

隨著小程序的興起，一些跨小程序開發(fā)框架也隨之而來，代表作有 mpvue、wepy、mpx。甚至后面還出現(xiàn)了跨小程序、Web 和 App 的框架，代表作有 Taro、uni-app、Chameleon。

這些框架的主要思路都是把同一份源碼編譯成不同平臺(tái)的目標(biāo)代碼。雖然看上去實(shí)現(xiàn)了 write once，run everywhere，提升了業(yè)務(wù)的研發(fā)效率。但由于不同平臺(tái)的差異，可能某些地方出錯(cuò)，就要 debug everywhere 了，跨端框架本身的維護(hù)成本也很高。

跨端框架目前是一個(gè)百花齊放的狀態(tài)，各大公司基本都有自研的框架，它也確實(shí)是一個(gè)值得研究的方向。

• 前端工程化

前端工程化主要指的是用工程化的方式解決前端項(xiàng)目的初始化、開發(fā)、測(cè)試、編譯構(gòu)建、上線部署等一系列問題。

通常我們會(huì)借助一些工具，如 webpack 來輔助我們實(shí)現(xiàn)一些前端工程中比較基礎(chǔ)的部分，比如腳手架、模塊化開發(fā)、自動(dòng)化測(cè)試、編譯打包等。

但是前端工程是沒有銀彈的，沒有一套前端工程化方案適應(yīng)于所有的業(yè)務(wù)。我們可能需要編寫一些 webpack 插件、loader 來滿足于業(yè)務(wù)開發(fā)。

現(xiàn)在炒的比較火的微前端，也并不是萬金油，大部分場(chǎng)景你可能都用不到。

如果是一個(gè)大型復(fù)雜的項(xiàng)目，我們還需要考慮到項(xiàng)目管理，是采用 multiple repo、還是 monorepo 的方式。

另外，前端工程化還包括性能優(yōu)化，通過工程化的手段來解決前端性能優(yōu)化的問題。

因此，對(duì)于做這部分工作的工程師，一定要從業(yè)務(wù)的角度來思考，來給團(tuán)隊(duì)搭建一套合適的工程化方案。這確實(shí)也是值得研究的方向。

• 可視化開發(fā)

可視化開發(fā)也是前端一個(gè)垂直的領(lǐng)域，什么是可視化，引用月影大佬的話：

可視化是將數(shù)據(jù)組織成易于為人所理解和認(rèn)知的結(jié)構(gòu)，然后用圖形的方式形象地呈現(xiàn)出來的理論、方法和技術(shù)。實(shí)現(xiàn)可視化有兩個(gè)關(guān)鍵要素，一個(gè)是數(shù)據(jù)，另一個(gè)是圖形。如果要考慮在計(jì)算機(jī)上呈現(xiàn)，那還要加上交互。

可視化底層的技術(shù)主要是 SVG、Canvas2D 和 WebGL。

可視化領(lǐng)域的工具主要有四類；專業(yè)呈現(xiàn)各種類型圖表的圖表庫；專業(yè)處理地圖、地理位置的可視化地理庫；專業(yè)處理視覺呈現(xiàn)的渲染庫；以及處理數(shù)據(jù)的數(shù)據(jù)驅(qū)動(dòng)框架。

可視化也是前端的一個(gè)值得發(fā)展和深耕的領(lǐng)域。

• 游戲

游戲開發(fā)也是前端一個(gè)垂直的領(lǐng)域，可以利用 DOM 或者是 Canvas2D 做一些 2d 小游戲，也可以基于 WebGL 做一些 3d 小游戲。

做游戲通常會(huì)一些基于框架比如 createJS、cocos2d，egret 等開發(fā)。而且隨著一些游戲框架和瀏覽器渲染引擎的深度合作，性能方面也得到了相當(dāng)大的優(yōu)化。

如果對(duì)開發(fā)游戲感興趣，也可以嘗試往這個(gè)領(lǐng)域發(fā)展。

• 其它

還有一些相對(duì)冷門的方向，比如做前端相關(guān)的工具鏈，開發(fā) web IDE，編譯器等。如果有機(jī)會(huì)和興趣，也都是可以發(fā)展的方向。

因此針對(duì)上述前端深入發(fā)展的方向，我的建議是選擇一條深入下去，任何一個(gè)方向達(dá)到技術(shù)專家的級(jí)別，不管到哪里都有口飯吃。

全棧開發(fā)

有粉絲問我，對(duì)全棧開發(fā)怎么看？

誠(chéng)然，這樣的人才很吃香，但是在國(guó)內(nèi)，擁有真正全棧開發(fā)能力的人并不多，而且大部分大公司前后端分工明確，也沒有多少機(jī)會(huì)做全棧開發(fā)。

Facebook 的確實(shí)有一批頂尖的全棧工程師，但是你要想想，有多少人的能力能達(dá)到這家公司的入門門檻？

在我看來，想成為全棧開發(fā)人才要比成為領(lǐng)域的專家難的多，有些人前后端都做，最后只是成為了全干工程師。因此大部分公司還是明確了前后端開發(fā)方向，把專業(yè)的事情交給專業(yè)的人士去做。

如果你想往全棧的方向發(fā)展，我并不反對(duì)，但需要下非常大的功夫且有不錯(cuò)的機(jī)會(huì)在工作中鍛煉。

總結(jié)

因此在我看來，前后端開發(fā)只是分工不同。雖然在大公司內(nèi)部，后端的高 P 確實(shí)比前端多，但也不要忘了，后端開發(fā)的人也比前端多的多。

真正厲害的人，無論是做前端還是后端，都會(huì)對(duì)對(duì)方做的工作有足夠多的敬畏和尊重。

前端人有時(shí)候會(huì)自嘲自己就是個(gè)“切圖仔”，后端人有時(shí)候會(huì)調(diào)侃自己就是個(gè) CURD 工程師。自嘲可以，嘲諷別人就不行。

如果某些別有用心的人非要挑釁，想要引戰(zhàn)，建議在嘲諷別人前，先掂掂自己有幾斤幾兩吧。

最后預(yù)告福利：掃下方二維碼加我微信 ruochuan12，可以拉你進(jìn)群免費(fèi)觀看10月23日的前端早早聊?Vue 專場(chǎng)直播，大咖云集?，更有「尤雨溪」分享「Vue3 生態(tài)現(xiàn)狀以及展望」。?另外還可以送50個(gè)錄播視頻和PPT~

總結(jié)

以上是生活随笔為你收集整理的前端不容你亵渎的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。