Drop #186 (2023-01-25): **X-Files 🚀 🌌

JSX; MDX; Astro 2.0

I want to believe the truth is out there when it comes to the One True Framework to Rule Them All

¹

.

Painfully forced ledes aside, today’s Drop is all about frameworks. The first two sections are mostly a setup for the final one, but they’re all fairly standalone. If you’re not using any of these frameworks/technologies today, you may decide to after poking at each of them a bit. They can help save tons of development time, and the last one can save space and bandwidth on the server side.

JSX

Photo by Henry Siismets on Unsplash

JSX [GH] is “an XML-like syntax extension to ECMAScript (a.k.a. javascript) without any defined semantics.”. It is intended to be used by various preprocessors or transpilers to transform JSX tokens into standard javascript. This is their seminal example:

// Using JSX to express UI components
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

If you're not used to JSX it may look, er, icky, at first glance, including, “how can there HTML being assigned without quotes?”. For that answer, you can dig into the JSX grammar. After you read that, you may be thinking, “couldn't we just use the fancy template literals in modern javascript?”. JSX has an answer that boils down to two arguments: you'd have excess noise and friction in those template strings, and template literals have a specific format/expansion contract that would force JSX to be added to the javascript official specification to handle: something the JSX creators were fundamentally hoping to avoid.

You've likely used JSX if you're working in one of the super-modern front-end frameworks (e.g. React; Vue). You can also use it directly as a template engine with just plain Node.

"No, no. There is too much. Let me sum up."

Fundamentally, JSX is a way to write code that makes it easier to build user interfaces. It allows you to write code that looks similar to HTML, but also includes the power of javascript to make the interface dynamic and interactive.

You can get a better feel for JSX in this Observable notebook.

MDX

MDX [GH is a way to write and mix markdown and JSX in the same file. Instead of HTML, your content is expressed in plain ol' markdown, but you can also include JSX components, which are — as noted in the first section — reusable pieces of code that can add dynamic behavior and interactivity to a website.

You can, for example, use MDX to write a blog post, and include a JSX component that creates a button that, when clicked, shows a message. Or you could use MDX to write a documentation page, and include a JSX component that renders an interactive diagram. Perhaps including their basic example would be better:

# Hello, world!

<div className="note">
  > Some notable things in a block quote!
</div>

The heading and block quote in the above snippet are markdown, while those HTML-like tags are really JSX. For most folks, markdown is a more natural way to express formatting intent than plain HTML or enhanced JSX. However, markdown's domain is very tightly scoped, so having the ability to co-mingle markdown and extended syntax is pretty handy, especially in the context of a more IRL example:

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

The folks behind MDX did a pretty decent job 'splainin what it is, so we'll let them fill in the gaps.

Alternately, you can dive right into their MSX playground if you learn better through scraped knees and scratched elbows.

Astro 2.0

Photo by Yash Raut on Unsplash

Astro [GH] is “an all-in-one web framework for building fast, content-focused websites.”

This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some e-commerce sites. It leverages server-side rendering over client-side rendering as much as possible. This is the same approach that traditional server-side frameworks — PHP, WordPress, Laravel, Ruby on Rails, etc. — have been using for decades. But you don’t need to learn a second server-side language to unlock it. With Astro, everything is still just HTML, CSS, and JavaScript (or TypeScript, if you prefer). Plus, you can use any favorite UI component languages that you already know: React, Preact, Svelte, Vue, Solid, Lit, and several others are all supported for creating new UI components in Astro projects.

Version 2.0 features component Islands, an architecture pattern that “refers to an interactive UI component on an otherwise static page of HTML. Multiple islands can exist on a page, and an island always renders in isolation. Think of them as islands in a sea of static, non-interactive HTML.” You can read more about “component islands” in this post by Jason Miller (though the term/concept was pioneered by Etsy's t Katie Sylor-Miller).

I'm dropping Astro on you today due to another 2.0 feature: it has complete type-safety for Markdown and MDX. They've paired this with content collections to help reduce component sprawl and help ensure there is consistency across hundreds or even thousands of pieces of local content. Markdown/MDX content is paired with layouts, which helps maintain a reusable UI structure (i.e. such page templates).

You may be asking “where's JSX?” since I seemed to be setting you up for this combo in today's Drop. Astro takes the place of JSX, but in such a way that you'd do well to learn JSX first (to keep a more generic skill set sharpened), then dig into Astro's specific flavor.

You can start exploring Astro with a pre-built Astro site, by hitting up — https://astro.new and choosing a starter template to open and edit in their online editor.

FIN

If you build some content with Astro (or the other bits mentioned) drop a link in the comments. ☮

1. It was as painful for me to type as it was for you to read. Trust me.