Since 2018, the JavaScript Open Source Awards distinguishes impactful open-source projects across four categories every year — Breakthrough of the Year, The Most Exciting Use of Technology, Fun Side Project of the Year, and The Most Impactful Contribution to the Community. The 2020 batch rewarded six open-source projects.
Deno and Svelte received the award for the Breakthrough of the Year category.
Deno, according to its website, is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. After two years of development, Deno eventually reached version 1.0 in May 2020 and is ready to use in production. Deno supports WebAssembly, allowing native libraries written in compiles-to-WebAssembly languages (Rust, Go, C++, and more) to run inside a Deno application.
Svelte is a component-based UI framework to build interactive web applications — like React or Vue. Unlike React and Vue, Svelte compiles the written code for the application at build time and strives to generate small and performant compiled code. Svelte recently added TypeScript support and saw further consolidation this year. According to wappalyzer.com, Svelte is used by the New York Times, Spotify, chess.com, Philips, and many more.
Mock Service Worker received the award for the most exciting use of technology. Mock Service Worker (MSW) is an API mocking library for the browser and Node. MSW explained how it works as follows:
Browser usage is what sets Mock Service Worker apart from other tools. Utilizing the Service Worker API that intercepts requests for the purpose of caching, Mock Service Worker responds to captured requests with your mock definition on the network level. This way your application knows nothing about the mocking.
MSW enables API mocking when developing, testing, and debugging without mocking fetch or having a back-end. MSW supports REST and GraphQL APIs.
Pose Animator won the award for the fun side project of the year. According to its documentation, Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters:
(Source: GitHub project)
PoseNet is a standalone model using TensorFlow.js that supports running real-time pose estimation in the browser. MediaPipe Facemesh enables face recognition from 486 3D facial landmarks.
The award for the most impactful contribution to the community goes to Perfume.js. The library self-describes as a web performance library for measuring all user-centric performance metrics. Perfume.js leverages the latest Performance APIs like High Resolution Time to collect field data measuring what real-world users are experiencing. The collected data include First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), Total Blocking Time (TBT), Navigation Timing, Resource Timing, and more. The collected data can then be fed to an analytic tool for monitoring:
(FCP for www.coinbase.com in the United States, Italy, Indonesia, and Nigeria. Source: Perfume’s GitHub site.)
Perfume additionally includes in the measured data additional information related to the devices’ capabilities (device memory, number of CPUs, and status of the service worker).
Lastly, the Productivity Booster award goes to Snowpack. Snowpack strives to build web applications in constant time (< 50 ms). It does so by leveraging the JavaScript’s native module system (known as ESM) and serving applications unbundled during development. Snowpack supports bundled production builds through plugins. Snowpack ships with built-in support for JavaScript, TypeScript, JSX, CSS, and image files. Vue and Svelte files are supported via plugins.
Rich Harris, Svelte’s creator, recently demoed at the Svelte Summit conference the ongoing work on the next version of Svelte (svelte@next), which uses Snowpack in development. Harris explained:
I think we are going to get to a point pretty soon where projects that use bundlers during development are going to look a little bit antiquated.
The JavaScript Open Source Awards is an initiative led by GitNation that takes place every year. GitNation also manages the React Open Source Awards and the Vue Open Source Awards.