前端工作原來有這么多層級！你最想做哪一層？

前端的工作大概可以分為五層，從下到上分別是引擎層、runtime層、工具層、業(yè)務(wù)層、搭建層。

現(xiàn)代前端代碼不再局限于瀏覽器作為其運行環(huán)境。事實上，前端技術(shù)已經(jīng)擴(kuò)展到了多種不同的容器。例如，Electron允許開發(fā)者使用前端技術(shù)棧進(jìn)行跨平臺的桌面應(yīng)用開發(fā)。

此外，React Native、Weex等框架，以及一些自研的跨端引擎，可以用前端的技術(shù)棧來開發(fā)Android和iOS平臺的應(yīng)用程序。

這些容器的實現(xiàn)通?；趯avaScript引擎的擴(kuò)展，如V8、JavaScriptCore。它們通過注入DOM API和設(shè)備能力的API，以及實現(xiàn)渲染引擎來實現(xiàn)對不同平臺的支持。這些渲染引擎根據(jù)不同平臺的需求來實現(xiàn)CSS的渲染。

JavaScript引擎的定制和渲染引擎的實現(xiàn)往往基于C++語言。因此，一些精通C++的前端開發(fā)者會參與到這些技術(shù)的開發(fā)中。例如，阿里巴巴的Kraken渲染引擎就是由前端團(tuán)隊開發(fā)的成果。

一旦引擎或容器實現(xiàn)了W3C標(biāo)準(zhǔn)API，開發(fā)者便可以使用前端技術(shù)棧來構(gòu)建應(yīng)用程序。然而，W3C的API通常較為基礎(chǔ)，因此我們通常會引入前端框架和SDK來提升開發(fā)效率。

這些前端框架通過組件化和數(shù)據(jù)驅(qū)動的渲染機(jī)制，允許開發(fā)者專注于數(shù)據(jù)管理，而不必直接操作DOM API。數(shù)據(jù)的任何變化都會自動觸發(fā)DOM API的調(diào)用，實現(xiàn)界面的重新渲染。

部分前端開發(fā)者的職責(zé)是維護(hù)這些前端框架和SDK。例如，百度的San框架、阿里巴巴的跨端框架Rax等，以及眾多的JavaScript SDK。

引擎提供了JavaScript執(zhí)行和CSS渲染的能力，但在實際開發(fā)過程中，我們可能不會直接編寫原生的JavaScript或CSS代碼。

相反，我們傾向于使用TypeScript、ES Next等現(xiàn)代JavaScript變體，以及LESS、Sass等CSS預(yù)處理器來提升開發(fā)效率和代碼可維護(hù)性。這些代碼在運行前需要經(jīng)過編譯過程。

為了更有效地分發(fā)代碼，我們還會進(jìn)行代碼打包。在編譯之前，代碼還會經(jīng)過linting（代碼檢查）來確保代碼質(zhì)量和一致性。這些步驟構(gòu)成了工程化工具鏈的一部分，有些前端開發(fā)者專注于這一領(lǐng)域的工作。

引擎賦予了前端代碼執(zhí)行的能力，而runtime層則提供了用戶友好的前端框架和SDK。

工具層進(jìn)一步提供了即插即用的編譯和打包工具鏈，這些工具鏈為業(yè)務(wù)開發(fā)提供了極大的便利，業(yè)務(wù)開發(fā)人員可以快速地利用這些工具來滿足業(yè)務(wù)需求。

大部分前端開發(fā)者的工作集中在業(yè)務(wù)開發(fā)層，而這一層也是其他各層服務(wù)的核心。畢竟，業(yè)務(wù)是公司運營和發(fā)展的根本。

5.搭建層

為了提升交付速度并釋放前端開發(fā)人員在業(yè)務(wù)層的生產(chǎn)力，越來越多的企業(yè)開始開發(fā)可視化構(gòu)建平臺，供非技術(shù)人員自行實現(xiàn)特定的需求，從而使前端開發(fā)者能夠?qū)⒏鄷r間投入到其他層面上，處理更具挑戰(zhàn)性的任務(wù)。

許多公司都設(shè)立了專門的前端團(tuán)隊來開發(fā)和維護(hù)這些構(gòu)建平臺，目的是直接滿足一系列常見的業(yè)務(wù)需求。

--------------

不同公司的前端團(tuán)隊可能會側(cè)重于這些層次中的不同部分，這五個層次的完善程度直接影響了前端工作的深度和廣度。

層次越全面，前端開發(fā)者能夠參與的工作就越多樣化，從而推動技術(shù)能力和業(yè)務(wù)創(chuàng)新的發(fā)展。

對于前端開發(fā)者來說，思考自己目前所處的層次以及未來希望發(fā)展的方向是非常重要的。細(xì)想一下，你的工作是在哪一層呢？或者更想做哪層的工作呢？