[[432189]]

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

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

這么多種類型的前端工作內容，它們是什么關系呢?前端工作一共有哪些類型呢?

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

前端工作的五層

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

我們分別來看一下：

引擎層

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

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

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

runtime 層

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

前端框架實現了組件化、實現了數據驅動的渲染，讓我們不用直接調用 dom api，只管理好數據即可。數據變動會自動調用 dom api 來重新渲染。

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

工具層

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

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

業務層

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

大多數前端開發是工作在這一層，其他層也都是為這一層來服務的。畢竟，業務才是公司存在的基礎。

搭建層

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

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

五層的完善度

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

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

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

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

總結

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

引擎層、runtime 層、工具層、業務層、搭建層。

不同層的關注點不同。

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

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