2021 JavaScript Rising Stars reviews front-end open source projects annually based on the growth of Star over the past year. Star is just one dimension, but at least it reflects popularity, and it gives you a rough idea of what’s trending in the front-end community.

Intensive reading

The list includes 13 sub-lists, including the overall list, front-end framework, Node framework, build tools, Vue ecology, React ecology, CSS-in-JS, testing, mobile terminal, desktop, static site construction, state management and GraphQL, which are all the most active fields of front-end open source. They are introduced below.

The whole list

Zx is a command line tool that extends Bash support based on Node syntax, making it very easy to input and output from Node to Bash, just as Node supports Bash natively. It addresses the pain point where Bash cannot write large chunks of logic as well as Node naturally.

# 2 vite was last year’s breakout star. It was a front-end build tool for the Bundless concept that initially served vue and later became popular in the React and Angular ecosystem after a framework independent upgrade. It addresses the pain points of webPack compiling too slowly, other Bundless solutions not being out-of-the-box enough, and numerous compatibility issues.

The project of next. Js started in 2016 is a large and complete React family bucket. It is positioned as a front-end integration framework that major manufacturers will create by themselves, but it is more fashionable and constantly adds many popular functions such as Server Component. This has to do with the fact that the star company of next.js, Vercel, has a lot of well-known open source personalities, including the author of Svelte and core members of the React team, so it’s possible that new toys in the community will be used on next.js before being opened independently. It provides front-end best practices and solves the problem of not having the energy to continuously optimize your project in all directions, or not being able to keep up with the trends that are becoming the birthplace of the front-end trends itself.

React needless to say, a leading framework for data-driven, responsive, functional programming that has revolutionized front-end development efficiency.

Tauri is a lighter desktop application development framework than electron, based on any front-end framework. It solves the pain point where front-end developers encounter the huge cost of learning native development across platforms in desktop application development scenarios.

Tailwind CSS is a CSS framework that provides a lot of semantic classnames, best practices, and opportunities to get your CSS in order. It addresses the pain point of front-end projects where CSS is cluttered and no one really cares.

No. 7 vscode universal IDE, which addresses the pain point of programmers not really writing code from software.

# 8 Slidev is a framework for rendering Markdown to powerpoint, based on vite + Vue and other technology stacks. PPT developed with it is very simple and beautiful, very suitable for sharing in public occasions, not only look pleasant, but also inadvertently switch to Markdown source hotfix for a small error, showing your geek spirit. It solves the pain point where you really only want to show a few words, but you have to show them in powerpoint.

NocoDB is a database UI management tool that supports multiple data sources. But it has a larger pattern, namely the standard airtable, box NocoDB connect to the database, after all the operation and the function of data visualization has become possible, and provides a number of commonly used gantt charts, spreadsheets, view, and can convert each other, finally actually data stored in the database connection, but you don’t need to care about the details. It solves the pain point of investing a lot of resources to develop various production tools based on 2d table data.

No. 10 Vue is as quiet as React.

The front frame

# 1 React is in the overall list.

Second place Vue is also in the overall list.

Third, Svelte is a vUe-like framework, but features a heavy emphasis on compile time over runtime, which does not introduce any Runtime framework at all except for the necessary logic. To be honest, I don’t think it has a core advantage in serious projects compared to Vue and React, because it doesn’t have the magic ability to greatly reduce the size of large projects and improve performance. Instead, it has side effects due to its syntax and compile time characteristics. The only benefit is framework independence, meaning components compiled with Svelte have little extra runtime framework code and can be combined with other projects with minimal cost and maximum isolation.

I haven’t followed the Angular framework for a long time and can’t comment on it. But judging by the popularity of Svelte over Angular, most developers probably feel the same way about Angular.

Solid is similar to Svelte in that it is compiled ahead of time and packaged on demand. Importantly, its React useEffect like API createEffect only reexecutes after a dependency change, rather than causing the entire component to be reexecuted, making it even more extreme with point-to-point updates.

