Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

y because they deal with different use cases, I have no complaints about seeing Next.js at the top. It is an excellent server-side rendering framework and static site generator. Next.js is also complemented by <a href="https://vercel.com/">Vercel</a>, a deployment platform tailormade for Next.js, allowing for extremely easy shipping of code.</p><h2 id="b101">esbuild and Snowpack</h2><p id="b612"><a href="https://esbuild.github.io/">esbuild</a> and <a href="https://www.snowpack.dev/">Snowpack</a> overtook <a href="https://webpack.js.org/">webpack</a> as the most-loved build tools. esbuild is a bundler written in Golang, hence offering performance that is orders of magnitude faster than webpack. On the other hand, Snowpack introduces a new approach that only builds each ES module once. After that, Snowpack only builds the ES modules that have changed. In comparison, a traditional bundler like webpack builds your entire project every time you make a change. esbuild and Snowpack are both drastically reducing development and deployment times, albeit with different methods.</p><h1 id="e03b">Javascript Features That You Should Start Using</h1><p id="9cba">The survey also showed a low adoption rate of new JavaScript features, such as the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">nullish coalescing operator</a> (45.3%), <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">optional chaining operators</a> (66.7%), and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled">Promise.allSettled()</a> (14.7%). As they are supported by all major browsers and Node.js 14+, now might be a good time to start incorporating them into your code.</p><h2 id="5002">Nullish coalescing operator ??</h2><p id="2da7">It is a logical operator that returns the righthand side value when the lefthand side is <code>null</code> or <code>undefined</code>. It is a concise way to set default values for variables that may be <code>null</code> or <code>undefined</code>.</p><figure id="27da"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*XXrVjxLDJXXUcIe4fvbq4Q.png"><figcaption>Code sn

Options

ippet generated with <a href="https://carbon.now.sh/">Carbon</a></figcaption></figure><h2 id="45d2">Optional chaining operator ?.</h2><p id="d41a">It allows developers to access deeply nested objects without having to check for their existence.</p><figure id="cfc7"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*QW44TeQ885yU4jddSlaRqQ.png"><figcaption>Code snippet generated with <a href="https://carbon.now.sh/">Carbon</a></figcaption></figure><h2 id="ad9a">Promise.allSettled()</h2><p id="9196">It returns a promise that resolves when all given promises have either been resolved or rejected. Developers are then able to inspect whether each promise was successful or not. It is a more convenient alternative to <code>Promise.all()</code>, which resolves only when all given promises resolve and fails if any one of the promises fails.</p><figure id="7200"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*Yk6YM0H11bDcKHFt5G7e1g.png"><figcaption>Code snippet generated with <a href="https://carbon.now.sh/">Carbon</a></figcaption></figure><p id="df75">While the above features are quick wins you can quickly add to your code, you should also definitely check out other new ES2020 features, such as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports">dynamic import</a>, which could be invaluable to your use case. There is a nice <a href="https://www.freecodecamp.org/news/javascript-new-features-es2020/">article from FreeCodeCamp</a> summarizing the top ES2020 features.</p><h1 id="6f1b">Conclusion</h1><p id="46e3">2020 has seen a big change in the JavaScript library scene. We see newcomers such as esbuild quickly took dominance. We also see projects that have been lurking around for a while such as Svelte finally gain traction.</p><p id="58a7">ES2020 also introduced several long-awaited JavaScript features such as the nullish coalescing <code>??</code> and optional chaining operators <code>?.</code>, which addressed many pain points of JavaScript developers.</p><p id="5fa4">What an exciting year 2020 was for JavaScript developers!</p></article></body>

The State of JavaScript in 2020

And things to learn in 2021

The State of JavaScript Survey 2020 logo

On 14 January 2021, results from the State of JavaScript 2020 Survey were released. The results were gathered from 23,765 developers in 137 countries, covering people’s usages and opinions of JavaScript features, technologies, tools, and more. Below I have highlighted my main takeaways from the survey. Hopefully, they will shed some light on how you can best equip yourself in 2021!

Javascript Tools To Look Out for in 2021

The technologies that were most used were largely unchanged last year. TypeScript is still the most-used JavaScript flavor, React is still the most-used frontend library, and Express is still the most-used backend library. If you’re a new web developer, these are definitely the technologies you should learn first.

However, when it comes to the technologies developers loved the most in 2020, we are seeing a lot of new contenders. I’m definitely going to pick them up in 2021.

Svelte

Svelte overtook React as the most loved frontend library. Unlike React, which has to ship React library code on top of user code in the final application, Svelte is a compiler that compiles user code to optimized vanilla JavaScript. The result is a much smaller bundle size and faster performance. Svelte’s ecosystem is maturing quickly, with the introduction of Sapper (Svelte’s Next.js) and Svelte Native (Svelte’s React Native), making it a worthy contender to the React-Vue-Angular dominance.

Next.js

Next.js overtook Express as the most-loved backend framework. While I don’t think they belong in the same category because they deal with different use cases, I have no complaints about seeing Next.js at the top. It is an excellent server-side rendering framework and static site generator. Next.js is also complemented by Vercel, a deployment platform tailormade for Next.js, allowing for extremely easy shipping of code.

esbuild and Snowpack

esbuild and Snowpack overtook webpack as the most-loved build tools. esbuild is a bundler written in Golang, hence offering performance that is orders of magnitude faster than webpack. On the other hand, Snowpack introduces a new approach that only builds each ES module once. After that, Snowpack only builds the ES modules that have changed. In comparison, a traditional bundler like webpack builds your entire project every time you make a change. esbuild and Snowpack are both drastically reducing development and deployment times, albeit with different methods.

Javascript Features That You Should Start Using

The survey also showed a low adoption rate of new JavaScript features, such as the nullish coalescing operator (45.3%), optional chaining operators (66.7%), and Promise.allSettled() (14.7%). As they are supported by all major browsers and Node.js 14+, now might be a good time to start incorporating them into your code.

Nullish coalescing operator ??

It is a logical operator that returns the righthand side value when the lefthand side is null or undefined. It is a concise way to set default values for variables that may be null or undefined.

Optional chaining operator ?.

It allows developers to access deeply nested objects without having to check for their existence.

Promise.allSettled()

It returns a promise that resolves when all given promises have either been resolved or rejected. Developers are then able to inspect whether each promise was successful or not. It is a more convenient alternative to Promise.all(), which resolves only when all given promises resolve and fails if any one of the promises fails.

While the above features are quick wins you can quickly add to your code, you should also definitely check out other new ES2020 features, such as BigInt and dynamic import, which could be invaluable to your use case. There is a nice article from FreeCodeCamp summarizing the top ES2020 features.

Conclusion

2020 has seen a big change in the JavaScript library scene. We see newcomers such as esbuild quickly took dominance. We also see projects that have been lurking around for a while such as Svelte finally gain traction.

ES2020 also introduced several long-awaited JavaScript features such as the nullish coalescing ?? and optional chaining operators ?., which addressed many pain points of JavaScript developers.

What an exciting year 2020 was for JavaScript developers!