前端工作的五層，你工作在哪一層？
現在前端的工作遠不隻切圖那麼簡單，工作内容豐富了許多：有的前端工程師會做前端架構、做 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 層、工具層、業務層、搭建層。