preface

This article is closer to discussion than conclusion!!

Approaching the end of the year, the third year of work. Last year, with the change of my status, I stopped thinking about the code layer and began to think about how to improve the output efficiency and quality of the team, how to improve the development level of the team, and how to urge members to grow together. In this process imperceptibly learned to grow up a lot, special record together to discuss learning, is also a year-end summary.

Front bench

As shown in the figure, in order to improve the output efficiency, we carried out some packaging tools in the front end. In order to unify the documents and online functions of these tools, we built a tool platform based on AntDesignPro (as shown below).

NPM private repository

At first, we put our component libraries and tool libraries in the public community, but in fact, as tool functions and component libraries were more tied to business logic, open source distribution in the public community was not suitable for security reasons, so the idea of building a private NPM was born. Based on the community activity, we chose Verdaccio to build the private library.

verdaccio

Verdaccio is relatively simple to use and can be installed via NPM on the server.

NPM install -g verdaccio install verdaccioCopy the code

After installation, if there is no special configuration to set, enter the command verdaccio to run, the default running port is 4873:

After running on the server, modify the NPM source locally to publish and download the package in a private repository.

npm set registry http://********:4873
Copy the code

The deployment tool

Earlier I wrote about how to build a deployment tool for you using Node, with a link to juejin.cn/post/689895… The article will almost certainly include a plug-in required for deployment tools. If you are interested, you can check it out by yourself.

Here’s some additional personal thought: The easier it is to deploy the tool, the more dangerous it is. Especially for online environments. We need to be in awe of the online environment at all times, so deployment tool individuals are more likely to use it in a test environment.

Group scaffolding

At present, our technology selection mainly focuses on the React+Ts ecology. Scaffolding, we divided into H5 end and Web end. For this scaffold to remove some necessary functional items (such as: packaging on demand, etc.), we hope that this scaffold can quickly combine the business functions we need, such as: monitoring module, menu permission module, etc. :

Component library

There are a lot of libraries out there, and we don’t want to reinvent the wheel. The library is more based on reusable components encapsulated in our business functions. Like utility libraries, component libraries are stored in a private repository. At the same time, encapsulating the business as a component is more preparation for later attempts at page customization.

Tool library

The contents of the tool library change iteratively all the time, and how to manage the tool functions uniformly has been a problem for us. We finally decided to use the node package management style to distribute on the proprietary NPM and display the usage documentation on the workbench.

Request secondary encapsulation

Our request encapsulation functions mainly focus on:

  • Encryption packages
  • Middleware Add Token
  • Request error throw
encryption

Encryption for the front end has always been a very controversial point, but in better than nothing and party A baba tough requirements. We still managed to implement a layer of encryption. Encryption method is mainly mixed encryption, both: symmetric encryption + asymmetric encryption.

Attached here is a very good article: mp.weixin.qq.com/s/i_Clg5kmT…

Automated testing

Automated testing is something you’ve always wanted to try out, but as a small team, it’s impossible to write test scripts for simple tests. But automated testing can be very useful when refactoring functional pages or developing complex pages.

puppeteer

Puppeteer is a Node.js package released by the Chrome development team in 2017 to simulate the operation of the Chrome browser. Puppeteer is used for:

  • Web page screenshots or PDF generation
  • Crawl SPA or SSR sites
  • UI Automation testing
  • Create an up-to-date test automation environment and run test cases using the latest JS and the latest Chrome browser
  • Test the Chrome extension

In summary, Puppeteer can do everything a browser can by launching Headless Chrome. Here is a script that tests the error message on the Login page:

import puppeteer from 'puppeteer';

describe('Login', () => {
it('should login with failure', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage('');
  await page.goto('http://localhost:8000/user/login');
  await page.type('#userName', 'mockuser');
  await page.type('#password', 'wrong_password');
  await page.click('#subtmitBtn');
  await page.waitForSelector('.ant-alert-error'); // should display error
  await page.close();
  browser.close();
});
});

Copy the code

The above script tests the ability to respond to error messages when incorrect account information is entered.

other

To improve the readability of the team’s code, we also made the following specifications:

  • Use a unified ESLint
  • Unify file structure and naming conventions
  • Specify file sizes, function sizes, comment specifications, etc.

summary

The last year has seen a trickle of tools to improve team productivity, but most of them are secondary packages based on resources from the open source community. Hopefully in the future there will be tools with individual or team tags.