Bytes - React is back, baby!

React is back, baby!

12/28/2020

React crawls out of its cave, Brave wants a decentralized web, and we learn about JavaScript's prototype.


React Server Components

Dr. Dre

Y’all know me, still the same OG. But I been low-key

If you were to have asked me last week, I would have told you React is trending downward. And if you were to have asked me last week, I would have been wrong.

Like Michael Bublé, the React team decided to reclaim their position on the top of the charts over Christmas.

Meet React Server Components. Yes, React on the server.

OMG THEY JUST REINVENTED PHP LOL POGGERS

Stop it. Here's how I like to think about it. Rendering on the server has benefits - mainly allowing easy access to data sources and quick first paints. Rendering on the client has benefits - mainly interactivity and making apps feel "appy".

The problem is historically we've been stuck in an either/or situation. You either jump through ALL the SSR hoops to get a quick first paint (then hope hydration goes well) or you forget about SSR all together and hope your users are using Brave on a Macbook Pro.

With React Server Components, you no longer need to make those tradeoffs. Leverage the strengths of server/client rendering while avoiding the weaknesses.

Here are the details -

  • A component's pathname now specifies whether it's a server component (X.server.js), a client component (Y.client.js), or both (Z.js).

  • Server components run only on the server and they have no impact on the client's bundle size.

  • Because server components run on the server, they have direct access to server-side resources (databases, file systems, etc).

  • Server Components preserve client state when reloaded. This is what makes Server Components different than traditional SSR with React. With traditional SSR, you send your app over the wire as a (HTML) string. Once React renders that string to the DOM, it throws it out and JavaScript takes over. Server components use a "richer" format than HTML. This format makes it so Server Components can refetch as needed and incrementally update the UI without blowing away state.

  • Server Components treat all imports of Client Components as potential code-split points. This means you get code splitting essentially for free since React will never ship a Client Component that isn't immediately needed by the client.

The Bottom Line

React is back baby!


JavaScript + Rust = Boa?

Going to flavor town

Get in, we're going to low-level JS FlavorTown

What happens when a TC39 delegate gets a wandering eye for a new programming language? Turns out, they aren't actually brought before the committee, forced to turn in their badge and their gun, and violently exiled from JavaScript-land forever (kind of a letdown, tbh).

In Jason Williams' case, he simply figured out a way to marry his first and second loves by using Rust to build a JavaScript engine named Boa. As he started falling for Rust, he (like others in recent years) saw the benefits of bringing Rust to the JavaScript ecosystem and vice versa.

Last week, Boa took a big step towards that goal when it released v0.11 -- it's biggest release yet.

Boa describes itself as an "experimental Javascript lexer, parser, and compiler" (AKA all the things that JavaScript engines do). It still isn't fully conformant (nice word, right?) to the JavaScript Spec, but this v0.11 release took Spec conformance from 18% (back in October) up to 31% last week. A solid jump in 3 months. Boa is also seeing almost 6x faster execution after it switched to using to the regress engine for regular expressions.

Faster execution and greater conformance are the name of the game if Boa ever wants more mainstream adoption, so these are both positive signals.

Who's ever gonna use this?

  • Rust devs who want to include an embeddable JavaScript implementation in their Rust code
  • JavaScript devs who are curious about the Rust and WASM's hype and want an excuse to bring it into the browser
  • Your obnoxious co-worker who always wants to flex about using bleeding edge tech

But now that you've read this, you can start messing around on the Boa Playground for a few minutes, and you could become that obnoxious co-worker. You're welcome.


Spot the Bug (Answer Below)

function Animal(name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy

  return animal
}

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}

const leo = Animal('Leo', 7)
leo.eat(5)

Cool Bits

  1. AnimXYZ is a composable CSS animation toolkit that's powered by CSS variables and built for Vue, React, and SCSS. Not to be confused with "AnimeXYZ", which would be a great name for an animation library that makes a tiny Naruto run across the bottom of your screen every time a new page loads.

  2. Fayaz compiled an interesting list of actually useful no-code tools for developers that aren't site builders.

  3. You know how 50% of blog posts could have just been tweets? Well, Alex Kondov wrote a blog post so in-depth that it probably should've been a book. We present to you -- The Tao of React: Software Design, Architecture & Best Practices. Just call it an e-book and charge $10 for it, Alex (and pay us 15% for being your e-publisher).

  4. If you're looking for a good waste of time (who isn't?), you may want to check out <SpeedTyper /> - a type racing application for programmers that will definitely activate all of your repressed Mavis Beacon trauma from the elementary school computer lab. I'm currently sitting comfortably at #5. Bring it on, coward.

  5. Razvan wrote about how he almost got fired for choosing React for his team's enterprise app. (TL;DR -- don't outsource your React enterprise app to .NET developers, lol.)

  6. Jack Franklin from Google wrote about migrating Puppeteer to TypeScript. Word on the street is Geppetto is also migrating to TypeScript.

  7. Aleksandr also wrote a looong article on how to code SVG icons by hand that makes me think I should probably just keep using other people's libraries. (Shout out to people named Alex going above and beyond with these blog posts this week.)

  8. Adrian Twarog made a video demonstrating 10 examples of "clean" JavaScript code. Did he miss a great opportunity to sing the OutKast classic, "So fresh and so clean" at some point during the video? 100% yes. But will we hold that against him forever? Also 100% yes.


This week in history

7 years ago this week, the first public version of React was released. It's come a long way since then, but fundamentally it's still pretty much the same.

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function () {
    return <div>{'Hello ' + this.props.name}</div>
  },
})

React.renderComponent(
  <HelloMessage name="John" />,
  document.getElementById('container'),
)

Here are a few quotes from how it was first received.

  • "There's already a library named react.js" - wycats
  • "This breaks code editors, static analysis tools like jshint etc. I think Web Components is landing soon, and this seems like it could leverage that." - amasad
  • "I'm confused, every example is 100 times the code I would write using straight html... Is there a benefit I'm missing?"- darkchasma
  • "Do templates have to live inside the application logic? If so, this is a really poor decision." - dpham
  • "This is terrible, so did we really not learn anything from PHP days? Are we seriously going to mix markup and logic again?" - mavdi
  • "OMG, JSX.. why? just why?? Stop ruining js people!" - lardissone
  • "Mixing js and xml syntax, variables in docblocks, DOM components that are not really DOM components ('React.DOM components look like browser DOM elements, they differ in a few ways'), undocumented/obscure OO features (React.createClass?). Yikes. Thank you, but no, thank you." - leecGoimik7

Shoot your shot, kids.


Spot the Bug - Answer

Our call to leo.eat is going to fail. The reason for this is because the object returned from Animal isn't delegating to Animal.prototype so leo.eat will be undefined.

To fix this, we can use Object.create or a combination of the this keyword with new.

function Animal(name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy

  return animal
}

// or

function Animal(name, energy) {
  this.name = name
  this.energy = energy
}

const leo = new Animal('Leo', 7)

For more details, check out A Beginner's Guide to JavaScript's Prototype.

made with ❤️ by ui.dev