The highlights of the front-end framework are the concepts of Svelte and Solid, recompile time, light run time, more atomized update granularity, and more direct invocation of native browser methods for performance gains. It’s hard not to think that this is a new trend in front end frameworks, but I looked through a lot of data and found that the benefits of this innovation are very small in normal projects, so in fact in 2021 the front end frameworks are still not creating new concepts beyond the big three, and the “static” frameworks represented by Svelte and Solid are only micro innovations.

The Node framework

The first place next. Js is in the overall list, riding the dust in the Node framework.

Nest was a lot like next. Js, but as I understood at the time, it was because next. But the truth is that next.js has long since completely changed to TS and, as the overall list suggests, is already leading the way, so it’s not nest that’s to blame, it’s next. The only thing about Nest is that it’s not tied to a UI library.

The third Strapi is dedicated to API scenarios, providing an API management background, to solve the pain point of only needing a convenient API management, but not wanting to understand a large and complete back-end framework.

The fourth remix is actually similar to the position of next. Js. It was developed by the author of React-Router.

No.5 nuxt.js is next. Js in vue.

It is worth mentioning that Svelte also has its own framework, SvelteKit, so most of the contention for Node back-end framework is actually playing a full stack card. After all, Node’s advantage is that it supports JS language, and when the front-end application is written based on a framework, If you have a Node framework that seamlessly integrates this front-end framework, it’s better than a non-Node framework.

However, big factories are almost separated from the front and back ends, so this full-stack advantage frame does not have much chance to play in China, if you are a personal blogger, or the first to use the full-stack frame to build a website.

Build tools

The # 1 Vite is in the overall list, but it’s also in the building tools category.

The second most popular build tool is EsBuild, written in Go. Its compression module was integrated into the build family before Bundless was mature. Vite is also built on EsBuild, but it is much more popular. This shows that the overall Bundless solution has come of age in 2021.

The third SWC is best known for being written in Rust, similar to ESBuild, but with support for an online compiler thanks to rust’s ability to compile to WASM. SWC is also built by a number of next-generation building tools, as mentioned in a close reading of Rust is the Future of JS Infrastructure.

# 4 Turborepo is a Monorepo project management tool written in Go and a replacement for Lerna.

Nx is also a Monorepo management tool.

Unlike frameworks, building tools tend to take on a nesting structure, with each popular library focusing on one key piece of the puzzle, nesting nesting until it becomes a great family bucket.

Vue ecological

# 1 Slidev is in the overall list.

Second place Vue Element Admin based on Vue management background, has some best practices in permission verification, using VUEX to manage state.

Headless UI is a completely style-free library of basic components that support React and Vue. The examples on the official website are all combined with Tailwind CSS built-in styles. It addresses the pain point that custom styles are “actually disgusting” after UI component library binding styles.

At number 4, Naive UI is a Vue component library. There is nothing special about it, but it is on the list. I have a look at the star trend. In June, 2021.6, the rise of STAR is ten times that of later. It is estimated that the open source promotion has just started, and the subsequent rise is slow.

Vue-next, or VUe3, in fifth place, has only 13 percent as many stars as VuE2, but this year’s star growth is half that of Vue2.

Vue3 also comes with a state management library, Pinia, which has a very complete ecosystem.

The React of ecological

The number one next. Js is in the overall list.

Second place Ant Design, although aiming to be the best React library in Xihu District, has actually become the best React library in the world.

The third place for MUI is the well-known Material Design UI component library. What impressed me most about MUI is the water ripple that appears after the button is clicked, which is a major feature of Material Design. Created back in 2014, it was the open source component library of choice when Ant Design went out of fashion.

Remix is a Node framework that is bundled with the React ecosystem, so it appears in the React ecosystem.

React-use is a small react Hook library that provides common hooks such as usePrevious and useDebounce.

Look at the entire React ecosystem list, both the number of good ecosystem libraries, and the number of Star growth last year, are better than Vue ecosystem. Behind this is the debate between pure functions with no side effects and reactive views with automatic dependency collection. Even in the React ecosystem, there are excellent MVVM libraries such as Mobx-React. Both paradigms will coexist for a long time.

CSS-In-JS

Vanilla – Extract was the dark horse of 2021, featuring zero runtime TS support. The zero runtime is output at compile time via the @vanilla-extract/webpack-plugin.

