If it renders on the edge, it's time to pledge.

Issue #105.June 19, 2022.2 Minute read.
Bytes

This week, we’ve got the Death Cab for Cutie of auth solutions, lessons from Daddy Warzucks, and nowhere to hide.

Welcome to #105.

Praise the vite cat

We are fast. We are lean. We are French.

The build tool coming for us all

Everywhere you look, there it is. There is no escaping it, nowhere to hide.

No, I’m not talking about your “I buy what I know” blood-red tech stock/crypto portfolio, I’m talking about Vite (pronounced Vite) — the tooling sensation that’s taking over the web.

Quick Review: Vite was started by Evan You (never heard of him) to solve the “performance bottleneck” issues of JavaScript-based tooling — aka build times long enough to cook a full English breakfast. It does this in two key ways: 1) leveraging native ES modules in the browser, and 2) using new, fast-AF tools like esbuild and Rollup for building and bundling.

This allows it to create a unique combination of speed and a great JavaScript developer experience. You don’t need any specialized knowledge of low-level languages like Rust or Go in order to adopt or customize Vite (as Eric Simons wrote when he announced that StackBlitz was becoming Vite’s largest backer).

And that’s just one of many W’s that Vite has stacked up recently. Let’s recap a few more:

  • Hit the 1 million downloads per week milestone last month (up 10x from a year ago).

  • Adopted by multiple high-profile projects, including Svelte/SvelteKit, Astro, Hydrogen, Storybook, Vue/Nuxt (obviously) and lots more.

  • Released Vitest — a super fast, Vite-native unit testing framework that just passed 200k downloads per week.

Bottom Line: Remember, Vite rhymes with “feet” — so be sure to pronounce your words very clearly when telling your partner that you’ll be attending the “First Annual Vite Conf”, a couple years from now.

Sloth with knowledge is power meme

Behold, the all-knowing Sleuth sloth. [sponsored]

Sleuth.io wants to teach your team how to ship software like Netflix and Amazon

That’s why Sleuth’s CEO & Co-founder, Dylan Etkin, wrote this Ultimate Guide to Going from Zero to One Hundred Deploys a Day.

It’s a 60-page e-book that dives deep into the journey of how elite teams at Amazon, Google, and Netflix went from deploying once a week to hundreds of times a day. And Dylan shares an actionable roadmap for how you can apply a lot of those same principles to your own team, no matter what size.

Oh, and it’s completely free.

“But what does Mr. Fancy CEO Man know about deploying software?” Well, after some quick Googling, we learned that Dylan was one of the first 20 employees at Atlassian and the first architect (and founding engineer) of Jira, before creating Sleuth. So yeah, he’s probably one of the most qualified people on the planet to write about this topic.

Check it out. Knowledge is power.

The Rock being angry

The React Team’s response to your questions about perf benchmarks

React is playing its own game now

React has been at the top of the JavaScript charts for almost a decade. But just like Daddy Warzucks, the React Team has learned that “You don’t get to 500 million friends without making a few enemies.”

And by “enemies”, we mostly mean “developers who are angry on twitter” – but you get the point.

That said, many of the criticisms of React in recent years have been fair. In the 5+ years since React started working on concurrency, competing frameworks have leveled up by introducing smaller bundle sizes, faster OPS on benchmarks, and improved ease of use — while React (one could argue) has lagged behind in these areas.

But do these things actually matter? According to the React Team, the answer is, not as much as you might think. Dan Abramov wrote as much in a long Reddit thread last week, while addressing some of these critiques.

Instead, the React Team, like my Mother-in-law, has been more focused on “holistic improvements”. Specifically, improvements that impact the whole app (not just the framework), which they highlighted in a recent blog post about what they’ve been working on.

