preface

Front-end engineering has been an old topic, and there are more and more mature solutions

Just like vue cli, react also has create-react-app. These are basic scaffolding tools. As business scenarios get richer and richer, basic tools can no longer meet daily development requirements. Such as ice – works

Just as the saying goes, “if you want to do a good job, you must sharpen your tools first.” The handy tools can greatly speed up the daily work efficiency, and can also avoid a lot of repetitive work

Especially if we’re working in a team, if everyone is writing their own style of code, it can be costly to maintain, and the risk of having code that’s inherited can be high

The target

In order to improve the team’s development efficiency and experience, we need to make reasonable assessments:

Current status (which fit)

At present, many companies are using micro front-end (such as Qiankun). When developing sub-applications for different business links, materialization of sub-applications can be considered

The implementation of

First of all, according to the cost performance evaluation, the technical capability and cost of the team should be considered comprehensively. Secondly, the relatively lightweight command line interaction should be considered, or the perfect ecology of integrating multiple links like ICE-Works

subsequent

After using the tool for a period of time, each member of the team will have different experience and improvement plan

Tool system

Going back, to design a weapon in hand, we first need to sort out what the front-end development needs to do

phase

First of all, if divided into stages, these stages will be covered:

  1. Initialization phase
  2. The development phase
  3. Testing phase
  4. Release phase

material

Take the VUE project as an example and create a set of reusable templates whose structure includes but is not limited to the following:

In the future, with the increase of templates, material management will be involved. In the early stage, we can consider using Git hosting, and in the later stage, we can consider building our own material platform if the cost performance is high enough

monitoring

The above mentioned data collection tool, although there is no fixed requirement for indicators, we can consider some practical points as a reference for tool optimization

  • Build, publish
    • The number of
    • The average time

Projects that analyze build performance and continually optimize build tool releases frequently may be at higher risk

  • Tool version
  • Functional frequency

The features that are frequently used can be continuously optimized and the features that are rarely used can be cut

The development of

Toolchain development options are many:

  • Command line scaffolding can be developed using Commander in conjunction with Inquirer, vue-CLI does this, and ejS templating engine can make your templates more flexible
  • Vscode plug-in, you can refer directly to ICE-Works

reference

  • How to write a standard front end scaffold
  • Iceworks: From GUI development tools to integrated development workbench
  • Toolchains: What toolchains can improve team effectiveness?