Now the front-end work is far more than cutting the diagram so simple, the work content is much richer: some front-end engineers will do front-end framework, do SDK, some will do platform building, some will do engineering tool chain, some will do business development, and some will participate in the engine layer, customize JS engine and achieve rendering engine.

What is the relationship between so many types of front-end work? What are the types of front-end work?

This article will explore the question: what are the front-end work contents and what is the relationship between them.

The front end works on five layers

Front-end work can be roughly divided into five layers, from bottom to top, respectively, engine layer, runtime layer, tool layer, business layer, building layer.

Let’s take a look at each:

Engine layer

Now the front-end code is not only run in the browser, but also in many other containers. For example, electron can be used for desktop cross-platform development, developing desktop applications through the front-end technology stack. React Native, WEEx, or your own cross-end engine can use the front-end technology stack to develop Android and ios apps. The Applets engine also supports the front-end technology stack to develop cross-platform applets.

The implementation of these containers basically extends the JS engine, such as V8 and javascriptCore, to inject some DOM APIS and device capabilities into them, and also implements the rendering engine, which implements CSS rendering on different platforms. This enables the front-end code to run on different platforms.

Js engine customization and rendering engine implementation are based on c++, there are some front-end students who understand c++ will participate in these things, such as ali’s kraken rendering engine is developed by the front-end students.

The runtime layer

After the engine or container implements some OF the W3C standard apis, the upper layer can use the front-end technology to develop the application. But the W3C API is pretty primitive, and we usually introduce a front-end framework, some SDKS.

The front-end framework implements componentization and data-driven rendering, allowing us to manage data without directly calling dom APIS. Data changes are automatically rerendered by invoking the DOM API.

Some front-end students’ work is to maintain front-end framework and SDK, such as Baidu’s front-end framework SAN, Ali’s cross-end front-end framework RAX, etc., as well as various JS SDK.

Tools layer

The engine supports JS execution and CSS rendering, but we may not write JS and CSS directly when developing. Instead, we will use typescript, ES Next, etc. CSS will also use less, Sass and other preprocessors, so it needs to be compiled. And in order to better distribute the code, but also do the code packaging. Lint is also done to code before compilation.

These are the engineering toolchains, some students do these work, such as packaging Webpack or Vite to make cli out of the box, such as my previous company’s self-developed compiler. Byte’s newly opened mordern.js, for example, is in this category.

The business layer

The engine provides front-end code execution ability, the Runtime layer provides easy-to-use front-end framework and SDK, and the tool layer provides out-of-the-box compilation and packaging tool chain, so that business development students can quickly complete business requirements based on these.

Most front-end development works in this layer, and other layers serve this layer as well. After all, the business is the foundation of the company.

Set up layer

In order to improve delivery efficiency and free up front-end development at the business layer, more and more companies are now creating visual scaffolding platforms for non-developers to implement their own requirements, freeing up front-end development to do more challenging things at other layers.

A lot of companies have a front end that does this delivery platform, trying to directly address one type of need.

Five levels of perfection

The above five layers basically cover most of the front-end work, but the degree of perfection of these five layers varies from company to company. Some companies may only work on the business layer and the tool layer, while some companies will work on the construction layer, and some companies will work on the Runtime layer and even the engine layer.

My last company did all five of these things:

  • Engine layer: it has its own cross-end engine, which implements the DOM API, device API and rendering engine of the engine layer.
  • Runtime layer: has its own front-end framework and other runtime libraries.
  • Tools layer: there are custom compilers, debugging tools, lint tools.
  • Business layer: each business line develops business on cross-end engine based on front-end framework and tool chain
  • Scaffolding layer: Active pages and other scenes are already on the platform

These five levels of refinement determine the range of things the front end can do. The previous company’s front-end work involved all five layers, with a larger depth, so there were more things to do there.

conclusion

There are many kinds of front-end work content, but it can be divided into five layers as a whole:

Engine layer, Runtime layer, tool layer, business layer, construction layer.

Different layers have different concerns.

The completeness of these five layers also determines the vertical depth of things that the front end can do; the more complete these five layers are, the more things the front end can do.

Think about it. What floor do you work on? Or what level would you prefer to work on?