@decorators are sus

Issue #16.October 5, 2020.2 Minute read.
Bytes

As you can (hopefully) tell, we try to keep self promotion on here to a minimum. With that said… we think we run the best developer IG account in the game and you should check it out. Unfortunately, we’re not good looking enough to just take selfies with VSCode open in the background, so we’re forced to improvise.

MobX 6 Released

mobx killing decorators

@decorators are sus

It’s been 5.5 years… The world was fascinated with Manitowoc County, we were all arguing over what color a dress was, and the first commit was made to MobX. Things were a lot different in 2015, but last week’s v6 release shows that MobX is still plugging away on its original vision of “simple, scalable state management.”

Michel Weststrate (the Mob-Father himself) says that this release isn’t jam-packed with new features but is more of a “consolidation on the current state of affairs in JavaScript”.

Here are the major highlights:

  • 👋 Bye bye Decorators (kind of): MobX was the first large JavaScript library (that I’m aware of please don’t email me) to lean into Decorators for its public API, now it’s singing Tom Petty and having a change of heart. That said, they are still supported, but with a totally different implementation that actually works with the current TypeScript and Babel implementations. This is arguably the biggest change in v6, since historically requiring the use of decorators has turned off a lot of devs.

  • makeAutoObservable: This new convenience utility automates the annotation process by automatically picking the best annotation for every member of a class. This should be especially helpful, now that those annotations are no longer adjacent to the fields they are decorating (see above).

  • Support for more Browsers: MobX 5 required Proxy support,which made it unsuitable for IE and React Native. MobX 6 still does, but you can opt out of it if you need to support older engines.

The Bottom Line

v6 definitely seems geared towards making MobX more approachable for developers who haven’t used it before, while doubling down on features that its long-time users love. It’s a solid release from everyone’s favorite state management solution (**besides component state, context, Redux, and Recoil).

** That’s a joke, MobX is great.

Elsa - A New Runtime with a Modern Twist

Ice King

The one true Elsa

You get a runtime! And you get a runtime! These new runtimes are popping up everywhere in 2020. Elsa is the latest one - it was released last week as a “minimal, fast, and secure” runtime for JavaScript and TypeScript that’s written in Go. We’re still waiting for the bloated, slow, and insecure runtime to be released. No word yet.

Here are the three main things that differentiate Elsa from The Anagrams™ (AKA Node & Deno):

1. Different engine: Instead of V8 (the JS engine, not the juice), Elsa uses QuickJS and ESBuild. QuickJS is a small and embeddable engine that claims a better startup time than V8, although it’s not nearly as full-featured. ESBuild is an extremely fast builder and minifier that’s also written in Go and was created by Evan Wallace, the CTO of Figma.

This combo of QuickJS and ESBuild could potentially make Elsa an attractive option for CLI apps even if it does mean that it’s not the best option for other projects that require more runtime functionality.

2. Minimal but extendable: The Elsa team’s goal was to create a runtime that could “fullfil the bare minimum requirements” for basic projects but still be extendable via plugins. A few features that aren’t currently included, but could be added via extensions, include tools for formatting, linting, and analysis.

3. Not built by Ryan Dahl: At least we don’t think it is. But it turns out that the 3 Elsa creators are all Deno contributors as well, so who knows.

Other noteworthy Elsa features include URL based imports, module caching, and the ability to easily bundle your script into a single file. Check out the full comparison of Elsa, Deno, and Node.js for more.

The Bottom Line

This project is still in experimental mode, so your co-workers will think you’re extra smart if you deploy it to production.

JS (React) Quiz - Answer Below

// Function Definition
function add (x, y) {
  return x + y
}

// Function Invocation
add(1,2)

// Class Component Definition
class Icon extends React.Component {}

// Function Component Definition
function Icon () {}

// What is this called?
<Icon />

Cool bits

  1. Domenic wrote about how DigitalOcean’s Hacktoberfest is really a “corporate-sponsored DDOS attack against the open source maintainer community.”. **We’re also open to ideas on how we can profit off of the open source maintainer community. DMs are open.

  2. Fullstack UI has a new, free UI design course that looks really high quality.

  3. react-chrono is a modern timeline component that makes it easy to visually plot key dates and events. (March 2020: Quarantine begins… April 2020: Everyone starts making bread.)

  4. Ryan wrote about how you can configure your GitHub Action’s workflows to only run when a certain phrase is present in the commit message. What could go wrong?

  5. ByteDance (TikTok’s parent company) open-sourced IconPark - a library of 1,200 high-quality icons and an interface for customizing them. It’s the coolest thing they’ve given us since the Savage dance.

  6. The Dropbox team wrote an in-depth article about how they re-wrote the HelloSign Editor from JQuery to React.

  7. 🐍 Parsel is a tiny, permissive CSS selector parser created by Lea Verou that will maybe also teach you how to speak to snakes?

  8. Eran wrote a nice guide to getting started with Cypress. You know, in case you’re into that whole “testing” fad.

One Question Interview

What does building for the web look like 5 years from now?

Liz Parody

“I think there will definitely be more tools for no-code, more automation, and new major libraries, (5 years ago JQuery was super popular, today is React, I think the future will bring a new one). I also think we’ll see simpler routing, deployments and maintainability, as well as more serverless development. Lastly, we’ll continue to see a lot more mobile development.”

Liz will be giving a ui.dev Event titled “Examining Observability in Node.js” this Thursday.

JS (React) Quiz - Answer

To get to the answer, let’s start by looking at the absolute fundamentals of React. What is React? It’s a library for building user interfaces. No matter how complex React or the React ecosystem seem to be, this is React at its core — building UIs. With this in mind, we arrive at our first definition, an “element”. Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of a DOM node.

In order to create a React element, we can use React’s createElement method.

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

When it’s rendered to the DOM (using ReactDOM.render), we’ll have a new DOM node that looks like this,

<div id='login-btn'>Login</div>

We’re closer, but there’s still one more pieces of knowledge we need to answer the question and that is how JSX works “under the hood”.

Web browsers don’t understand JSX, they do, however, understand JavaScript™. During compilation (usually with Babel), JSX gets transformed into regular old JavaScript (or more specifically, React.createElement invocations which we just learned about).

// JSX
function Button ({ addFriend }) {
  return (
    <button onClick={addFriend}>Add Friend</button>
  )
}

function User ({ name, addFriend }) {
  return (
    <div>
      <p>{name}</p>
      <Button addFriend={addFriend}/>
    </div>
  )
}

// After Compilation
function Button ({ addFriend }) {
  return React.createElement(
    "button",
    { onClick: addFriend },
    "Add Friend"
  )
}

function User({ name, addFriend }) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "p",
      null,
      name
    ),
    React.createElement(Button, { addFriend })
  )
}

So finally, what do we call this, <Icon/>? We call it “creating an element” because after the JSX is compiled, that’s exactly what’s happening.

For a much more in-depth post on the topic, visit React Elements vs React Components