Intensive reading of "2021 Front-end Rookie Review"

2021 JavaScript Rising Stars Review front-end open source projects every year, based on the increase in Stars last year. Although Star is only a dimension, it at least reflects the popularity. According to this ranking, the trend of the front-end community can be roughly analyzed.

intensive reading

The list includes 13 sub-lists including overall list, front-end framework, Node framework, build tool, Vue ecosystem, React ecosystem, CSS-In-JS, testing, mobile, desktop, static site building, state management, and GraphQL. These are the most active areas of front-end open source, which are introduced separately below.

Overall list

The first place zx is a command-line tool, which extends Bash support based on Node syntax, and can easily perform input and output between Node and Bash, just like Node natively supports Bash. It solves the pain point that Bash is inseparable from Bash, but Bash is not as natural as Node when writing a large piece of logic.

The second place vite was the most shining star last year. It is a front-end construction tool with the concept of bundles. The service was initially related to vue, but after the framework-independent upgrade, it was very popular in the react and angular ecosystems. It solves the pain points that webpack compilation is too slow, other bundled solutions are not enough out of the box and there are a lot of compatibility issues.

The third place is next.js The project started in 2016 is a large and comprehensive React family bucket. It is positioned as a front-end integration framework that major factories will make by themselves, but it is more fashionable and continues to add many popular functions Such as Server Component. This is related to Vercel, the star company where next.js is located. This company has dug up a large number of well-known open source figures, including the author of Svelte and the core members of the React team, so maybe new toys in the community will be used in next.js first and then open source independently. It gives front-end best practices and solves the problem of not having the energy to continuously optimize the project in an all-round way, or not chasing the trend, because next.js itself is becoming the birthplace of the front-end trend.

Fourth place react Needless to say, the leading framework of data-driven, reactive programming and functional, it has changed the efficiency of front-end development.

Fifth place tauri lighter desktop application development framework than electron, based on any front-end framework. It solves the pain point of the huge native development and learning cost of each platform when front-end developers encounter desktop application development scenarios.

The sixth place Tailwind CSS is a css framework, it provides a lot of semantic className, provides many best practices, so you have the opportunity to take care of css orderly. It solves the pain point of front-end project CSS being messy and nobody really cares.

The seventh place is vscode cosmic IDE, which solves the pain point of programmers who do not really have the software to write code.

The eighth place Slidev is a framework for rendering markdown into PPT, developed based on technology stacks such as vite + vue. The PPT developed with it is very simple and beautiful, and it is very suitable for sharing in public. Not only does it look pleasing to the eye, but you can also inadvertently switch to the Markdown source code to hotfix small mistakes and show your geek spirit. It solves the pain point that you really only want to show a few sentences, but show them in PPT mode.

The ninth place NocoDB is a database UI management tool that supports multiple data sources. But in fact, it has a larger pattern, that is, benchmarking airtable , that is, after using NocoDB to connect to the database, all data visualization operations and functions have become possible, and provide a large number of commonly used Gantt charts, spreadsheets and other views , and can be converted to each other, and ultimately the data is actually stored in the connected database, but you don't need to care about the details. It solves the pain point of investing a lot of R&D resources in developing various production tools based on two-dimensional tabular data.

The tenth place is Vue same as React.

front-end framework

The first place react in the overall list.

The second Vue also in the overall list.

The third place svelte is a framework similar to vue, but the feature is that it attaches great importance to the compilation time and ignores the runtime, that is, the runtime does not introduce any runtime framework except for the necessary logic. To be honest, I think that compared with vue and react, it has no core advantages in serious projects, because it does not have that kind of magic ability, which can greatly reduce the size of large projects and improve performance, but will be subject to its syntax and Compile-time features have side effects. But the only advantage is that it is framework agnostic, that is, components compiled with svelte have almost no additional runtime framework code, and can be combined with other projects at the lowest cost and with the greatest isolation.

Fourth place angular author has not paid attention to the angular framework for a long time, so I cannot give any comments. But judging from the fact that svelte is more popular than angular, most developers may have the same attitude towards angular as me.

Fifth place solid similar to svelte, compiled ahead of time and packaged on demand. Importantly, its API createEffect useEffect . After the dependency changes, only the function will be re-executed instead of causing the entire component to be re-executed. The update is even more extreme.

The highlights of the front-end framework are the concepts of svelte and solid, that is, recompile time, light runtime, more atomic update granularity, and more direct invocation of native browser methods to improve performance. It's hard not to think that this is a new trend in front-end frameworks, but I found out that the benefits brought by this kind of innovation are negligible in normal projects, so in fact, the front-end frameworks in 2021 still haven't been able to jump out of the creation of the Big Three. It is a new concept, and the "static" framework represented by svelte and solid can only be regarded as a micro-innovation.

