Sun's Out Bun's Out

Issue #108.July 11, 2022.2 Minute read.
Bytes

As a reminder for all our cultured readers, today is National Slurpee Day so make sure you take advantage.

This week, we’ve got hot cross buns, a new Shrek getting chosen, and how to apply The Secret’s Law of Attraction to your CSS. Welcome to #108.

Sir Mix A Lot

My runtime don’t want none unless you got Bun, hun.

Sun’s Out Bun’s Out

Who would win? A runtime for JavaScript, TypeScript and WebAssembly based on Rust and V8 with $26,000,000 in funding from the best VCs in the world, or one determined boi.

Meet Bun: the brand new, all-in-one JavaScript runtime that can install npm packages ~20x faster than yarn and ~49x faster than npm install, can bundle over 1 million lines of JS per second, and claims to be 3x faster than both Deno and Node. Oh, and it was all built by one person.

The features:

  • Bun is an alternative runtime to Node and Deno. But more than that, it also aims to be a bundler, a transpiler, and a package manager — which makes it a viable alternative (in the long run) to other build tools like Webpack 🙏.

  • Bun comes with built-in Web API’s like fetch and WebSocket (reminder that Node just barely added native fetch support a few months ago.), and it natively implements 90% of Node-API functions. It also comes with a super fast, built-in SQLite3 client.

  • It implements Node’s module resolution algorithm, so you can use most npm packages in Bun.

  • Every file is transpiled, so TypeScript and JSX just work.

That’s a lot already, but it’s only half the fun. Let’s zoom in on why Bun is able to be so mind-numbingly fast:

  1. Unlike Node and Deno, Bun uses WebKit’s JavaScriptCore engine instead of V8. JSC is known for being harder to work with than V8, but a little bit faster in some cases.

  2. It’s written in Zig, instead of Rust or C++. According to Jarred, Zig is great because of its “low-level control over memory and lack of hidden control flow, which makes it much simpler to write fast software.” (We’ll take his word for it.)

  3. Jarred wrote most of Bun from scratch and was obsessed with benchmarking and optimizing everything by hand.

Bottom Line: The only thing moving faster than the Bun runtime is the Bun hype train — the GH repo went from 1,700 stars to over 13,000 in the first 24 hours of last week’s v0.1.0 beta release. And it doesn’t look like it’s slowing down any time soon.

Humor based on my pain

Laughing about building notifications so we don’t cry [sponsored]

Courier gave my team so much time for activities

Newton’s 3rd law of motion clearly states that, “building app notifications always takes 5x longer than you think.”

And that might be understating it now that we have so many different platforms to worry about (email, SMS, web and mobile push, Slack, and tons more).

That’s what makes Courier so amazing. They give you complete notification infrastructure with one API that you can set up in an afternoon.

That API integrates with over 50 notification channels, and it handles everything — templating, routing, automations, even logging and analytics. It’s your PM’s *wildest* dream come true.

Courier is used by Fortune 500 companies and startups like Lattice and LaunchDarkly to save an average of 480 engineering hours a year. That’s a lot more time for hide and go seek Fridays team building.

The best part? Courier lets you send your first 10,000 notifications of every month for free (no credit card required).

Check it out. 👈

Vecna drinking Starbucks

Vue 2 devs waiting patiently for new features

Vue goes back to the future past

Our last story was a long one, so let’s make this quick.

Vue just released v2.7 (“the Naruto release”), but if you’ve been keeping score at home, you might be thinking, “wait, isn’t Vue 3 the default now?”

Yes it is, but since the Vue 2 → Vue 3 migration has been hairier than expected, the Vue team decided to release v2.7 to share some of the cool new Vue 3 features with developers who are still using Vue 2. (There’s a reason they call Evan You the benevolent dictator.)

The biggest highlight of this release is that it brings the full-fledged Composition API to Vue 2. This collection of APIs lets you author Vue components using imported functions instead of declaring options — which allows for better type inference, better logic reuse, and more flexible code organization.

This makes for a much better experience when trying to scale a Vue app.

Bottom Line: This release speaks to the less-than-seamless upgrade experience of migrating an app from Vue 2 to Vue 3, but it also speaks to the Vue team’s willingness to listen to Vue devs and meet them halfway 🙏.

Jobs

Mobile Software Engineer at Phantom

Phantom is looking for mobile engineers who enjoy massive ownership and freedom, and who want to work with a variety of technologies, particularly React Native. You’ll be directly impacting the development of their flagship mobile app and working closely with the founders to improve the product. This role is fully remote.

JS Quiz — Sponsored by BugHerd

This is the best tool I’ve seen for getting website feedback from clients. If you’re an agency or freelancer, you should really check it out. It’ll easily save you 50 emails per project.

Given this code, how could we log planeteers without breaking out of our arrow function?

export default connect (
  ({planeteers}) => ({capPlanet: planeteers.captain})
)

Cool Bits

  1. Atomico is small library for creating Web Components with “React-inspired syntax” like functions, hooks, and Vdom. It also single handedly created what we’ve coined “The Web Platform Paradox” - An infinite loop of Web Platform absolutists tweeting that they love Atomico because of Web Components and that they hate Atomico because of, well, you know.

  2. Wayne is a library that’s like Express.js inside of a Service Worker and has a best friend named Garth who sometimes finds Bugs Bunny attractive.

  3. Appwrite is a secure, open-source, backend as a service that gives you all the core APIs you need to build any web or mobile app. Guess who just became a fullstack developer? All of us 😈 [sponsored]

  4. React Table just changed its name to TanStack Table after it released v8 with newly-added support for Solid.js, Vue, and Svelte. I still think they should’ve named it “ReSolVuelte Table”, but they stopped inviting me to the naming committee meetings for some reason.

  5. Brain.js is a GPU accelerated neural network for browsers and Node. A little disappointed to see that Brain isn’t the mascot.

  6. Lea Verou gave an hour-long talk on CSS Variable Secrets at CSS Day. Contrary to what you might think, it’s actually not about applying the principles from The Secret to your codebase. Even though I’m sure that visualizing the CSS you want in order to get the Law of Attraction working for you can’t hurt.

  7. Do you ever feel overwhelmed? Like no matter what you do you can’t keep up with the JS ecosystem? Well, that’s too bad cause Bao.js is a fast, minimalist web framework for the Bun JavaScript runtime.

  8. “The New Wave of State Management” discusses the core problems that state management libraries try to solve and how next-gen libraries are addressing them in new ways. I’m not sure who decides which libraries make the cut for the “new wave”, but I’m guessing it’s similar to how they choose a new Shrek in South Dakota.

JS Quiz - Answer — Sponsored by BugHerd

export default connect (
  ({planeteers}) => console.log(planeteers) || ({capPlanet: planeteers.captain})
)

Since console.log returns undefined, JavaScript, after logging, will still execute the right hand operand and therefore our return value will be the same.