The annual Discover the State of JS 2020 results has been released. Every time I read this report, I can quickly understand what happened in the JavaScript world in this year, and it also gives me an opportunity to check and fill in the gaps, which makes me very profitable.

This year, I’m going to share with you the information released in the “grammar” and “framework” parts of the report. I hope it will be helpful and enlightening.

This year’s survey covered 23,765 people in 137 countries, most of them from the United States or Western Europe. Report address: 2020.stateofjs.com/en-US/.

Features

In this section, I will summarize and summarize the usage of the new syntax features since ES6, and occasionally post some of my own opinions. If you have your own opinion on something, please feel free to leave a comment below.

Note that the percentage behind each syntactic feature represents the percentage of surveyed developers who have used that feature.

Grammatical features

Syntax features such as Destructuring (89.1%), Spread Operator (92.8%), and Arrow Functions (97.9%) are already well understood by developers. But equally useful grammatical features like Nullish Coalescing (45.3%) and Optional Chaining (66.7%) don’t seem to be widely used, Don’t want any more ugly A && A.b && A.B.C judges in your code, just start with an A? .b? C is so smart and cool.

Not surprisingly, the syntax feature Private Fields (10.9%) is not only not widely used, but 43.9% of developers surveyed said they had never heard of it. This syntactic feature is proposed in the ES2020 draft and is currently not supported by Firefox, IE and Safari.

But this syntactic feature means that JavaScript is finally going to have syntactically level private class fields. It’s nice to see JavaScript as a prototype-chain-based language taking a small step forward in the OOP paradigm.

Language features

Async/Await (95.2%), Promises (96.2%) old asynchronous solutions seem to be familiar and widely used by developers. But syntax like Decorators (47.4%), Dynamic Import (42.8%), and Proxies (22.3%) Promise.Allsettled () (14.7%) have been Proxies. Not a few people have even heard of it.

If it is difficult to use the object Proxy scheme like Proxy to write business at ordinary times, it is understandable that few people use it. For example, Dynamic Import is used together with webpack to package chunk for asynchronous loading, which is definitely a killer for further optimization of page performance. If you don’t know about it, you can study it in depth.

The promise. allSettled method finally completes the whole bucket of the Promise family. The original promise. all method only works when the set of functions executed asynchronously depend on each other. The Promise. Allsettled method works better.

The data structure

In terms of data structures, Maps (73.4%) and Sets (66.9%) are widely used by developers, while Typed Arrays (34.9%), Data structures such as array.prototype.flat () (39.6%) and new language rules are rarely used in work. BigInt (13.9%) is the least used, but it is certainly not used in general development requirements.

Array.prototype.flat() works fine. Although we can use the Spread Operator to quickly flatten a two-layer Array into a one-dimensional Array, when we need to flatten an Array with more than two layers, It’s much more convenient to pass in parameters to the flat() method.

The browser API

Local Storage (90.6 percent) and Fetch (87.1 percent) are no doubt used by everyone, and there is really no better native solution for Storage and HTTP requests.

The usage of WebSocket (62.6%), Service Workers (42%) and Intl (31.3%) is reasonable due to usage scenarios.

Shadow DOM (42.1%) and Custom Elements (33.4%) are arguably the most crazy browser apis of the year. Think about how efficient and reusable componentization can be achieved by using native browser functionality instead of React and Vue. React looks like it’s going to be obsolete tomorrow. JavaScript fundamentalists have finally taken over.

However, don’t be too happy, the reality is still very sad, let alone there is no mature UI component library like Fusion and Antd that can be used out of the box, how to build SPA applications stably through these apis, the whole community has not yet discussed a React, Vue is as mature a solution as AngularJS, so it’s always good to wait and familiarize yourself with the API first.

As for Animations like Web Audio (20%), WebGL (17.5%), Web Animations (16.3%), WebRTC (14%), Web Speech API (8.2%), WebVR (3.3%) These apis are used only for specific development needs, and it’s not uncommon for them to be used less often, but don’t let that deter you from using them.

Things like Web Audio, Web Speech, and WebRTC are important for streaming and interacting with video, while WebGL, Web Animations, and WebVR are taking the Web world to the next level. I think you really need to think about how you can use these browser capabilities to create new breakthroughs in your own business scenarios, and maybe the next big thing or interaction innovation is on your team. Don’t forget to send me a red envelope (laughs).

other

Finally, looking at the WebAssembly (WASM) survey, 10.5% of developers actually use WebAssembly, 73.9% have heard of it but haven’t used it, and 15.6% haven’t heard of it at all.

I think most front-end developers are in the unheard of quadrant, and there really isn’t a lot of noise in the community about WebAssembly right now. Writing Web applications in C++ and Rust is certainly not appealing to Web developers. How the future develops, I still hold a wait and see attitude.

Technical framework

In the technology framework section, I will focus on the number of technology frameworks used and the level of satisfaction with them, which represent both the current popular technology selection and the likely future popular technology direction. For each of these technologies, I include a link to 🔗 that you can click on for more technical details.

Language style

