Looking at 9 open source Vue3 component libraries, I found these front-end trends

PS: Thanks to Lainbo ^[1] and Weijueyusheng [ ^2] for their corrections, the usage rate of css variables is higher than the previous statistics.    5月7日编辑。

The following component libraries are referred to, because some designs are of multiple versions and frameworks, only the Vue3 version is discussed here.

• element-plus ^[3]  - The classic of the classics, with full support for Vue 3

• tdesign-vue-next ^[4]  - Goose factory high-quality UI components, complete supporting tools, neat design, clear documentation

• arco-design-vue ^[5] - ByteDance UI component library open source, big factory logic, perfect design documents

• ant-design-vue ^[6]  - Ant front-end UI library for enterprise-level middle and backend

• naive-ui ^[7]  - Treasure Vue UI library, Vue UI Nova, started with Vue 3

• vant ^[8]  - Youzan team's open source mobile UI component library, fully supports Vue 3

• nutui ^[9]  - produced by JD.com, mobile friendly, oriented to e-commerce business scenarios

• vuetify ^[10]  - old Vue UI, developed based on Google's Material Design style

• varlet ^[11]  - Varlet is a  Vue3 development-based Material-style mobile component library that fully embraces  Vue3 the ecology and is maintained by a component library team established by the community.

TypeScript

流行度：100%
This popular trend has become inevitable, and now more and more interviews are related to TS.

Rollbar is an exception monitoring platform. In 2018, rollbar counted the Top 10 error types in front-end projects ^[12] :

Lots of errors here are empty or undefined. These errors can be easily avoided by using TypeScript.

Using it can avoid 80% of the related errors, of course not. . TypeScript  anyScript 

The other advantages don't stop there, such as the IDE's intellisense, the project is easier to maintain, and so on. If you haven't used TS yet, it's best to start trying it now. TypeScript 

Monorepo

流行度：55%

Including more and more projects are starting to use vue、Reac、Babel  Monorepo

Monorepo refers to the project management strategy of putting all code in one code repository.

Niubi! N open source projects necessary for private life! Collect it now

Advantages of Monorepos

• Dependency management : Shared dependencies, all code in one repository. Version management is very convenient.
• Code reuse : All codes are in one repository, so it is easy to extract business components or tools shared by each project and reference them in the code through TypeScript.
• Consistency : All code is in one repository, code quality standards and unified style will be easier.
• Transparency : All code is visible to everyone, making it easier to collaborate and contribute across teams.

Disadvantages of Monorepos

• Performance : With more and more code, Git、IDE tools like this will become more and more stuck.
• Permissions : Managing file permissions will be more challenging. Git The directory does not have a built-in permission management system, and the entire project cannot distinguish which projects are opened by some departments and closed by some departments.
• Learning cost : For newcomers, the larger the project, the higher the learning cost.

Monorepo is definitely not a silver bullet, and the Monorepo strategy is not perfect, but in some ways it does solve the maintenance and development experience of some projects.

If your project has multiple associated repositories, or is still managing multiple repositories in a way, you can give it a try . submodule Monorepo

package manager

I have used it, but I can't see what package management tool I use. The most important thing is that there are no files. I really don't understand this. As an open source project, does it not need to rely on a unified version? 55%  非npm 45%  lock

npm v1-v2

1. The first generation will lead to repeated installation of dependencies. For example, A depends on C, and B also depends on C. At this time, C will be installed twice. (It is installed twice, not downloaded twice. It will be downloaded to the local cache.) npm 
2. Because it is a tree structure, the node_modulesnesting level is too deep (will cause the file path to be too long)
3. Module instances cannot be shared. For example, React has some internal variables. React introduced in two different packages is not the same module instance, so internal variables cannot be shared, resulting in some unpredictable bugs.

npm v3/yarn

From the beginning and the beginning, we will solve the above problem by flattening the dependencies. npm3  yarn 

All dependencies are flattened into the node_modulesdirectory, and there is no longer a deep nesting relationship. In this way, when installing a new package, according to the mechanism, it will keep going to the superiors . If a package of the same version is found, it will not be reinstalled, which solves the problem of repeated installation of a large number of packages, and the dependency level will not be too deep. . node require node_modules

But at the same time, this also brings new problems

1. Spectre dependencies - packages that are not written in can also be used in the project. package.json
2. Alternate dependencies - For example, A and B both depend on C, but the versions of dependencies are different, one is and the other is . At this time, depending on the position of A and B in the , either the version or the version is used. C  1.0.0 2.0.0package.json C  1.0.0  2.0.0 
3. Tiling to reduce installation does not save time, because of the algorithm, the time actually increases.

npm v5/yarn

This release introduces a lockfile to resolve node_modulesuncertainties in the installation. This allows you to have the same structure no matter how many times you install it node_modules.

However, the tiling algorithm complexity, ghost dependencies and other issues remain unsolved.

yarn v2 PnP

In the 2.x version, the zero-installation mode was introduced, which was abandoned to ensure the reliability of dependencies, and the build speed was also greatly improved. yarn  Plug’n’Play（PnP）node_modules

yarn 2.x Get rid of, install and load modules quickly; all npm modules will be stored in the global cache directory to avoid multiple dependencies; sub-dependencies will not be promoted in strict mode, and ghost dependencies will also be avoided. WeChat search public number: Linux technology fan, reply: linux to get information. node_modules

However, the self -built processing method is separated from the existing ecology of Node, and the compatibility is not very good. resolver  Node require 