Node framework

The first place next.js in the overall list, and it is the best in the Node framework.

The second place is 161e4c6a96d43e is very similar to next.js. As far as I know at the time, it is because next.js starts slowly and the source code does not support ts, so there is this more fashionable new framework. But in fact, next.js has been changed to ts for a long time, and as the overall list said, it has begun to lead the trend, so it is not to blame for the overlapping of nest positioning, but only to blame next.js for the follow-up force too fierce. The only feature of nest is that there is no UI library bound.

The third place Strapi dedicated to serving API scenarios, providing an API management background, which solves the pain point of only needing a convenient API management, but not wanting to understand a large and comprehensive back-end framework.

The fourth place remix is actually similar to next.js. It was developed by the author of react-router and has only been open sourced soon. Further observation is required.

The fifth place is nuxt.js is next.js in the vue field.

It is worth mentioning that svelte also has its own exclusive framework sveltekit , so most of the Node back-end framework disputes are actually playing the full stack card. After all, the advantage of Node is that it supports the js language, and the current-end application is based on a certain framework At the time of writing, if there is a Node framework that can seamlessly integrate this front-end framework, it is better than a non-Node framework.

However, most of the big factories are separated from the front and back ends, so this kind of full-stack dominant framework does not have many opportunities to appear in China. If you are a personal blogger, it is still the first to use the full-stack framework to build a website.

build tools

The first place vite in the overall list, and it is also the best in the build tool.

The second place esbuild is a build tool written in go, which is suitable for a wider range of applications. Its compression module was integrated in advance by major builders when bundles were not mature, and vite was also compiled based on esbuild, but The popularity of vite is higher, indicating that the overall bundled solution has matured in 2021.

The third place, swc , is famous for being written in rust, similar to esbuild, but because it relies on the feature of compiling to wasm from rust, it supports online compilers, which is very convenient. swc is also used as infrastructure by a large number of new generation construction tools, which was intensive reading of "Rust is the Future of JS Infrastructure" .

The fourth place turborepo is a monorepo project management tool written in go, which is an alternative to lerna.

Fifth place nx is also a monorepo management tool.

Different from frameworks, construction tools often present a nesting doll structure. Either you have me or I have you. Each popular library focuses on solving a certain key problem, constantly nesting dolls and nesting dolls, and finally forming a great family. bucket.

Vue Ecology

The first place Slidev in the overall list.

Second Vue Element Admin based vue management background, has the authority to verify some of the best practices, the use of vuex managed state.

The third place is Headless UI is a completely unstyled basic component library that supports React and Vue. The examples on the official website are all composed of Tailwind CSS built-in styles. It solves the pain point of custom styles "actually disgusting" after UI component library binding styles.

The fourth place is Naive UI is a Vue component library, there is not much special, but it is on the list. Looking at the star trend, in June 2021, the star increase is ten times higher than that after that. It is estimated that after a wave of open source promotion, the follow-up increase will be very slow. It is no accident that it will fall out of this list next year.

The fifth place vue-next is vue3, the number of stars is only 13% of vue2, but this year's star growth is half of vue2.

Vue3 also comes with a state management library pinia , and its ecology is very complete.

React ecosystem

The first place next.js in the overall list.

The second place Ant Design although aspired to be the best React component library in the West Lake District, has actually become the best React component library in the world.

The third place MUI is the famous material design UI component library. What I have the most influence on it is the water ripples that appear after the button is clicked, which is a major feature of material design. Created as early as 2014, when Ant Design was not popular, it was the first choice for open source component libraries.

The fourth place remix in the Node framework list. Like next.js, it is a Node framework bound to the React ecosystem, so it also appears in the React ecosystem.

The fifth place react-use is a very small React Hook library, which provides commonly used hooks usePrevious and useDebounce

After reading the entire React ecological list, whether it is the number of high-quality ecological libraries or the number of Stars that increased last year, they are better than the Vue ecosystem. Behind this is the battle between pure functions without side effects and responsive views with automatic dependency collection. Even in the React ecosystem, there are high-quality MVVM libraries such as mobx-react. These two programming paradigms will coexist for a long time.

CSS-In-JS

The first place vanilla-extract the dark horse in 2021, focusing on zero runtime and TS support. Zero runtime is done at compile time through the @vanilla-extract/webpack-plugin plugin.

The second place styled-components is the earliest and most mature CSS-In-JS framework. Although the runtime incompatibility between versions made me give up, I have to say that it is the originator of this direction.

The third place stitches very similar to the first place, and it also focuses on zero runtime, but it does not mention whether it is friendly to TS.

The fourth place Twin implements the syntax of CSS-In-JS version based on Tailwind CSS . It can be considered as a CSS-In-JS library with a set of best practices built in, and it does not solve too many pain points, but if If you like both Tailwind CSS and CSS-In-JS, you may love UJ's choice of Twin.

