[[432189]]

本文轉(zhuǎn)載自微信公眾號「神光的編程秘籍」，作者神說要有光zxg。轉(zhuǎn)載本文請聯(lián)系神光的編程秘籍公眾號。

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

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

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

前端工作的五層

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

我們分別來看一下：

引擎層

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

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

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

runtime 層

引擎或者說容器實現(xiàn)了 w3c 標準的一些 api 后，上層就可以用前端技術(shù)來開發(fā)應(yīng)用了。但是 w3c 的 api 過于原始，我們一般都會引入一個前端框架、一些 sdk。

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

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

工具層

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

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

業(yè)務(wù)層

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

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

搭建層

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

很多公司都會有一部分前端來做這個搭建投放的平臺，試圖直接解決掉一類需求。

五層的完善度

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

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

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

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

總結(jié)

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

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

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

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

細想一下，你的工作是在哪一層呢?或者更想做哪層的工作呢?