Styled components, the second styled Components framework, is the first and most mature CSS-in-JS framework to be launched. Although I have given up running time incompatibility between versions, it has to be said that it is the ancestor of this direction.

No 3 Stitches, also playing zero time, does not mention how friendly it is to TS.

The fourth Twin implements the CSS-IN-JS version of the syntax based on Tailwind CSS, which can be considered as a set of csS-in-JS libraries built In with best practices. It does not solve too much pain point, but if you like both Tailwind CSS and CSS-in-JS, May love me love my dog choose Twin.

No. 5 Emotion is also a relatively complete library that supports almost all types of CSS-IN-JS syntax.

Compared to the traditional CSS-in-JS library, the no. 1 Vanilla – Extract zero runtime is a highlight, a new trend In this direction.

test

The first offender is a cross-browser, cross-platform testing framework that can be used to open screenshots or comparisons of arbitrary urls using JAVASCRIPT code, solving the pain of building an automated testing platform by writing the underlying framework from scratch.

In second place, Storybook is a well-known documentation tool that is used to create documentation for many open source components and projects. Amazingly, it also supports unit testing, testing and printing out test results as you access UI components. Storybook has become an all-in-one component development tool.

The third-place offender, Cypress and Ourselves, are both early, but haven’t played well on the front end because they don’t support multi-tab pages and only support JS, but haven’t played as well with test engineers as their multilingual counterparts.

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

# 5 Jest is the best single test tool at the code level, covering the entire framework, and you can’t go wrong with Jest if you want to unit test your code.

In 2021, there will be a cross-browser feature in the browser test field. There will be no major changes in the single test field. At most, a Vitest will be introduced to make single test run faster. It may even replace Jest because of the popularity of Vite.

The mobile terminal

The first place is ReactNative, a Mobile Native development framework based on React. I have used it for some time, but I can only say that I can’t expect too much, because it is very limited in Web syntax. If you think you can use it easily with only front-end knowledge, you will definitely be disappointed. Don’t start with that expectation. It’s also very painful to SwitchAndroid and SwitchIOS, for example, you can’t feel Write Once, Run everywhere (although it’s not officially said that).

Ionic is a cross-platform build tool across front-end frameworks that addresses ReactNative’s inability to Run everywhere pain points, but also creates the problem of not being flexible enough to use platform-specific features.

The third place Expo is a one-stop cross-end development tool based on ReactNative. Its App is very stupid and has built-in debugging capability, which can be said to help you finish the pits that ReactNative wants to step on.

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

# 5 Flipper is a Native app debugging tool, which can be considered a mobile version of Chrome DevTools. It can connect to a remote terminal, which solves the pain point that mobile apps are difficult to debug on a computer.

In fact, the excellent frame of the Flutter is missing. Although it does not belong to the front-end direction, Native Dart is acceptable just as front-end scaffolding is increasingly written with Rust and Go.

From the perspective of the front-end, the only requirement of mobile terminal is to Write Once and Run Anywhere, and then do a good job in debugging experience. Native compatibility and expansion are a perfect solution.

Speaking of cross-ends, Kraken, based on Flutter, is also definitely worth mentioning. It takes advantage of Flutter’s ability to perform a rendering layer and solves the Dart ecosystem’s problem of not being front-end friendly by making an HTML + CSS + JS bridge layer to Dart. If mobile can steadily cover a large number of scenes next year, it’s definitely worth considering.

conclusion

There are more lists, but if you don’t like them, check out the introduction and source code of these Top Star projects at 2021 JavaScript Rising Stars.

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

  • Programming languages are in full bloom. JS developers will no longer be front-end developers, because Go, Rust, Dart, C++ will all be available for front-end services, and in 2021 there will be a number of scenarios available for production environments. Whether we accept it or not, there will be more than just JS on the front end.
  • The front end development family barrel gradually produces the technical barrier. In previous years, copy a front-end bucket is easy, can also learn a lot in the process of the underlying knowledge, but now the front buckets of the accumulation of more and more, involved in the field more and more widely, even in the next js introduced features will be beyond your own buckets of modulation, this shows buckets of learned has gradually reached the limit of personal knowledge breadth, If you don’t have the 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 of “front End Rookie Review 2021” · Issue #390 · DT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)