Bauhaus, Brutalism, and... React Native?

Today’s issue: A one-way ticket to Grid World, Architecture 101, and Gwenyth Paltrow’s thoughts on Visual Basic.

Welcome to #176.

---

Bauhaus, Brutalism, and… React Native?

Sorry, I’ve had architecture on the brain ever since yesterday, when the React Native team dropped some performance benchmarks for its new architecture.

This could be the last chapter of a 5-year saga for React Native, so let’s zoom out and take a look at why they decided to refactor their entire core and how we’ve gotten to where we are today.

Quick background: You’re probably already aware of how React Native lets you write cross-platform mobile apps with JavaScript and React — instead of using native languages like Swift and Kotlin. A big part of this magic originally came from the React Native “bridge”, which used serialized JSON messages to allow your React/JavaScript code to communicate with the native side of your app and vice versa.

This approach worked, but it came with performance tradeoffs, which stemmed from too many JSON messages needing to go through a single communication channel (among other things). Ultimately, The Bridge became too much of a bottleneck and it needed to go.

The big refactor: In Q2 2018, the React Native team started working on the new architecture internally for all 1,000+ Facebook app surfaces using RN. (I hope they referred to this as Operation Burning Bridges.) And when they started talking about it publicly in late 2018, the React Native community was hyped.

It took almost 4 years of work, but in March 2022, we were finally blessed with React Native 0.68, giving developers a chance to opt in to the New Architecture™️ — which consists of 4 main pillars:

• JSI (JavaScript Interface) — A new C++ API for interacting with any JS engine. This replaced the “bridge” with a direct interface between JS and C++ and removed the need JSON-ify data.

• Fabric — The new concurrent rendering system brought all React 18 features to RN.

• Turbo Modules — Improves performance by only loading modules when they’re actually needed and allows native methods to be called synchronously.

• Codegen — An optional tool to automate code generation for better type safety and code quality.

Since then, they’ve made the new architecture the default, and are still working to address a few edge case performance issues — which look to be resolved in the upcoming 0.72 release.

Bottom Line: Large-scale architectural projects are always a long journey, but thankfully React Native’s new core should be done before The Sagrada Famillia.

---

Is AI going to take all of our jobs?

Tbh, I have no clue. But I do know that it can make you a lot more productive right now… assuming you know how to use it.

The hard part is figuring out where to start — What tools should you try first? And how can you integrate them into your workflow?

Thankfully, Brilliant has your back. They’ve got tons of bite-sized lessons on AI, so you can start learning in just a few minutes per day. Here’s how:

• They break down complex concepts into digestible building blocks that stick.

• Their interactive style makes it easy to build a daily habit.

• They have thousands of lessons on a wide variety of topics — so once you’ve mastered the AI stuff, you can move on to other technical topics like calculus, linear algebra, and neural networks.

Right now, you can try everything Brilliant has to offer for free for 30 days. And Bytes readers get 20% off an annual premium membership. Check it out.

---

SVG’s are the tool of choice for most developers when it comes to icons because they can scale without losing quality, they’re small, and they can be styled with CSS (but you already knew that).

What you might not know is that you can use the old school technique of sprites but get some modern benefits with SVG.

More below.

---

1. Ryan Lucas wrote a great article called Something Pretty Right, which dives deep into the history and legacy of Visual Basic. It reminded me of the working title for Gwenyth Paltrow’s new movie about her ski trial: Something Petty, Right?

2. Courier built an out of the box notification service that manages templates and routing logic for multiple providers like Twilio, SendGrid, APNs, FCM, and Slack. See for yourself, and never build a notification service again. [sponsored]

3. Astro just released v2.2, which now allows you to load assets from an external CDN and experimental support for relative images in frontmatter.

4. Adham Dannaway wrote an article called 16 little UI design rules that make a big impact. I’m pretty sure it will age a lot better than the early 2000’s sitcom, 8 Simple Rules for Dating my Teenage Daughter.

5. Vladimir Klepov wrote about how useEffect sometimes fires before paint.

6. Alex Miller wrote an article called Grid World for the latest issue of The HTML Review, with some really cool graphics. I love when he talked about being “intoxicated by graph paper” as a kid. And I thought I was the only one who sniffed those pages for hours 🥹.

7. Skeleton.dev is a new UI toolkit for SvelteKit and Tailwind. Yes, I am very jealous of that domain, thanks for asking.

---

To create an SVG sprite, you can leverage the <symbol> element.

1. Create an SVG sprite containing the symbols you want to reuse:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <symbol id="icon-circle" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="16" />
  </symbol>
  <symbol id="icon-square" viewBox="0 0 32 32">
    <rect x="0" y="0" width="32" height="32" />
  </symbol>
</svg>

2. Use the SVG symbols throughout your site:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <use href="#icon-circle" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <use href="#icon-square" />
</svg>

Using SVG Sprites can help reduce requests, and gives you most of the benefits of inline SVGs. Win Win.

Bonus: If you are using React, you can do something like this:

import React from "react";
import ReactDOM from "react-dom";

// keep a list of the icon ids we put in the symbol
const icons = ["icon-circle", "icon-square"];

// then define an Icon component that references the 
function Icon({ id, ...props }) {
  return (
    <svg {...props}>
      <use href={`/images/sprite.svg#${id}`} />
    </svg>
  );
}

// In your App, you can now render the icons
function App() {
  return (
    <div className="App">
      {icons.map((id) => {
        return <Icon key={id} id={id} />;
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);