Hopper's afraid of birds!
Last week, Tanner Linsley (the creator of React Query, React Table, React Charts, React Virtual - AKA the TanStack) released React Location -- a brand new router for React that isn't React Router.
Poetically, React Location comes to us just a week after React Router released v6.0 -- which feels a lot like when A Bug's Life came out a month after Antz (literally) 23 years ago today. (HBD, Flik).
Now I know what you're thinking, "I've survived 7 breaking changes from the other routing library I use. Why would I change now?". First off, watch your tone. Second, React Location includes all the table-stakes features we covered in last week's story on the other router™ -- nested layouts, code-splitting, path parameters, and server-side rendering support. But it doesn't stop there, here are a few of our favorite parts.
Async Routing: Once you've got a top-notch router, the data fetching story writes itself. Each route can define data loading functions, which run in parallel before the route renders. Links can be configured to preload, and you can set up transition and loading states. It's almost like React Suspense was actually released (sick burn). Heres's a demo so you can see what async routing is all about.
Next-level URL Search Params: These are the bits that come after the
? in the URL that add some extra info. By encouraging you to put more of your state in search params, React Location makes it easier to share that state with other people by copy/pasting the URL – just how Al Gore pictured it when he invented the internet. And changes to any part of the URL will be batched, so you don't need to worry about excessive re-renders either. Here's a demo showing off sophisticated URL params (and a bunch of other fancy stuff with React Location).
React Location gives you that unicorn-like, waterfall-less routing experience without forcing you into any specific SSR framework or query library. The way I see it, if you're building a production-level SPA and you're not using a framework that dictates the router you have to use, there's very little reason you shouldn’t be using React Location -Tanner Linsley
Bottom Line: "But Tyler, building SPAs is so 2020." Touché, so just check out React Location in 2023 when they're back in style.
When you build your own chat app from scratch [sponsored]
Building a chat app from scratch is like trying to make your own Pop-Tarts from scratch -- overly complex and completely unnecessary in the year of our Lord 2021.
And that's because of Stream. It's the #1 chat-messaging and activity feed platform in the world, and it handles all of that chat-building mess for you.
bUt WilL iT SCaLe? I knew you'd ask that. Well maybe you should ask Match.com instead -- they use Stream to let their 21.5 million members send each other heartfelt messages like, "You up?" every single day (and night).
Adobe, Imgur, SoundCloud and a bunch of other companies have built apps with Stream too. Chances are, you've probably already used Stream's chat without even realizing it 🤯.
Check out this tutorial to see how easy it is to build a React chat app that leverages Stream's Chat API and React components. The API is surprisingly flexible, so you can build any chat experience your app could possibly need.
It worked in 1184 BC and it'll (probably) work today.
Last week, Shopify released a developer preview of Hydrogen -- its new React-based framework for building custom Shopify sites. And by "React-based framework", I mean "a more opinionated Next.js." Let me explain:
Like Next.js 12, Hydrogen integrates React Server Components and streaming server-side rendering with suspense -- which gives e-comm shops exactly what they need: a fast initial load and efficient, component-level updates after the page is loaded.
Hydrogen makes it easy to build a dynamic, highly-customized storefront. You can think of it like your Father-in-Law: incredibly opinionated thanks to a pretty narrow worldview. Unlike Next.js, Hydrogen only cares about helping you do one thing (build custom Shopify storefronts), so it tailored itself to fit that single use case.
You'll notice some of these strong opinions right away -- the starter template comes with TypeScript, Vite, and Tailwind CSS as defaults. It also has tons of pre-built UI components and hooks, which is why Mr. Jeff Fireship calls Hydrogen "a cross between a template and a framework."
So why did Shopify build Hydrogen? Because money. And also because they wanted to make life easier for Shopify developers, of course. Oh, and also because they're gearing up to launch a new hosting platform called Oxygen -- "the fastest way to deploy Shopify-backed commerce experiences."
Bottom Line: "Come for the free framework, stay for the paid hosting" is a tactic being used by appx. 75 different software companies today -- but Hydrogen does look like a genuinely valuable tool for building cool Shopify sites that don't look the exact same as every other Shopify site. Time will tell if Hydrogen and Oxygen produce water or just hydrogen peroxide. That has to be our worst joke ever.
Alan is the first health insurer in France since 1986, and we’re aiming to build the healthcare super-app for 10M Europeans. Our 400+ strong team enjoys our values of distributed ownership, radical transparency and a flexible remote policy. We recently raised a Series D bringing the company’s total valuation to €1.4bn, and we were named the #1 best startup to work at in France by LinkedIn.
In my opinion the most exciting thing about CDK is opening the doors to AWS Cloud for engineers with JS/TS backgrounds. Being able to dig into infrastructure topics without years of a DevOps experience, while remaining within the realm of a familiar programming language is a game changer. Frontend, backend, infrastructure - all things are possible with TypeScript 💯.
Tomasz Lakomy is an AWS Community Hero and Frontend Engineer at Stedi.
He'll be doing a live talk for ui.dev subscribers on Wednesday called, "Intro to AWS Cloud Development Kit (with TypeScript)." Sign up for a free 3-day trial to check it out.
Builder.io is a visual experience builder that lets non-developers use a drag-and-drop UI to create custom pages and layouts that are speed-optimized out of the box. Check out their free tier, and see how easy it is to instantly clear your backlog from all those never-ending marketing asks. [sponsored]
Bundle Scanner lets you enter a URL to see all of the npm packages used by the site. It's not quite as much fun as a police scanner, but it is more legal. Tradeoffs.
Adhiraj created Baileys -- a fully-featured TypeScript WhatsApp Web API that was undoubtedly named after Old Greg's favorite thing to drink from a shoe.
Vercel hired Rich Harris (the creator of Svelte) to work on Svelte full time. Still waiting on a response from Guillermo to see if they'll hire me and Wes Bos to work on our debut technical screamo album titled "life is undefined" full time.
In this interview, Jonathan breaks down all the reasons why you'd want to use Ember in 2021.
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js". RIP sweet prince.
Gobie Nanthakumar created uiui.dev -- which is some grade-A trolling that I hope is intentional (game recognize game). It's a collection of some cool UI components. To not be outdone, we'll be dedicating all our resources into building out our new site, uiuiui.dev – a collection of some cooler UI component.
Delivered to 105,434 developers every Monday
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.
Literally the only newsletter I’m waiting for every week.
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.
The sense of humor and structure of the Bytes Newsletter is first class and the information that comes with it is enough to make a mini course.
Very few newsletters manage to be useful and not very boring. @uidotdev manages to achieve these pretty effortlessly. You can almost see Tyler chuckle as he writes them.