Bytes #74 - talking animals and Turkish delight

talking animals and Turkish delight

Issue #74.November 15, 2021.2 Minute read.

This week we've got the scoop on a new routing library for React, a new way to build Shopify sites, and a new album drop from your favorite JavaScript educators. Welcome to #74.


React Location -- A New ~~Hope~~ Router

A Bug's Life meme

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.


Cursed Cookie

When you build your own chat app from scratch [sponsored]

Stream is how smart developers build chat apps

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.


Trojan Horse Meme

It worked in 1184 BC and it'll (probably) work today.

A new framework for building Shopify ~~shareholder value~~ sites

Perhaps the only thing we need less than another JavaScript framework is another hosting platform... but thanks to Shopify, we're about to get both. Yayyy.

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.


Job Listings

Alan is looking for experienced fullstack engineers in France, Spain and Belgium

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.


One Question Interview

What is the single most valuable/exciting thing about AWS Cloud Development Kit?

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 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.


Cool Bits

  1. Wolfgang Ettlinger wrote about The Invisible JavaScript Backdoor -- which (sadly) does not lead to a magical world of talking animals and Turkish delight.

  2. 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]

  3. 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.

  4. 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.

  5. 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.

  6. In this interview, Jonathan breaks down all the reasons why you'd want to use Ember in 2021.

  7. Lee Robinson (aka LEEE-ROBBBBBBB Jenkins) wrote about how Rust Is The Future of JavaScript Infrastructure. Another L for script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js". RIP sweet prince.

  8. 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.

Join Bytes

Delivered to 70,048 developers every Monday