現(xiàn)在前端開(kāi)發(fā)的工作遠(yuǎn)不只切圖那么簡(jiǎn)單，前端工程師的工作內(nèi)容變得極為豐富和多樣化：
開(kāi)發(fā)前端框架、做SDK、搭建平臺(tái)、打造工程化工具鏈、業(yè)務(wù)開(kāi)發(fā)，更有一些工程師參與到更深層次的引擎開(kāi)發(fā)中，比如定制JavaScript引擎或?qū)崿F(xiàn)渲染引擎等。
面對(duì)如此多的前端工作類型，它們之間存在什么樣的聯(lián)系？前端工作具體包括哪些種類？我們一起看看~
前端工作的五層
前端的工作大概可以分為五層，從下到上分別是引擎層、runtime層、工具層、業(yè)務(wù)層、搭建層。
1.引擎層
現(xiàn)代前端代碼不再局限于瀏覽器作為其運(yùn)行環(huán)境。事實(shí)上，前端技術(shù)已經(jīng)擴(kuò)展到了多種不同的容器。例如，Electron允許開(kāi)發(fā)者使用前端技術(shù)棧進(jìn)行跨平臺(tái)的桌面應(yīng)用開(kāi)發(fā)。
此外，React Native、Weex等框架，以及一些自研的跨端引擎，可以用前端的技術(shù)棧來(lái)開(kāi)發(fā)Android和iOS平臺(tái)的應(yīng)用程序。
這些容器的實(shí)現(xiàn)通常基于對(duì)JavaScript引擎的擴(kuò)展，如V8、JavaScriptCore。它們通過(guò)注入DOM API和設(shè)備能力的API，以及實(shí)現(xiàn)渲染引擎來(lái)實(shí)現(xiàn)對(duì)不同平臺(tái)的支持。這些渲染引擎根據(jù)不同平臺(tái)的需求來(lái)實(shí)現(xiàn)CSS的渲染。
JavaScript引擎的定制和渲染引擎的實(shí)現(xiàn)往往基于C++語(yǔ)言。因此，一些精通C++的前端開(kāi)發(fā)者會(huì)參與到這些技術(shù)的開(kāi)發(fā)中。例如，阿里巴巴的Kraken渲染引擎就是由前端團(tuán)隊(duì)開(kāi)發(fā)的成果。
2.runtime層
一旦引擎或容器實(shí)現(xiàn)了W3C標(biāo)準(zhǔn)API，開(kāi)發(fā)者便可以使用前端技術(shù)棧來(lái)構(gòu)建應(yīng)用程序。然而，W3C的API通常較為基礎(chǔ)，因此我們通常會(huì)引入前端框架和SDK來(lái)提升開(kāi)發(fā)效率。
這些前端框架通過(guò)組件化和數(shù)據(jù)驅(qū)動(dòng)的渲染機(jī)制，允許開(kāi)發(fā)者專注于數(shù)據(jù)管理，而不必直接操作DOM API。數(shù)據(jù)的任何變化都會(huì)自動(dòng)觸發(fā)DOM API的調(diào)用，實(shí)現(xiàn)界面的重新渲染。
部分前端開(kāi)發(fā)者的職責(zé)是維護(hù)這些前端框架和SDK。例如，百度的San框架、阿里巴巴的跨端框架Rax等，以及眾多的JavaScript SDK。
3.工具層
引擎提供了JavaScript執(zhí)行和CSS渲染的能力，但在實(shí)際開(kāi)發(fā)過(guò)程中，我們可能不會(huì)直接編寫(xiě)原生的JavaScript或CSS代碼。
相反，我們傾向于使用TypeScript、ES Next等現(xiàn)代JavaScript變體，以及LESS、Sass等CSS預(yù)處理器來(lái)提升開(kāi)發(fā)效率和代碼可維護(hù)性。這些代碼在運(yùn)行前需要經(jīng)過(guò)編譯過(guò)程。
為了更有效地分發(fā)代碼，我們還會(huì)進(jìn)行代碼打包。在編譯之前，代碼還會(huì)經(jīng)過(guò)linting（代碼檢查）來(lái)確保代碼質(zhì)量和一致性。這些步驟構(gòu)成了工程化工具鏈的一部分，有些前端開(kāi)發(fā)者專注于這一領(lǐng)域的工作。
4.業(yè)務(wù)層
引擎賦予了前端代碼執(zhí)行的能力，而runtime層則提供了用戶友好的前端框架和SDK。
工具層進(jìn)一步提供了即插即用的編譯和打包工具鏈，這些工具鏈為業(yè)務(wù)開(kāi)發(fā)提供了極大的便利，業(yè)務(wù)開(kāi)發(fā)人員可以快速地利用這些工具來(lái)滿足業(yè)務(wù)需求。
大部分前端開(kāi)發(fā)者的工作集中在業(yè)務(wù)開(kāi)發(fā)層，而這一層也是其他各層服務(wù)的核心。畢竟，業(yè)務(wù)是公司運(yùn)營(yíng)和發(fā)展的根本。
5.搭建層
為了提升交付速度并釋放前端開(kāi)發(fā)人員在業(yè)務(wù)層的生產(chǎn)力，越來(lái)越多的企業(yè)開(kāi)始開(kāi)發(fā)可視化構(gòu)建平臺(tái)，供非技術(shù)人員自行實(shí)現(xiàn)特定的需求，從而使前端開(kāi)發(fā)者能夠?qū)⒏鄷r(shí)間投入到其他層面上，處理更具挑戰(zhàn)性的任務(wù)。
許多公司都設(shè)立了專門(mén)的前端團(tuán)隊(duì)來(lái)開(kāi)發(fā)和維護(hù)這些構(gòu)建平臺(tái)，目的是直接滿足一系列常見(jiàn)的業(yè)務(wù)需求。
--------------
不同公司的前端團(tuán)隊(duì)可能會(huì)側(cè)重于這些層次中的不同部分，這五個(gè)層次的完善程度直接影響了前端工作的深度和廣度。
層次越全面，前端開(kāi)發(fā)者能夠參與的工作就越多樣化，從而推動(dòng)技術(shù)能力和業(yè)務(wù)創(chuàng)新的發(fā)展。
對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，思考自己目前所處的層次以及未來(lái)希望發(fā)展的方向是非常重要的。細(xì)想一下，你的工作是在哪一層呢？或者更想做哪層的工作呢？
