2020 It's an extraordinary year , But it's over , Sum up the past , Looking forward to the future !

Javascript Over the past year, we've been trying to move forward as a whole . Thanks to things like optional chains (Optional Chaining) And null merge operators (Nullish Coalescing) Such new features , The language itself is improving , and TypeScript The wide use of static typing takes static typing to a new level .

2021 year 1 month 14 Japan ,Javascript 2020 Trend survey report released 了 . The findings come from 137 A country's 23,765 Developers , It covers the developer's understanding of Javascript characteristic 、 technology 、 The use of tools and ideas . Let's take a look at this report , And deepen to Javascript The understanding of , To a new level in the new year .

2021 year Javascript Tools

last year , The most commonly used technologies haven't changed much .TypeScript Still the most commonly used Javascript style ,React Still the most commonly used front-end Library ,Express Still the most common back-end Library . If you want to be a Web The engineer , So these are definitely the technologies that should be learned first .

however , Speaking of developers in 2020 My favorite technology of the year , See a lot of new candidates , It may also represent a future trend .

The front frame :Svelte

Svelte To replace the React, Become the most popular front-end Library . And React Must be published on top of user code in the final application React Library code is different ,Svelte It's a compiler , User code can be compiled into optimized native Javascript. The result is a smaller package size , Faster performance . With Sapper(Svelte's Next.js) and Svelte Native(Svelte's React Native) The introduction of ,Svelte Our ecosystem is rapidly maturing , Make it a React-Vue-Angular A strong competitor for dominance .

Back end framework :Next.js

Next.js replace Express Become the most popular back-end framework . Some may think that they don't belong to the same category , Because they deal with different instances , But for the Next.js It's no surprise to be at the top of the report . It is an excellent server-side rendering framework and static site generator . Besides , by Next.js Customized deployment platform Vercel Also on the Next.js Supplemented by , Allows very easy delivery of code .

Building tools :esbuild and Snowpack

esbuild and Snowpack To replace the webpack, Become the most popular build tool .esbuild Yes, it is Golang Build tools written by , So its performance ratio is webpack A few orders of magnitude .

On the other hand ,Snowpack Introduced a way to just build each ES The new method of module once . After that ,Snowpack Build only what has changed ES modular . by comparison , image webpack Traditional build tools like this build the entire project every time you make a change .esbuild and Snowpack Although the methods used are different , But both greatly reduce development and deployment time .

Cross platform framework :Electron and Capacitor

Electron and React Native It is a cross terminal and cross platform application framework , stay 2020 year , New solutions Capacitor It's starting to make waves .

Javascript New features

The survey also shows that , new Javascript The utilization rate of functions is low , for example Null merge operator (45.3%), Optional chain operator (66.7%) and Promise.allSettled()(14.7%). Thanks to all the mainstream browsers and Node.js 14+ All support them , Now might be a good time to incorporate them into the code .

Null merge operator

Null merge operator (??) It's a logical operator , When the operands on the left are null perhaps undefined when , Returns its right-hand operand , Otherwise, return the left-hand operand . For the existing Javascript It's a good addition to , Optimize and unify the management of null perhaps undefined Judgment criteria of .

const foo = null ?? "default string";
console.log(foo);
const baz = 0 ?? 42;
console.log(baz);

Output results :

"default string"
0

Optional chain operator

Optional chain operator ?. Allows you to read the value of an attribute deep in the chain of connected objects , Instead of explicitly verifying that each reference in the chain is valid .?. The function of the operator is similar to . Chain operators , The difference is , The reference is empty (nullish ) (null perhaps undefined) It doesn't cause errors , The short-circuit return value of this expression is undefined. When used with function calls , If the given function does not exist , Then return to undefined.

const myinfo = {
    account: {
        name: "DevPoint",
       address:{
          city:{
            code:1101,
            name:"Shenzhen"
          }
        }
    },
};
console.log(myinfo?.account?.name); // print "DevPoint"
console.log(myinfo?.account?.address?.province?.code);  // print undefined
console.log(myinfo.account.address.province.code); // error

Promise.allSettled()

The Promise.allSettled() Method returns a value in all given promise Have been fulfilled or rejected After promise, With an array of objects , Each object represents the corresponding promise result .

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
    setTimeout(reject, 100, "foo")
);
const promises = [promise1, promise2];
Promise.allSettled(promises).then((results) =>
    results.forEach((result) => console.log(result.status))
);
// expected output:
// "fulfilled"
// "rejected"

Although these new features can be quickly added to the code , But other ES2020 The new features are also a surprise , for example BigInt and Dynamic import .

BigInt

BigInt It's a built-in object , It provides a way to represent integers larger than

2^{53} - 1

This was originally Javascript Can be used in the Number The maximum number represented .BigInt It can represent any large integer .

dynamic import

Standard usage of import The imported module is static , Will make all imported modules , Compiled at load time ( Unable to compile on demand , Reduce the loading speed of home page ). In some scenes , You may want to import modules based on conditions or on demand , You can use dynamic import Instead of static import . Here's a scenario where you need to use dynamic import :

  • When statically imported modules significantly reduce the speed of code loading and are less likely to be used , Or you don't need to use it right away .
  • When statically imported modules obviously occupy a lot of system memory and are less likely to be used .
  • When the module being imported , It doesn't exist at load time , You need to get it asynchronously
  • When importing a module specifier , Need to build dynamically .( Static imports can only use static descriptors )
  • When the imported module has side effects ( The side effects here , It can be understood as the code that will run directly in the module ), These side effects are only needed if certain conditions are triggered .( In principle , Modules cannot have side effects , But a lot of times , Can't control the content of the module you depend on )

Please don't abuse dynamic import ( Only if necessary ). Static frameworks can better initialize dependencies , And it's more conducive to the use of static analysis tools

Conclusion

2020 year ,Javascript Great changes have taken place in the library area . Such as esbuild Novices like that soon dominated . I can see something like that Svelte The project, which has been left out for a period of time in this way, finally gets attention .

ES2020 Also introduced some long-awaited Javascript New features , It's solved Javascript Many of the challenges for developers , It also improves the readability of the code .

about Javascript For developers ,2020 Years are extraordinary , But what an exciting year in many new areas !