shitty drawing of a sad rocket turned into a happy washing machine
shitty drawing of a sad rocket turned into a happy washing machine

There are plenty of ways to build reactive interfaces, but my favorite is to use finite state machines. I’ve written before on how JavaScript Promises are finite state machines, but I only briefly touched on how finite state machines communicate between each other. With communication comes the potential for race conditions and race conditions bring sadness.

There are different channels for this communication. In the browser we have: event listeners, the DOM, message channels, callbacks (including promises), methods, shared memory, etc.

What’s the difference between a rocket and a washing machine? For our purposes, the difference is how long they…

An unskilled drawing of a short, dark wizard shooting a flaming “J” from one hand and a watery “S” from the other.
An unskilled drawing of a short, dark wizard shooting a flaming “J” from one hand and a watery “S” from the other.

There was an old trick used by Angular and a few other libraries of using a function’s source code (which you can get using .toString()) to get its argument names. Promisify-node used this technique to find arguments called callback or cb. Angular uses it for dependency injection, though there are other better ways of doing that.

When JavaScript got default values and rest parameters this technique became much less effective. It seems the StackOverflow answers based on regular expressions have lapsed into, “works in most cases.” …

Sample of what we’ll be building

I’ll be using JavaScript here. With it we can write this in <100 lines of code.


We’ll start by laying out our code. I’ll be using closures, but you could — and my first version did — use a class instead. We’ll need a parse_html function, inside we’ll put a helper function called pull and a parse_content function which we’ll fill in later.

If you’d like to follow along, the finished code is here:

The cursor will be a reference to a node in our DOM tree. Tag nodes will have a tag property for their name, an…

I’m excited about template elements. There’s no specified way of instantiating them, so let’s talk about where they come from, why we use them, and how to instantiate them.

Mommy, where do template elements come from?

Most likely, you won’t write them by hand. Instead, they’ll be generated from template literals, JSX, or something else. These generators will have to deal with template instantiation. By using template elements, these generators share the efficiency of using the built-in parser and cloning DOM sub-trees.

Where they will likely differ is in how they do reactivity. Template elements are a low level primitive and so low-level element access should be…

Picture of various fruits in bins at a market: apples, oranges, pomegranates, etc.
Picture of various fruits in bins at a market: apples, oranges, pomegranates, etc.
Photo by Jakub Kapusnak on Unsplash

The Problem:

Polymorphism is important in any language and while it is very easy to write polymorphic code in JavaScript, it is relatively hard to manage that code. Without explicit types you must either assume the structure of an object, or explicitly test its structure before using any functionality. Explicitly testing slows down your code, while making unsound assumptions usually results in bugs. This might sound like a trade off, but it’s just another problem for which fast and safe solutions exist.

A great solution is type annotations. You probably know about TypeScript and Flow already, so I’ll just be mentioning pieces…

I’ve been working in Rust on Web Assembly projects a lot lately. First was working through the Raytracing in a Weekend series except I’m using Rust and drawing to an HTML Canvas. Right now I’m working on a template for peer to peer websites that wouldn’t require hosting a WebRTC signaling server. My previous version was all JavaScript including a binary serialization and deserialization setup which I’ve replaced with the Postcard crate. In my projects, I’ve gone from manually instantiating the wasm module to using wasm-pack, and then to using wasm-bindgen without wasm-pack. …

I’m a big believer in distributed systems. It is easy to see the need for distributed systems when we see the existing digital infrastructure being tested by COVID-19 levels of load. Unfortunately, distributing a system is not usually a simple task. Consistency no longer comes naturally and horizontal scaling is difficult. Distributing a system requires careful thought. It can be worthwhile though.

Why should we build distributed web apps?

There are at least three desirable properties that distributed web apps can achieve:

  1. Fault tolerance: They can survive failing servers. With service workers, web apps are able to show something even if the server and client are disconnected…

Writing correct software is hard. Whether you’re using functional programming or finite state machines, understanding the problem you’re solving and understanding your code are both required for correctness. Async functions and generators are stateful syntax for which we can draw state diagrams so that we can understand them. If you know how to break your problem down into a finite state machine then this will show you one way of implementing it as well. Deciding whether doing so would be ergonomic for you and meet your requirements is something you will hopefully be able to do by the end. …

Till now, I’ve given you no method of telling the computer how to make decisions. You currently don’t have a Turing Complete understanding of JavaScript. Turing Complete means that a machine or language has the functionality required to compute anything that a Turing Machine can compute. We still won’t have a Turing Complete knowledge at the end of this section but we’ll be pretty close.

The Boolean is a data type with two values, True and False. Boolean’s are a core component of logic. Logic spreads over both math and philosophy. Logic — implemented by electrical components — is what…

How do you get started programming? You press control+shift+i if your on Chrome, Firefox or Edge. To open the developer tools for Safari I Googled it for you: This brings up the developer tools, your new home for the first section of this tutorial. Next you’ll want to navigate to the console. This is where we’ll be typing in expressions.

Hello world in JavaScript is about as easy as could be. At the console type:

Then press enter. You should see a little message in the console with the sentence you entered. …

Evan Brass

I write a lot of ECMAScript… enough to have plenty of mistakes to learn from.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store