Don't call it a (virtual) comeback

Today’s issue: One man’s Remix struggle, OSS Marketing 101, and every developer conference in the world happening at the same time.

Welcome to #186.

---

Don’t call it a (virtual) comeback

The Virtual DOM has heard all the mean things you’ve been saying behind its back for the past few years.

Ok, maybe not you specifically, but large parts of the JS ecosystem. And I’m not trying to point sausages fingers, but a lot of this criticism started when Rich Harris called out the VDOM for being pure overhead back in 2018.

But Rich made some great points. The VDOM definitely does incur higher compute costs — because unlike the best things in life, diffing ain’t free. And that’s why some next-gen frameworks like Svelte and Solid.js don’t use one at all.

But what if there was a way to get all of the declarative goodness of React’s VDOM at the speed of raw JavaScript?

That’s the question driving Million.js — a VDOM replacement for React created by Aiden Bai, which claims to be up to 70% faster.

How tho? Instead of representing the DOM element by element, Million uses the blockdom approach to do it block by block. In this case, a “block” is an element with all of its static content and some special tags to indicate dynamic content — kind of like a special Higher Order Component.

You can create blocks from your React components by wrapping them in a block() function. This means they’ll be rendered using the Million.js VDOM, which uses static analysis and dirty checking to update the DOM with much less computation than traditional diffing — most of the time.

This block approach to the VDOM is super fast when you have lots of static content and not much dynamic content, but more dynamic content will result in less performance gains.

That’s why Aiden recommends using Million.js granularly and not as a silver bullet for every single component. Thankfully, it’s pretty easy to do that with the block() function.

Bottom Line: Maybe we don’t need to throw out the VDOM baby with the bathwater just yet.

---

Swimm’s IDE plugins are a gamechanger

Your team finally did it. Against all odds, you created some high-quality internal documentation for your codebase 👏.

But now you’ve got a new problem: getting everyone on the team to actually use it.

And that’s tricky, because when you’re stuck looking at some weird code, you usually have no idea if something in your team’s docs could help — or where to start looking for answers.

That’s where Swimm’s free IDE plugins can help. Here’s how:

• If you see a little wave icon next to a line of code in your IDE, that means your team has some internal documentation associated with that section of code.

• If you click the wave icon, it opens up the relevant section of your docs directly in your IDE, so you can get what you need and get back to work.

Check it out. Swimm has already been ProductHunt’s product of the week — and these plugins (for VS Code and JetBrains) take it to a whole new level.

---

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));

---

1. Artem Zakharchenko wrote an article called My Struggle With Remix. Kind of savage to drop this on the first day of Remix Conf, but it’s actually a really constructive piece that highlights his love for Remix and some changes he’d like to see the framework make.

2. On May 16th, Retool is hosting an awesome webinar on How Stripe scales people systems to its 7,000+ employees. Stripe’s Head of People Solutions will share her thoughts about the build-vs-buy equation for SaaS and how she tries to de-risk the launch of custom business applications. Don’t miss it. [sponsored]

3. Google I/O was yesterday. We’ll write a lot more about it on Monday, but here’s a quick TLDR.

4. Vadim Demedes created Ink, which brands itself as “React for CLIs,” because it lets you build and test your CLI output using components. React haters in shambles rn.

5. Like we mentioned earlier, Remix Conf took place yesterday and today, and they’ve posted livestreams of all the talks. Remember to do your air squats responsibly.

6. Danny Moerkerke wrote this In-depth guide to lazy loading Web Components.

7. We had a bunch of releases this week: Vue 3.3, Prisma 4.14, Redwood v5, Dart 3, and more. Sorry we couldn’t fit everybody, but OSS Marketing 101 taught me that the best way to get buzz for a new release is to maybe try not launching it the same week as 10 other releases and two big conferences.

8. Evan Bacon just shared all the cool new features coming to Expo Router v2 and Expo 49 during his talk at yesterday’s App.js Conf. (There’s another conference happening rn?? Haven’t any of you tried using Calendly before?)

---

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));

1. undefined - The Symbol constructor creates a unique value, so the Symbol used to set the value of myObject[key] is not the same as the Symbol used to get the value of myObject[key].

2. {} - JSON.stringify ignores Symbol properties when stringifying an object.

This is useful for creating private properties on objects that can’t be accessed or modified outside of the object. You can read more about Symbols here.