I hope you all had a great Pi Day yesterday without getting sucked into the hyper-capitalistic commercialization of it all.
Easily our most cursed meme yet
Gotta blast… into another major release for Electron. This update brings us to v12.0 and includes some major stack upgrades, along with a few other API updates and breaking changes.
Quick review: Electron was created by GitHub back in 2013 and quickly became the go-to option for building cross-platform desktop apps in JavaScript. The framework’s bundling of Chromium and Node.js has led to some well-documented issues with size and performance, but if it’s good enough for VSCode, Discord, and Twitch (The Developer Holy Trinity™), it’s probably good enough for your Spotify clone.
What’s new in Electron 12:
Stack upgrades — Node.js got upgraded from v12 to v14 (with V8 (the engine, not the juice) 8.9), and it’s also running Chromium 89 now. Bundling all of these together is always gonna result in some bloat, but keeping them up to date should help Electron minimize the chonk.
New API features & changes — A new webFrameMain
API lets you look up frames across existing WebContents
instances. v12 also features lots of minor changes and updates to existing APIs like the app
, BrowserWindow
, and session
APIs.
Other notable changes — v12 removes support for Flash (Steve Jobs smiles in heaven), sets the default values of contextIsolation
and worldSafeExecuteJavaScript
to true
, and makes it possible for the exposeInMainWorld
method to expose non-object APIs.
At this point, the think pieces calling Electron “bloated” and “slow” kinda feel like the articles my mom sends me about Mountain Dew Baja Blast being “bad for my health” — yes, I know that they’re right, but if I need it, I’m probably still gonna use it.
Plus, Mountain Dew is the official drink of underage Olympic snowboarders, and Electron is the official framework of the Slack desktop app (which is the gold standard of performance…), so it looks like I’m in good company all around.
2 fast 4 these b3nchmarks
Coming in hot… esbuild just released v0.9 last week and has been getting a lot of hype recently, so we decided to write about it for the first time since our 4th issue last July.
Quick Review: esbuild is a JavaScript bundler and minifier that was created by Evan Wallace (CTO and co-founder of Figma) to be “orders of magnitude” faster than existing bundlers.
It turns out that by “orders of magnitude”, Evan means “100x faster than everyone else” (his words, not ours) – at least according to this benchmark.
The bundler/minifier is starting to be used in multiple well-known projects — it was a big part of the most recent major releases from both Vite and Snowpack, for example.
What makes it so fast?
Let’s go straight to the README for this one:
v0.9 is a minor release that includes support for node’s new exports
field in package.json
files, support for CSS banners and footers, a simplified JavaScript API, and more.
The release notes also mention that esbuild will always print a summary by default now, because (according to Evan), “people have this problem with esbuild when they first try it where it runs so quickly that they think it must be broken, only to later discover that it actually worked fine.” champagne problems.
“Everyone compiles to WASM. JS tools have all been written in Rust. Vanilla JS is the new jQuery (old). If you’re not using TypeScript or a typed-language, people frown at you. ReScript and Grain are the hot languages for building on the web.”
Kyle Shevlin wrote about why your React components should only use custom hooks. Most of you will hate this premise at first, but you might come around by the end of the article. Kinda like the movie Master of Disguise.
Taro is a lightweight 3D game engine for the web that’s built with three.js and canon-es. If you use it to build a 3D version of City Jumper, I’ll buy you a delicious Taro boba tea and be your BFF4ever.
Our favorite Bytes reader Cassidy Williams (scientific name: Cassidoo) wrote a great article on the benefits and flaws of Incremental Static Regeneration, or ISR.
Necktie is a small, simple tool for DOM binding. A small, simple tool in a necktie? This library must have been inspired by Chris Harrison from The Bachelor.
TailwindCSS just got better with the announcement of Just in Time - a JIT compiler that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time. As an arbitrary CSS abuser master, this feature is particularly exciting - “Generate arbitrary styles without writing custom CSS”.
Can you beat 1024 bytes of JavaScript in this game of chess? Probably not. But can 1024 bytes of JavaScript beat you in a Turing Test? Also probably not (yet).
The Relay Team at Facebook released Relay Hooks — a set of new APIs for fetching and managing GraphQL data with React Hooks. This will join Cambridge Analytica in the list of things only used at Facebook.
Andreas wrote a guide to ethical scraping of dynamic websites using Node.js and Puppeteer. We’re looking forward to his next article on how to ethically DDOS your enemies’ servers.