现在前端的工作远不只切图那么简单，工作内容丰富了许多：有的前端工程师会做前端框架、做 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 层、工具层、业务层、搭建层。

不同层的关注点不同。

这五层的完善度也决定了前端可以做的事情的纵向深度，这五层越完善，前端可以做的事情越多。

细想一下，你的工作是在哪一层呢？或者更想做哪层的工作呢？