pnpm

pnpm It has the advantages of fast installation speed, saving disk space, and good security. It also appears to solve and existing problems. npm yarn

1. Solve the problem of sum by pnpmcombining hard links and symbolic links . yarn npm 

• Hard link : A hard link can be understood as a copy of the source file, which will store the hard link of the project file pnpm globally . Hard links can enable different projects to find the same dependency globally, which greatly saves disk space. store  node_modules  store 
• Soft link : Soft link can be understood as a shortcut. pnpmWhen referencing a dependency, a symbolic link is used to find the dependency address under the corresponding disk directory (.pnpm).

For example, A depends on B, and there is nothing under A, but a soft link. The actual real file is located in the corresponding directory in and hardlinked into the global . node_modules.pnpm [email protected]/node_modules/A store 

And B's dependency exists in . And B, which A depends on, is linked with a soft link , that is, .pnpm/[email protected]/node_modules/B
上面的地址 B \--> ../../[email protected]/node_modules/B

node_modules
├── A --> .pnpm/[email protected]/node_modules/A
└── .pnpm
    ├── [email protected]
    │    └── node_modules
    │        └── B ==> <store> /B
    └── [email protected]
        └── node_modules
            ├── B --> ../../[email protected]/node_modules/B
            └── A ==> <store> /A
复制代码

--> stands for soft link, ==》stands for hard link

The advantage of this nested node_modulesstructure is that only the packages that are really in the dependencies can be accessed, which solves the problem of ghost dependencies. In addition, because dependencies are always storehard links in the directory, the same dependencies are always installed only once, and the problem of multiple dependencies has also been solved.

2. Of course there are some limitations. pnpm 

• pnpm-lock.yaml and inconsistent, incompatible. package-lock.json 
• Some scenarios are not compatible, eg . Electron
• The dependencies of different applications are hard linked to the same file, so you cannot directly modify the dependent files, otherwise it will affect other projects. And because the installation structure is different, the original tools cannot be used. patch-package 

Although there are still various problems, in general, the shortcomings are not concealed.

other

ni  can be understood as the manager of the package manager, ni assuming you use a lockfile (and you should), before it runs, it detects your // to know the current package manager, and runs the appropriate command. yarn.lock  pnpm-lock.yaml  package-lock.json 

The biggest difference between cnpm and cnpm is that the generated directory structure is different, which may cause some problems in some scenarios. Also, no files are generated. However , the directory structure is kept clear, which can be said to find a balance between nested mode and flat mode. cnpm  npm  yarn  node_modules  lock  cnpm  node_modules 

Many interviews will ask why pnpm is fast, in addition to the above storeguarantee that it is only installed once globally, and that it is 软连接guaranteed not to be installed repeatedly. Also, when installing different versions of the same dependency, only the different parts are re-saved.

It is recommended that no matter what package management tool you use, you must add files and upgrade dependencies during version updates. for better security. In addition, search the public account's top algorithm background to reply "algorithm experience" and get a surprise gift package. lock 

esbuild

流行度：89%

esbuild It is a packaging tool written in language , and the speed is more than twice as fast . go  javascript、typescript  webpack  100 

Although the packaging tools are different, there are , , , but they all use packaging in the end. Only one is useless, but it has not been officially released, and it may be changed later. vitewebpackRollup esbuild vuetifyvuetify

In the future , standards will become more and more popular, so the corresponding tool chains will become more and more popular. ESM 

Strictly speaking, vite is not a packaging tool, but a front-end build tool. vite is actually packaged using Rollup and esbuild.

SVG Icon

流行度：55%

For Icon Fontthe flaws, see this Inline SVG vs Icon Fonts ^[13]  article. There are mainly the following aspects:

1. Browsers treat it as text for anti-aliasing optimization, and sometimes the result is not as sharp as expected. In particular, the algorithms for anti-aliasing text under different systems may be different, which may result in different display effects.
2. Icon Font As a font, Icon the size and position of the display may be affected by CSS properties such as font-size, , line-height, word-spacing etc. The style Icon of the container in which it is located may affect the position, which is inconvenient to adjust. CSS  Icon 
3. It is inconvenient to use. First, loading an icon with hundreds of icons and only using a few of them is a waste of loading time. It is also very inconvenient to make your own and integrate multiple icons into one . Icon Font Icon Font  Icon Font  Font 
4. For maximum browser support, at least four different types of font files may be provided. Contains TTF, WOFF, EOT and a font defined using the SVG format.
5. Network delay will cause one to be loaded first . Icon  string

SVG Icon The advantages can be described by the component documentation

1. Completely offline use, no need to download font files from CDN, icons will not render blocks due to network problems, and no need to deploy font files locally.
2. SVG has better clarity on low-end devices.
3. Multicolor icons are supported.
4. More APIs can be provided for the replacement of built-in icons without the need for style overrides.

SVG Icondisadvantages, such as compatibility. (IE: what?)

Of course, overall, Icon Font the impact on performance is not that big. Maybe that's why it's not so popular?

CSS variables

流行度：88%

Although the preprocessing language is still used for writing, but in the end, I tried to convert it . In terms of performance, it's definitely the specification that the browser supports is better. CSS var W3C 

However, many functions such as functions of preprocessing languages ​​are not well supported natively. So the preprocessing language is still very necessary.

Alright, that's all for this article, thanks for watching.

I am a front-end nerd who is trying to grow up.