We were disappointed to see that essential oils and energy healings weren’t included among these “holistic improvements,” but here’s a few interesting things they did mention:

  • Server Components — looking to reduce bundles by providing a seamless experience for moving code from the client to the server.

  • Asset Loading — leveraging Suspense to load in 3rd party assets like styles, fonts and other scripts without the “jank.”

  • Compiler — researching how to get rid of the need to “fine tune” performance issues.

  • Offscreen — instead of having to mount/unmount components you can “stash” them away (very useful for some more advanced use-cases).

Bottom Line: It’s convenient for anyone (including the React Team) to take the position that “the things we aren’t good at don’t actually matter that much.” It doesn’t mean that they’re wrong (they make some great points), it just means that it’s… convenient.

Jobs

Synapse Studios is looking for Senior JavaScript Engineers in the US

Synapse is a software consultancy (Node/React) with a focus on engineering excellence and tightly knit, low-ego teams. We believe devs want to feel productive, challenged, and supported, and we build our culture around those concepts. Come join our growing crew as we solve interesting challenges in healthcare, fitness, IoT, retail and more, for a variety of clients, at scale.

JS Quiz — Sponsored by BugHerd

BugHerd makes it easy to get feedback on a website from team members and clients. No more email chains, Slack threads, or screenshots. Try it free.

What gets logged?

function Dog(name) {
  this.name = name
  this.speak = () => 'Woof Woof'
}

Dog.prototype.speak = function() {
  return 'Ruff Ruff'
}

const dog = new Dog('Leo')
console.log(dog.speak())

Cool Bits

  1. Tauri just released v1.0 of its toolkit for building cross-platform desktop apps. It claims to be a lot more lightweight than Electron, but I’m just wondering when we can all stop bodyshaming our thicc-lib king.

  2. What does this newsletter have in common with Amazon, Unity, and Pinterest? 1) We’re all innovative tech giants, and 2) we all use Retool to build our internal tools because they’re literally the best. Check them out for free. [sponsored]

  3. RulesJS just launched the v1.0 beta of their Bazel rules for JavaScript tool. If you don’t know what Bazel is, just know that it’s a build tool that has to do with monorepos. If you don’t know what monorepos are, then just do what everyone else does and nod your head approvingly whenever you hear someone talk about them.

  4. Fresh is a new web framework created by the Deno folks that describes itself as a combination of “a routing framework and templating engine that renders pages on demand, on the edge.” Thankfully I memorized this mnemonic in grade school to help me know if something was good or not - “If it’s written in Rust, it leaves other tools in the dust. If it’s declarative, it controls the narrative. If it renders on the edge, it’s time to pledge.”

  5. In My other database is a compiler, Glauber breaks down how his team is working on freeing developers from the pains of databases by leveraging modern tooling like SWC, TypeScript, and a sprinkle of (AST) magic.

  6. Ladle v1.0 was just released to let you “develop and test your React stories faster.” How does it do that? Vite, of course.

  7. IndieAuth is an identity layer on top of OAuth 2.0 that lets users use their own domain to authenticate, without requiring an email address or social profile. It seems like a great solution, but like most indie bands, it’ll probably only have a small group of hardcore fans (who think they’re superior to everyone else for knowing about it). The Death Cab for Cutie of auth solutions.

  8. IE11 finally died last week, and someone was thoughtful enough to create this beautiful tombstone for it in Korea with a moving epitaph — “It was a good tool to download other browsers.” Truer words were never spoken. Rest easy, old sport.

JS Quiz (Answer) — Sponsored by BugHerd

What gets logged?

function Dog(name) {
  this.name = name
  this.speak = () => 'Woof Woof'
}

Dog.prototype.speak = function() {
  return 'Ruff Ruff'
}

const dog = new Dog('Leo')

Woof Woof gets logged.

Before JavaScript delegates the lookup of the property to the Constructor’s prototype, it first checks to see if the property exists on the object being returned from the Constructor. In this case, it does so it calls it.

For more info., check out A Beginner’s Guide to JavaScript’s Prototype