In 2020, TypeScript dominates the question of how JavaScript should be written properly, with 93% of respondents expressing satisfaction with TypeScript’s ability to discipline their JavaScript code. Developers who don’t embrace Typescript these days are definitely out.

A survey of whether the current language style is satisfactory indicated that developers scored a dismal 3.6 out of a possible 5 in both 2019 and 2020, indicating that JavaScript has a lot of room to explore in more elegant writing.

The front frame

React, Angular, and vue.js are still the top three frameworks in the world without a doubt. But believe it or not, the “most desirable front-end framework” isn’t React but Svelte, introduced in 2019 by Rich Harris. Sixty-six percent of respondents expressed interest in the framework, and 89 percent of respondents said they were very satisfied with using it, all in all.

The Svelte people, as the name suggests, emphasize producing the smallest complete code directly at build time, so that the built components can be used directly without adding the framework itself, so that not only is the packaged application code smaller, but performance is greatly improved due to the lack of diff operations. Unfortunately, Svelte currently doesn’t support Typescript and I don’t know of any major projects using it, which would be a lot for front-end developers to learn.

The data layer

In terms of data layer framework, foreign countries are in a terrible state. However, GraphQL is still the second most popular data layer framework in China, and the most used state management framework is still the well-known Redux. Thanks to GraphQL and React, Apollo Client has been firmly in third place for the past three years.

It is interesting that Vuex and XState, the two frameworks that rose to prominence in 2020, quickly overtook Redux, the old state management framework, and MobX’s body respectively gained the third and fourth place in the list of the most satisfactory display by developers. I Vuex did not how to use, but XState is a solid research and is really worth the price of the good framework, especially the recent popularity of logic layout, arrangement of state and all sorts of choreography, deserve to go up own flow chart, not only immediately feel a lot of tall, and indeed to solving complex application form, difficult to old problem sorted out.

The back-end framework

I have hardly written a server application in the last year, and through research reports, I found that the popularity of Koa, which I am most proficient in, has dropped year after year, to the middle of the usage ranking. Right now, Next. Js and Express are the top choices for developing server-side applications, and they’re all good. If you take a closer look at Hulu, Docker, and Netflix using next.js, those of you who are lagging behind like me should really catch up.

The test framework

When it comes to testing frameworks, Jest has been at the top of the beta framework scene ever since they took the dragon’s stick from Mocha in 2019. Mocha and Storybook are not far behind in the usage rankings, but it seems unlikely that Jest will ever be taken on board.

Notably, the Testing Library Testing framework developed by Kent C. Dodds has attracted the attention of many front-end developers since its release. The Testing Library features DOM Testing, supports all three of the major frameworks, and provides a number of user-friendly and inexpensive apis. Unfortunately, most developers in China do not pay much attention to unit Testing, let alone DOM element level Testing. I dare to predict that Testing Library will remain as tepid as GraphQL in China, which is a pity but there is no way out.

Build tools

Speaking of build tools, there’s a lot to talk about. Webpack still leads the pack with 89% usage, but if you look at what developers are interested in or satisfied with in 2020, you’ll be surprised to find the once-popular gulp.js, Browserify is beginning to have a mid-life crisis, and WebPack has fallen off its pedestal this year, only ranking fourth on the list of most satisfying build tools.

It makes sense to say that TypeScript has overtaken TypeScript in third place. Esbuild and Snowpack are the top two. I’m sure many developers in China will be confused when they hear this. According to the official website, it was 113 times faster than WebPack.

To be honest, as projects get bigger and monorepo becomes more and more popular in China, the build time sometimes directly affects the development experience. A project build time of more than ten seconds does not look like a front-end development scenario, whether it is esbuild or Snowpack. If there is an opportunity, or encourage everyone to try more, sum up experience, benefit the community.

Application/desktop

Without a doubt, the best framework for writing desktop applications in JS is Electron. However, when it comes to developing mobile applications, React Native is not the only choice for 2020. The new Capacitor in 2020 is also very impressive. Although only 10% of respondents actually use React Native, 84% of them say it is used with great satisfaction. However, from the perspective of user experience, the overall satisfaction of mobile/desktop framework is not high, which basically remains at about 3 points in recent years. It seems that the front-end needs more breakthrough technological innovation if it wants to achieve repeated horizontal jump from left to right on each end.

summary

That’s a quick overview of the overall state of JavaScript in 2020. Overall, there will be no breakthrough changes or explosive growth in terms of language features or frameworks and libraries. But take a closer look and you’ll see that there are innovations and practices taking place in various niches, such as improved build performance, better front-end testing, richer Web presentation, and so on.

Some of the most difficult problems in the front-end domain, such as how to practice componentization with higher performance and how to truly implement JavaScript “once developed, run everywhere”, are still unresolved, in other words, waiting to be solved by smarter developers.

If I had to ask what the hottest technology of 2020 is, I would argue that the award goes to TypeScript. With new versions of TypeScript, writing front-end code is getting more and more relevant.

Above, if you like this article, don’t forget to like or share, let more people see it. These will be seen as your support for my creation.