Bytedance Web Infra — Zhang Shuisheng

Evolution of scaffolding

In front-end r&d activities, scaffolding is responsible for the initial work of the project and is the basis for subsequent R&D activities. A typical r&d activity flow might look like this: Execute the scaffolding build project -> develop -> build -> test -> deploy.

When the team is small or the business is simple, scaffolding may not be necessary. A common way to initialize a project is to copy it directly from an existing project and then delete business-related code as appropriate, preserving and modifying the underlying code.

If the business develops rapidly, it is necessary to build a new project every once in a while, which is undoubtedly cumbersome, so the second way is developed. Upload the template code formed in the previous way to the repository for maintenance. When a new project needs to be created, clone the repository code, delete the.git directory, and upload it to the repository of the new project. And the subsequent iterations of the template warehouse can be better maintainability.

Every time you create a new project, you need to go through the following process: Clone code -> delete.git directory -> associate and push to the new repository. Encapsulate this process as a CLI command, for example, called fe-cli, and execute fe-cli projectName every time you need to create a new project. Thanks to the flourishing node.js ecosystem, encapsulating the CLI is easy, as long as you combine related libraries (commander Inquirer Shelljs, etc.). Furthermore, you can implement template selection in the CLI so that different types of projects can be created.

Maintenance costs of scaffolding

Is used up

One obvious problem is that the time and labor cost of maintaining such a scaffold would seem to be not worth it if not for a dedicated infrastructure team. Scaffolding, however rich and interactive, is only used to create projects, generating a bunch of template code that is then set aside until the next time the project is created.

Version update

Another troublesome problem is that if the scaffold has been upgraded, it is highly likely that the user will be using the same version as the last one installed, unless there is a mandatory testing of the version inside the scaffold and the user is required to upgrade. It was embarrassing that the function that had been updated so hard could not be used in time. One possible solution is to require users to use NPX instead of NPM I-G, which undoubtedly adds a small cost to usage.

Engineering solution – code initialization

At Goofy Studio, the all-in-one front-end development workbench within byte that covers all front-end development activities, such as application creation, development, build, deployment, and cloud IDE, the solution is “engineering solutions.”

The “engineering solution” is not simply an upgraded version of the “scaffolding”, but rather the culmination of a series of “best practices” of front-end R&D activities. There are many configurations in the project, among which the “code initialization configuration” covers the “scaffolding” function.

We provide three code initialization modes: template mode, cloud CLI mode and Webshell mode. In fact, the code initialization of the project scheme is also done with initial code generation, new warehouse, push code and other operations, which is not much different from the implementation of scaffolding in the local machine. However, the code initialization of the project scheme is completely performed in the cloud container, avoiding the failure caused by local environment differences to the greatest extent, and the process is fully automatic without manual intervention, which greatly saves time.

Even better, the project creation of engineering scheme can create all kinds of services (such as service node construction, service node deployment, etc.) and release pipeline at one time. After the project is created, it can be released. It is very friendly for new people and very easy for senior old people.

Since this article focuses on how to replace scaffolding, the rest of the engineering plan is not covered.

Template method

The simplest approach is to configure a template code zip (tar) that will be uploaded directly to the newly created repository when the code is initialized.

Cloud CLI

This approach executes the configured commands in a container to initialize the code and uploads the artifacts as template code to the newly created repository. You can configure all parts of the process, such as globally installed packages, commands to execute, product directories, files and folders to ignore, and so on.

The following figure shows the code initialization configuration to create a Vue project. Since the compilation platform defines the compilation process through a configuration file (scm_build.sh), we provide @byted/studio-cli to generate this configuration file.

The figure above uses -p default to generate the simplest Vue project, but some built-in functions such as Vuex Babel may need to be enabled in real business. Therefore, we provide a “Schema input form” to enable users to pass data to the CLI during initialization. To demonstrate the schema, we regenerated a Gulu project (Gulu is a development framework used internally) and provided template selection. The code initialization part is configured as shown below:

To render the template drop-down menu shown above, we need to configure the schema:

{
  "schema": {
    "key": "gulu"."isObject": true."items": [{"key": "template"."label": "select template"."items": [{"key": "http-server"."label": "http-server"
          },
          {
            "key": "http-server-ts"."label": "http-server-ts"
          },
          {
            "key": "thrift-server"."label": "thrift-server"
          },
          {
            "key": "thrift-server-ts"."label": "thrift-server-ts"
          },
          {
            "key": "plugin"."label": "plugin"
          },
          {
            "key": "plugin-ts"."label": "plugin-ts"}]}]},"customUIConfig": {
    "template": {
      "ui": "Select"}}}Copy the code

The schema syntax of this part adopts a dynamic form scheme developed by ourselves.

Webshell way

To further lower the configuration threshold for code initialization, we have also developed a Webshell approach that does not require any schema forms to be configured, just CLI commands. When code initialization is performed, users can interact directly on the webshell of the page, completely mimicking the CLI on the native machine.

Webshell mode will also serve as the bottom of the CLI mode. Even if the CLI is upgraded and some problems are added, and the schema is not updated in time, users can also complete the interaction of the new problems in Webshell and successfully initialize the code.

summary

Using the code initialization configuration of the project schema instead of scaffolding maximizes the code generation success rate by creating the project with the latest version of THE CLI each time in a brand new container.

Engineering solution market

As mentioned earlier, “engineering solutions” are the sediment of the “best practices” of front-end R&D activities, so we made “engineering solutions market” to provide “best practices” in physical form, and anyone can use them directly.

Putting the team’s customized engineering scheme into the engineering scheme market can facilitate the team’s business development and maintain the uniformity of technology on the one hand, and export its influence to the outside world on the other hand.

About the Byte Terminal technology team

Bytedance Client Infrastructure is a global r&d team of big front-end Infrastructure technology (with r&d teams in Beijing, Shanghai, Hangzhou, Shenzhen, Guangzhou, Singapore and Mountain View), responsible for the construction of the whole big front-end Infrastructure of Bytedance. Improve the performance, stability and engineering efficiency of the company’s entire product line; The supported products include but are not limited to Douyin, Toutiao, Watermelon Video, Feishu, Guagualong, etc. We have in-depth research on mobile terminals, Web, Desktop and other terminals.

Now! Client/front-end/server/side intelligent algorithm/test development for global recruitment! Let’s change the world with technology. If you are interested, please contact [email protected] with the subject line resume – Name – Job intention – desired city – Phone number.