本文转载自微信公众号《神光的编程秘籍》，作者神说必有光zxg。转载本文请联系神光编程秘籍公众号。现在前端的工作远不止是切图，工作内容也丰富了很多：有的前端工程师可以做前端框架和SDK，有的可以搭建平台，有的可以做工程工具链，还有的可以做业务开发，有的会参与引擎层，自定义js引擎和实现渲染引擎等。前端工作内容的种类那么多，他们之间有什么关系？前端工作有哪些类型？本文将探讨这个问题：前端的工作内容有哪些，它们之间的关系是什么。五层前端工作前端工作大致可以分为五层，从下到上分别是引擎层、运行时层、工具层、业务层、构建层。我们分开来看：在引擎层，前端代码的运行容器不仅仅是浏览器，还有很多其他的容器。比如electron可以用于桌面端跨平台开发，通过前端技术栈开发桌面应用，比如reactnative、Weex，或者自研的跨端引擎都可以使用前端端技术堆栈来开发Android和iOS应用程序。比如小程序引擎也支持前端技术栈开发跨平台小程序。这些容器的实现基本都是扩展了js引擎，比如v8，javascriptcore，在里面注入了一些domapi和devicecapabilityapi，也实现了渲染引擎，实现了不同平台的css渲染。这支持前端代码在不同平台上运行。js引擎的定制和渲染引擎的实现都是基于C++的。一些懂C++的前端同学会参与这些东西。比如阿里的kraken渲染引擎就是前端同学开发的。运行层引擎或容器实现了w3c标准的一些API后，上层就可以使用前端技术开发应用。但是w3c的api太原始了，我们一般都是引入一个前端框架和一些sdk。前端框架实现了组件化和数据驱动渲染，让我们不需要直接调用domapi，管理数据即可。数据变化会自动调用domapi重新渲染。一些前端同学的工作就是维护前端框架和SDK，比如百度的前端框架san，阿里的跨端前端框架rax等，还有各种jsSDK。工具层引擎支持js的执行和css的渲染，但是我们在开发的时候可能不会直接写js和css，而是会用到typescript，esnext等，css也会用到less，sass等预处理器，所以我们需要经过编译。并且为了更好的分发代码，还会对代码进行打包。它还在编译之前检查代码。这些是工程工具链。有同学做这些工作，比如打包webpack或者vite做开箱即用的cli，比如我之前公司自研的编译器。比如字节刚刚开源的modern.js，就属于这一类。业务层引擎提供前端代码的执行能力，运行时层提供简单易用的前端框架和sdk，工具层提供开箱即用的编译打包工具链，所以业务开发的同学可以根据这些快速完成业务需求上去。大多数前端开发都在这一层工作，其他层也为这一层服务。毕竟，业务是公司存在的基础。为了提高交付效率，解放业务层的前端开发，越来越多的公司会搭建可视化平台，让非开发人员自己实现一些需求，让前端开发人员有更多时间做其他事情事物。更具挑战性的事情层。很多公司都会有一部分前端去做这个平台的搭建和上线，试图直接解决一类需求。五层的完善以上五层基本涵盖了大部分的前端工作内容，但是不同的公司在这五层上的完善程度是不一样的。有的公司可能只有业务层和工具层的工作，而有的公司会做构造层的事情，有的公司会做运行时层甚至引擎层的事情。我上家公司把这五层的东西都做了：引擎层：有自己的跨端引擎，自己实现了引擎层的domapi、deviceapi、renderingengine。运行时层：它有自己的前端框架和一些其他运行时库。工具层：有自研编译器、调试工具、lint工具。业务层：各业务线基于前端框架和工具链在跨端引擎上开发。构建层：活动页面等一些场景已经落地。招商平台五层的完善程度，决定了前端能做什么。范围。之前公司的前端工作涉及全部五层楼，深度比较大，可以做的事情比较多。总结一下，前端的工作种类很多，但是可以分为五层：引擎层、运行时层、工具层、业务层、构建层。不同层有不同的关注点。这五层的完善程度，也决定了前端能做的纵向深度。这五层越完善，前端能做的事情就越多。想一想，你的工作在几楼？或者您想在哪一层工作更多？
