Package management toolpnpm

PNPM has built-in support for multiple packages, creating a non-tiled node_modules, so code can’t access any packages, all files are soft connection access, compatible with NPM instructions, easy to use, if you can use NPM, then you will use PNPM.

To give up

In 2021, it’s time to consider abandoning NPM and YARN.

Build toolsVite

The most popular build tool right now is of course Vite, which is based on native ES modules, skips the concept of packaging, has a super fast module hot update mechanism (HMR), and a silky development experience that makes you never want to touch a webP* again.

To give up

Webpack isn’t so easy to give up, but it’s on the agenda.

CSS schemeTailwind CSS

Tailwind CSS is one of the technologies that front-end engineers want to try most in these two years. Who knows who uses it, atomic CSS solution, expressive semantic type, elegant in every way. After using Tailwind CSS reconstruction, FaceBook saved nearly 70% of the CSS code, which is amazing. Colleagues don’t have to worry about CSS class naming anymore. Note: The larger the project, the more CSS code Tailwind CSS saves.

To give up

Forget preprocessing tools like LESS and SASS. CSS preprocessing tools have completed their historical mission and are now a heavy performance burden.

State management

React Query + useContext is recommended. React Query manages interface state and useContext manages local state

React Query

React Query simplifies server state retrieval, caching, synchronization, and updating in React applications. It provides out-of-the-box state retrieval, pagination retrieval, infinite retrieval, and rolling recovery, reducing our state management logic. ReactQuery maintains all of our server state globally and performs data storage and updates in conjunction with its caching strategy. With this feature, we can take all data interacting with the server out of a state management tool like Redux and hand it all over to ReactQuery.

useContext

React Hook natively supports state management solutions.

To give up

  • ReduxTemplate syntax is a lot, although there are some auxiliary tools, but still troublesome, TS support is not friendly, making the front end become a memory job, not elegant.
  • MobXThe reactive working mode is not recommended because it contradicts the React one-way data flow concept.

Mobile component libraryzarm

One amazing thing about the React ecosystem is that various component libraries emerge one after another, but there are very few Mobile component libraries. Previously, antD-Mobile was the only one available for everyone, but now there is a good choice of Mobile component libraries. Zarm, developed by ZAN, has rich components, easy to use and quick response from developers. Support for use in Vite.

To give up

Antd-mobile hasn’t updated for 4 years, so many ideas are old and can be considered abandoned.

Rem solution

Do not change the root font size

Do not change the root font size

Do not change the root font size

A lot of people will change the root font size during page initialization and then use rem layout all the time and think they are smart. This is a bad habit That Alibaba has brought to the front end of the country. Just look at the poor performance of Alibaba’s products on the iPad and see how bad this solution is.

More importantly, the modification of the root font size is very unfriendly to visually impaired people. If users set the browser font to a large size, and you change it back to restore the design draft, it will be beautiful on the mobile phone, and users will not be able to see it, and there will be no technical personnel to take responsibility for the society.