The fifth place is Emotion is also a relatively complete library, basically all CSS-In-JS syntaxes can be supported.

Compared with the traditional CSS-In-JS library, the zero runtime of the first vanilla-extract is a highlight and a new trend in this direction.

test

The first place Playwright is a cross-browser and cross-platform testing framework, which can use js code to open screenshots or comparisons of arbitrary url addresses, which solves the pain point of building an automated testing platform that requires writing the underlying framework from scratch.

Second place Storybook is a very famous documentation tool. Many open source components and project documents are created based on Storybook. The magic is that it also supports unit test , test and print out test results when you access UI components. Storybook has become an all-in-one component development tool.

The third place is Cypress and Playwright were born earlier, but because they do not support multi-tab pages and only support js, they are only popular in the front-end. From the perspective of test engineers, they are not as easy to use as Playwright, which supports multiple languages.

The fourth place is Puppeteer is a test tool based on Chrome’s headless browser launched by Google in 2017, but in 2020 Microsoft’s Playwright is even better with cross-browser features.

5th place Jest is a leader in code-level unit testing tools, covering the entire framework. As long as you want to unit test your code, you can choose Jest.

Measuring and testing framework around a single browser testing these two sub-areas, in 2021 there has been cross-browser testing this feature direction in the field of the browser, there is not much change in the field of single measure, at most, out of a Vitest let alone measure Running faster, this library may shine when it stabilizes in 2022, and may even replace Jest due to the popularity of Vite.

mobile

The first place ReactNative is a React-based Mobile Native development framework. The author has used it for a while, but I can only say that I can't have too much expectation, because it greatly limits the web grammar. If you think you can easily master the front-end knowledge If you use it, you will be disappointed, don't hold this expectation from the beginning. In addition, the cross-end is really painful. For example, SwitchAndroid and SwitchIOS make you not feel Write Once, Run everywhere (although the official does not say so).

Second place Ionic is a cross-platform build tool across front-end frameworks, which solves the pain point of ReactNative's inability to run everywhere, but also brings the problem of inflexibility, that is, platform-specific features cannot be used.

The third place Expo is a one-stop cross-end development tool based on ReactNative. Its app is very fool-proof and has built-in debugging capabilities. It can be said that it can help you step on the pits that ReactNative wants to step on.

The fourth place Quasar can be considered as the Vue version of ReactNative.

The fifth place is Flipper is a native application debugging tool, which can be regarded as the Chrome DevTools of the mobile application version, which supports connecting to remote terminals and solves the pain point that mobile applications are difficult to debug with a computer.

In fact, Flutter . Although it does not belong to the front-end direction, just as the front-end scaffolding is more and more written in Rust and Go, it is acceptable for Native to use Dart.

Looking at the mobile terminal from the front-end perspective, the only requirement is Write Once, Run Anywhere, and then make the debugging experience better. The compatibility and scalability of Native are stronger, which is a perfect solution.

Speaking of cross-end, Flutter-based kraken is definitely worth mentioning. It uses Flutter's high-level rendering layer capability and solves the problem that Dart's ecology is not friendly to the front-end. The bridging layer, if it can stably cover a large number of scenarios in Hand Tao next year, it must be a solution worth considering.

Summarize

There are more lists and I will not summarize them one by one. If you feel that it is not enough, you can go to 2021 JavaScript Rising Stars the introduction and source code of these top star projects to have a deeper understanding.

Finally, a few key features of the front-end field in 2021 are summarized:

Programming languages are in full bloom. In the future, JS developers will not be equal to front-end developers, because Go, Rust, Dart, and C++ languages can serve the front-end, and in 2021, there will be many scenarios that will be available in the production environment, whether we accept it or not, the front-end will not only There is JS as a language.
The front-end development of the whole family barrel gradually produces technical barriers. In the past few years, it was easy to copy a front-end family bucket, and you can learn a lot of underlying knowledge in the process, but now the accumulation of front-end family buckets is more and more, and the fields involved are more and more extensive, even the introduction of next.js The characteristics will exceed the family bucket you prepared yourself, which means that the knowledge of the family bucket has gradually reached the limit of the breadth of personal knowledge. If you do not have enough energy to keep learning, the best way to keep up with the times is to use a mature family bucket.

The discussion address is: Intensive Reading "2021 Front-end Rookie Review" Issue #390 dt-fe/weekly

If you would like to join the discussion, please Click here , there are new topics every week, published on weekends or Mondays. Front-end intensive reading - help you filter reliable content.

Follow front-end intensive reading WeChat public

Copyright notice: Free reprint - non-commercial - non-derivative - keep attribution ( Creative Commons 3.0 license )

Intensive reading of "2021 Front-end Rookie Review"