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