Is Turbopack really 10x faster than Vite?

#​613 — November 4, 2022

Read on the Web

JavaScript Weekly

What Is a 'Realm' in JavaScript?— One of those things you don’t need to know, but that will flesh out your understanding of JS under the hood. A realm is essentially the complete execution environment for a JavaScript program.

Gal Weizman

Then if you really want to go down the rabbit hole, enter the ShadowRealm with Dr. Axel..

Is Turbopack Really 10x Faster Than Vite?— Last week’s big news was the unveiling of Turbopack, a Rust-based ‘successor’ to Webpack that boasts significantly performance improvements. Vue and Vite’s Evan You decided to run some benchmarks and ended up pretty deep down the rabbit hole.

Evan You

Open-Source Firebase Alternative for Web, Mobile & Flutter Devs— Appwrite is a secure, self-hosted solution that provides developers with a set of easy-to-use REST APIs to manage their core backend needs. You can build anything with Appwrite! Click here to learn more.

Appwrite sponsor

Shopify Acquires the Remix Project— A mere year after being open sourced, Remix, an exciting full stack Web framework and its associated company, has been acquired by e-commerce giant Shopify. Dion (truly a huge name in the JS space in the day) explains why here, but if you’d prefer a ▶️ snappy two-minute overview then Fireship has you covered.

Dion Almaer (Shopify)

Announcing TypeScript 4.9 RC— A long awaited release gets a big step closer. satisfies is introduced to validate that the type of an expression matches some type without changing the actual resulting type. There are also auto-accessors in classes (an upcoming feature in ES itself) and editor enhancements such as “Remove Unused Imports” and “Sort Imports”. 4.9 final is expected in two weeks.

Daniel Rosenwasser

IN BRIEF:

• React Nativehas switched its default new app template from using Flow to TypeScript.

• 🎄 A group of Vue developers are running ✉️ Advent of Vue, an email-delivered set of festively-themed coding puzzles built around building Vue components. Think Advent of Code but more Vue-y!

• Key security releases of Node.js are expected imminently (later today!)

• The Component Gallery is a handy index of components.

• The Svelte team shares an update on the state of Svelte as of November 2022.

RELEASES:

• Redux Toolkit 1.9– Official toolset for Redux.

• Foal 3.0
  ↳ Full-featured Node.js webapp framework.

• Vuetify 3.0
  ↳ Material component framework for Vue.

• Ember 4.8.1, 4.4.4, 3.28.10 & 3.24.7
  ↳ Security releases of the framework.

• VS Code – October 2022 edition

📒 Articles & Tutorials

How to Build, Test, and Publish a TypeScript npm Package in 2022— The bare basic steps in a short and sweet walkthrough.

Ianis Triandafilov

'Your Next.js Bundle Will Thank You'— If your Next.js app bundle sizes are bigger than you’d like, Renato’s advice is for you.

Renato Pozzi

Creating Human-Readable Date/Time Differences— There are libraries to get your “2 minutes ago”, “5 months ago” or “1 year ago” but did you know the Intl API can do it too? Intl.RelativeTimeFormat() is there and supports numerous languages. GitHub's relative-time is an alternative if you need a little extra.

Amit Merchant

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API— Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

Code Coverage with Storybook Test Runner— Coverage reports can show you how much of your code is actually reached in testing and help you find untested areas. Storybook's test runner now generates coverage reports to help with this and supports React, Preact, Svelte and Vue out of the box.

Yann Braga (Storybook)

How to Package and Distribute a Vue.js 3 Plugin on npm— Uses Vite to build things and vue-tsc to generate types for optimal DX.

Daniel Kelly

Building an Accessible Tooltip Component— A well structured overview of how to build a color-adaptive and accessible <tool-tip> custom element. There’s a ▶️ video version of this post if you’d prefer too. The JavaScript is minimal.

Adam Argyle

▶  Creating a Minecraft Clone with React and Three.js— (91 minutes.)
Daniel Berk

Running JavaScript in WebAssembly with WasmEdge— Why? Why not!
Second State

An Overview of JavaScript Promises
Sandeep Panda & James Hibbardbeginner

🛠 Code & Tools

Vuestic UI 1.5: A UI Library for Vue 3— A library of sixty customizable components. v1.5 is a big release boasting significantly improved accessibility, new tree, split view, dropdown and virtual scroll components, dark theming, and more. Official homepage.

Epicmax

Joi 17.7: Object Schema and Data Validations— Describe your data using a simple, fluent API and Joi can check if data you supply to it is up to scratch, e.g. Joi.string().min(3).max(30)

Sideway Inc.

Radar SDKs and APIs: Fastest Way to a Wide-Range of Location-Based Experiences— Flexible and affordable geocoding, search, and distance APIs with high-quality address and place data. Sign up today.

Radar sponsor

directory-serve: Serve a Local Directory Over HTTP, Quickly— This is neat. If you have Node and npm installed, run npx directory-serve . to get an HTTP server serving up the current directory.

Cube-Root

relative-time: An Element to Format a Timestamp as a Localized Relative Time— Supply this web component with a standard formatted date and time and it’ll render the right text to suit.

GitHub

Pinceau: A CSS-in-TypeScript Framework Built for Vue— Still early days but has the perk of seamless integration into Vue, and works with Nuxt, Vitesse, and Vite.

Yaël Guilloux

Markdoc 0.2: A Flexible, Markdown-Based Authoring Framework— An extension of Markdown but with extra features ideal for blog posts or docs. It’s used for Stripe’s public docs, but you can bring it into your own systems. GitHub repo.

Stripe

Shortcut Brings Product and Engineering Together. Try It for Free

Shortcut (formerly Clubhouse.io) sponsor

• jest-image-snapshot 6.0
  ↳ Matcher for visual comparisons/regressions.

• Sigma.js 2.4
  ↳ High-perf rendering of complex graphs.

• Docusaurus 2.2
  ↳ Facebook's documentation web site builder.

• Taxi 1.2
  ↳ Small library for PJAX navigation and animations to sites.

• Jasmine 4.5– Testing framework for browsers & Node.

• Chartist.js 1.3– Simple responsive charts. Not the 1800s political movement.

• Forge 6.0– Tool to build/publish Electron apps.

• React Toastify 9.1– On-screen notifications made easy.

• vanilla-tilt.js 1.7.3– Smooth 3D tilting.

📗 We're also reading..

We've also had some tabs open that aren't JavaScript specific but you might find interesting anyway:

Comparing TCP and QUIC by Geoff Huston. If HTTP/3, QUIC and UDP are buzzwords for you and you want to know what's going on under the hood, this is a good technical primer (HTTP/3 is basically HTTP mapped on top of QUIC, as opposed to HTTP 1 and HTTP/2 which use TCP).

Advice That Actually Worked For Me by Nabeel Qureshi. A bit more thoughtful and universal than most advice posts.

A Visual Studio 6.0 Nostalgia Trip by Wouter Groeneveld. I might be showing my age by enjoying this. Next stop.. Delphi! Or QBasic..?