前端工作的五層，你工作在哪一層？

現(xiàn)在前端的工作遠(yuǎn)不只切圖那么簡(jiǎn)單，工作內(nèi)容豐富了許多：有的前端工程師會(huì)做前端框架、做 SDK，有的會(huì)做搭建平臺(tái)，有的會(huì)做工程化工具鏈，有的會(huì)做業(yè)務(wù)開(kāi)發(fā)，還有的會(huì)參與引擎層，定制 js 引擎和實(shí)現(xiàn)渲染引擎等。

這么多種類型的前端工作內(nèi)容，它們是什么關(guān)系呢？前端工作一共有哪些類型呢？

這篇文章就來(lái)探究下這個(gè)問(wèn)題：前端的工作內(nèi)容都有哪些，之間的關(guān)系是什么。

前端工作的五層

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

我們分別來(lái)看一下：

引擎層

現(xiàn)在前端代碼的運(yùn)行容器不只是瀏覽器了，也有了很多別的容器，比如可以用 electron 做桌面端的跨平臺(tái)開(kāi)發(fā)，通過(guò)前端技術(shù)棧開(kāi)發(fā)桌面應(yīng)用，比如 react native、weex、或者自研跨端引擎可以用前端的技術(shù)棧來(lái)開(kāi)發(fā)安卓和 ios 的 app，比如小程序引擎也支持前端技術(shù)棧來(lái)開(kāi)發(fā)跨平臺(tái)的小程序。

這些容器的實(shí)現(xiàn)基本都是擴(kuò)展了 js 引擎，比如 v8、javascriptcore，給它們注入了一些 dom api 和設(shè)備能力的 api，也實(shí)現(xiàn)了渲染引擎，由不同的平臺(tái)實(shí)現(xiàn) css 的渲染。從而支持了前端代碼運(yùn)行在不同的平臺(tái)。

js 引擎的定制和渲染引擎的實(shí)現(xiàn)都是基于 c++， 有一些懂 c++ 的前端同學(xué)會(huì)參與這些事情，比如阿里的 kraken 渲染引擎就是前端同學(xué)開(kāi)發(fā)的。

runtime 層

引擎或者說(shuō)容器實(shí)現(xiàn)了 w3c 標(biāo)準(zhǔn)的一些 api 后，上層就可以用前端技術(shù)來(lái)開(kāi)發(fā)應(yīng)用了。但是 w3c 的 api 過(guò)于原始，我們一般都會(huì)引入一個(gè)前端框架、一些 sdk。

前端框架實(shí)現(xiàn)了組件化、實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)的渲染，讓我們不用直接調(diào)用 dom api，只管理好數(shù)據(jù)即可。數(shù)據(jù)變動(dòng)會(huì)自動(dòng)調(diào)用 dom api 來(lái)重新渲染。

有一部分前端同學(xué)的工作就是維護(hù)前端框架和 sdk，比如百度的前端框架 san、阿里的跨端用的前端框架 rax 等，還有各種各樣的 js sdk。

工具層

引擎支持了 js 的執(zhí)行、css 的渲染，但是我們開(kāi)發(fā)時(shí)可能不會(huì)直接寫 js、css，而會(huì)使用 typescript、es next 等，css 也會(huì)用 less、sass 等預(yù)處理器，所以需要經(jīng)過(guò)編譯。而且為了更好的分發(fā)代碼，還會(huì)做代碼的打包。在編譯之前還會(huì)對(duì)代碼做 lint。

這些就是工程化的工具鏈，有一部分同學(xué)是做這些工作的，比如包裝一下 webpack 或者 vite，做成開(kāi)箱即用的 cli，比如我上家公司的自研編譯器。比如字節(jié)剛開(kāi)源的 mordern.js 就是這個(gè)范疇。

業(yè)務(wù)層

引擎提供了前端代碼的執(zhí)行能力，runtime 層提供了易用的前端框架和 sdk，工具層提供了開(kāi)箱即用的編譯打包工具鏈，那業(yè)務(wù)開(kāi)發(fā)同學(xué)就可以基于這些快速的完成業(yè)務(wù)需求了。

大多數(shù)前端開(kāi)發(fā)是工作在這一層，其他層也都是為這一層來(lái)服務(wù)的。畢竟，業(yè)務(wù)才是公司存在的基礎(chǔ)。

搭建層

為了提高交付效率、解放業(yè)務(wù)層前端開(kāi)發(fā)，現(xiàn)在越來(lái)越多的公司會(huì)做可視化搭建的平臺(tái)，供非開(kāi)發(fā)人員來(lái)自己實(shí)現(xiàn)一些需求，從而使得前端開(kāi)發(fā)有更多的時(shí)間去做一些其他層的更有挑戰(zhàn)性的事情。

很多公司都會(huì)有一部分前端來(lái)做這個(gè)搭建投放的平臺(tái)，試圖直接解決掉一類需求。

五層的完善度

上面的五層基本涵蓋了前端的絕大多數(shù)工作內(nèi)容了，但是不同的公司這五層的完善度不同，有的公司可能只會(huì)有業(yè)務(wù)層和工具層的工作，而有的公司會(huì)做搭建層的事情，也有的公司會(huì)做 runtime 層甚至引擎層的事情。

我上家公司做了這全部的五層的事情：

• 引擎層：有自己的跨端引擎，自己實(shí)現(xiàn)了引擎層的 dom api、設(shè)備 api、渲染引擎。
• runtime 層：有自己的前端框架和其他一些 runtime 庫(kù)。
• 工具層：有自研編譯器、調(diào)試工具、lint 工具。
• 業(yè)務(wù)層：各業(yè)務(wù)線在跨端引擎上，基于前端框架和工具鏈做業(yè)務(wù)開(kāi)發(fā)
• 搭建層：活動(dòng)頁(yè)和其他一些場(chǎng)景已經(jīng)落地了搭投平臺(tái)

這五層的完善度決定了前端可以做的事情的范圍。上家公司前端工作內(nèi)容涉及全部的五層，縱深比較大，所以在那里可以做的事情就比較多。

總結(jié)

前端的工作內(nèi)容種類比較多，但是總體可以劃分為五層：

引擎層、runtime 層、工具層、業(yè)務(wù)層、搭建層。

不同層的關(guān)注點(diǎn)不同。

這五層的完善度也決定了前端可以做的事情的縱向深度，這五層越完善，前端可以做的事情越多。

細(xì)想一下，你的工作是在哪一層呢？或者更想做哪層的工作呢？