Bytes #46 - RxJS is *not* a JavaScript prescription

Last week we mentioned we’d match anyone that took up Sunil’s offer in an attempt to raise money for indiafightscorona.giveindia.org/.

Very happy to say we raised over $2,500. Here’s who helped - Glen Maddern, Justin Punzalan, Don Michael, Kevin Batdorf, Ben Adam, and a handful of others that asked to remain anonymous. Good job, team.

Prisma’s New Direction

Katy Perry

And you’re gonna see (my backend) roar-r-r-r-r

Prisma is back again with a new suite of tools and a slightly new direction. After years of telling everyone that they definitely weren’t an ORM (object-relational mapping tool), their new tagline describes Prisma as “a next-generation ORM for Node.js and TypeScript.” 🤔

They’ve made a few pivots over the last couple years, and claim that the new ORM label is mostly to help developers understand what problems Prisma solves, even if its approach to solving those problems is fundamentally different from most ORMs.

Here’s a quick rundown on the 3 main tools that now make up the Prisma Holy Trinity™:

Prisma Client — An auto-generated and type-safe query builder for Node.js & TypeScript that works across different languages and databases
Prisma Migrate — A declarative data modeling tool that auto-generates fully customizable database schema migrations for you, so you don’t have to write the SQL by hand
Prisma Studio — A slick little UI that lets you view and edit your data

The Bottom Line

Prisma is one of those interesting companies that’s half, “we’re a cute & innovative open-source project”, and half, “we’ve raised $16 million from the biggest VCs in the world to build a billion-dollar empire.”

But hey, it’s loved and used by some awesome products and frameworks like RedwoodJS, Blitz.js, KeystoneJS, and many others. And if Prisma can help us all spend less time tearing our hair out writing SQL, it’ll always be worth a billi in our hearts.

RxJS releases v7.0

Mario

A different kind of RxJS

RxJS is not a JavaScript prescription, but for the die-hard fans, maybe it kinda is?

That’s my only explanation for why hundreds of people paid $300+ to watch RxJS 7.0 get released at last week’s RxJS Live! virtual conference, instead of just watching the full replay for free on YouTube 6 hours later.

But hey, if there’s one thing 2021 has taught us, it’s that money isn’t real. Just ask the girl from the house fire meme who just banked half a mil.

Quick review: RxJS is a reactive library for JavaScript that can be used for the frontend and backend (with Node.js). It uses Observables to make it easier to compose asynchronous or callback-based code and is a helpful tool for managing data and events within your app (i.e. mouse clicks, user input, etc.).

RxJS 7.0 is the library’s first major release in 3 years and comes after a year-long beta period.

What’s new in lucky v7:

Better TypeScript typings — RxJS 6 targeted a much older version of TypeScript (which was annoying), but RxJS 7 now targets TS 4.2, which provides more consistency for using types like Subject next(), toPromise(), and others
New & improved methods and operators — There are a ton of these (which you can check out here), but the overarching goal behind them was to to introduce better usability and consistency to the RxJS APIs
Way smaller — Even with all the new stuff, v7 is almost 50% smaller than v6. They did this through “slow, steady refactoring backed by thousands of tests”, as opposed to a single massive rewrite or architectural change

The Bottom Line

RxJS is still thought of as mostly an Angular tool by many, but TikTok’s React web app just saved 14.3KB by upgrading to RxJS 7, so that we could get videos like this gem to load faster than ever.

Maybe v7 will see RxJS continue to expand its presence with other frameworks.

JS Trivia - Answer Below

How many times is the reducer function invoked?

const nums = [2,4,6]

const reducer = (prev, current) => {
  console.count('invoked')
  return prev + current
}

nums.reduce(reducer)

What will building for the web look like in 5 years?

“It will be many times more productive to build fullstack web apps with Javascript frameworks (like Blitz) than with other languages like with Ruby on Rails or Laravel. Running fullstack apps on serverless architecture will be the norm and WAY easier than it is now.”

Brandon Bayer is the creator and maintainer of Blitz.js and will be giving a members-only demo this Thursday called “Building Fullstack Apps in Record Time with Blitz.js”.

Cool Bits

Addy Osmani wrote a great article about how to use the humble <img> tag to improve your site’s UX and Core Web Vitals score. This will sure come in handy once your leadership team figures out they can make “Core Web Vitals score” a KPI.
Facebook’s engineering team wrote a brief history of Rust at Facebook that we were pleasantly surprised to see starts with a tribute to Salad Fingers and his love for Rust and spoons.
Scribbletune 4.0 is a Node module that helps you make sweet music with JavaScript and export them as MIDI files. It’ll also make you regret dropping out of Piano lessons in 4th grade when you can’t understand the docs.
Stephanie Eckles wrote a fun and very in-depth guide to CSS Pseudo-Class Selectors. Because, as my grandpa said when he passed down his fake Rolex to me, “if you can’t afford true class, your next best option is pseudo-class.”
Caleb and Andrew wrote about how their team at Airtable converted one million lines of code to TypeScript. All that work to refactor their app and yet they still use Medium for their blog. Bummer.
ESM is now natively supported in Node.js, and I just can’t wait to see what this is gonna do for my Scribbletune game.
Marko shared some CSS tips you won’t find in most tutorials. You know what else you won’t find in most CSS tutorials? Me, unless I’m desperate.
Bomberjam is an AI programming challenge where you write your bot using one of six languages (including JavaScript) and fight against other players to try and reach first place on the leader board. This reminded me that I’ve had codercombat.com for sale for years now. Bomberjam team HMU.

JS Trivia - Answer

How many times is the reducer function invoked?

const nums = [2,4,6]

const reducer = (prev, current) => {
  console.count('invoked')
  return prev + current
}

nums.reduce(reducer)

Answer: Twice

If an initial value isn’t supplied, the first element in the array will be used as the initial value and the first invocation of the reducer function will be skipped.