1. The lazy loading

• React native lazy react16.6 or later
• Install bundle-loader to install bundle-loader, which is easy to use. It is easy to install bundle-loader, which is easy to use.
• React-loadable, easy to install and easy to use, rich API.

Why do dynamic import?

Dynamic import is called something I don’t know why, load on demand, lazy load, Code Splitting, Code paging, etc. In short, in SPA, JS code is divided into N pages of files, not all introduced as soon as the user comes in, but wait for the user to jump route, and then load the corresponding JS file. The benefit of this is to speed up the first screen and reduce the waste of resources.

2. Support for TS

Unlike Java, which is strongly typed, JS is a weakly typed language that is very tolerant of the types of variables and does not establish a structured contract between those variables and their callers. If you develop in an environment without type constraints for a long time, it will cause the lack of “type thinking” and form bad programming habits, which is also one of the shortcomings of front-end development, which is worth warning.

Although the ES standard has come a long way in recent years, it still has nothing to do with type checking. You may often encounter a scenario like this:

• You call a function written by someone else, who unfortunately doesn’t leave any comments, and you have to read the logic in order to figure out the argument types.
• To keep your code robust, you dutifully make assumptions about a function’s input parameters and end up serving your boss a delicious bowl of spaghetti.
• Your boss wants you to maintain an important underlying class library. You’ve worked hard to optimize a parameter type, but you don’t know how many references there are. Do you feel a chill down your spine before submitting code?
• TypeError: Cannot read property ‘length’ of undefined “TypeError: Cannot read property ‘length’ of undefined” TypeError: Cannot read property ‘length’ of undefined “TypeError: Cannot read property ‘length’ of undefined” This field is an array! This field is an array! This field is an array!”

Let’s see the Dome below:

1 = ='1'// Numbers and stringstrue

'1'= =true// String and BooleantrueNull == undefined // null and undefinedtrue

letA ={b:1} //a ={b:1} //let arr = [{a:1}];
function mapArr(arrVal){
    returnarrVal.map(ele=>ele.a) } mapArr(arr); //[1] // mapArr(arr) //Uncaught TypeError: Cannotread property 'map' of undefined
Copy the code

This is where TS is needed, which nicely compensates for JavaScript’s shortcomings in static type checking

TypeScript is a superset of JavaScript that can be compiled into JavaScript. TypeScript runs in any browser, on any computer, on any operating system, and is open source.

So, what is it about TypeScript that makes it desirable?

First, type checking. TypeScript does strict static type checking at compile time, which means you can spot potential pitfalls at the coding stage without having to bring them online.

Second, language extension. TypeScript will include features from ES 6 and future proposals, such as asynchronous operations and decorators; It also borrows features from other languages, such as interfaces and abstract classes.

Third, tool properties. TypeScript compiles to standard JavaScript and runs on any browser, operating system, without any run-time overhead. In this sense, TypeScript is more of a tool than a stand-alone language.

In addition, TypeScript helps teams reinvent “type thinking,” where interface providers are forced to think about THE boundaries of apis, transforming themselves from code writers to code designers.

The Dome sub-component interface defines the props name as a string, and the parent component does not pass it, or does not pass it the wrong type, so typescript type validation is prompted at development time.

3. Add the husky: stylelint and tslint to the pre-commit verification

www.yuque.com/dingyin-pah…

4. Configure Commitizen and standardize the commit format so that change.log can be generated automatically

www.yuque.com/dingyin-pah…

5. Unit test JEST

Here is funciton to test the conversion of numbers into English; 0,1,2,3 turn into A, B, C, D

// test the utils method import {numberToLetter} from'.. /packages/utils/index';

let assert = chai.assert;

describe('#numberToLetter()'.function() {
  it('should return -1 when the value is not present'.function() {
    assert.equal(numberToLetter(1), 'B');
  });
});
Copy the code

6. Development process

1. Cut code from master to dev
2. Personal development from dev cut branch locally
3. Personal code merged into DEV for testing, UI benchmarking
4. Merge dev code to master for publishing

Personal branch specification version – Name – task

7.UI benchmarks

Semi-automated UI benchmarks are introduced to ensure correct output from UI components.

The output of a component is ultimately determined by three factors

1. Data source

2. Operating environment (Mac/ Windows different Chrome versions)

Component code

When two of these factors are fixed, it is possible to know exactly how the change in the remaining factor affects the outcome

Based on this corollary, the fixed data source and runtime environment can know how a component code change affects the results

Operating environment Mac/Window Chrome59 Chrome64

ToDo:

1. Improve data source case

2. Develop the implementation process

3. Generate baseline images for each browser