Reactivity With RxJS

Part 1: Everything In One Place

Head over here to see the code.

It’s a simple button and list of planets that gets randomly generated thanks to this NPM library.

All of the HTML and JS is on one page to make it easier to grok in an editor, and this is the core functionality:

A random number generator for the # of planets in the list:

const randomNumber = d3.randomInt(4, 13)

The function we call when the button is pressed:

function updateList(list, planets) {
    const items = list.selectAll('li')
    .data(planets);
    
    items.enter().append('li')
    .text(d => d)
    .merge(items)
    .text(d => d);
    
    items.exit().remove();
}


const list = d3.select('#the-list');

The first reactive component: a button that, when pressed, will update a javascript string array with new names:

// setup a reaactive button
const button = document.querySelector('#the-button');
const buttonClickObservable = fromEvent(button, 'click');
buttonClickObservable.subscribe(event => {
    const newPlanetNames = generate_celestial_monikers(randomNumber())
    planetNamesSubject.next(newPlanetNames);
});

The second reactive component: an actual reactive data source, just like you’d make in Observable, that will update the list of planets once it receives new data:

const planetNamesSubject = new BehaviorSubject([]);
const planetNamesObservable = planetNamesSubject.asObservable();
planetNamesObservable.subscribe(planets => {
    updateList(list, planets);
});

The bit that kickstarts the warping:

const newPlanetNames = generate_celestial_monikers(randomNumber())
planetNamesSubject.next(newPlanetNames)

For this part of the mission, just get it running. You can use one of the servers we’ve mentioned in a previous Drop, just deploy to GH Pages, or use your usual.

Part 2: Getting Organized

The second part of your mission is to not be a monster and break apart the JS code from the index.html into a structure like this:

├── index.html
├── list.js
├── main.js
└── styles.css

That means figuring out what goes into main.js, what should go in list.js, and adding a script call out to main.js from index.html.

I highly suggest attempting this on your own, first. But there’s a pre-built solution for you, too.

Feel empowered to stop here and start playing with your own ideas. The next bit has some D3 in it that you aren’t writing, but you have to look at, and that causes some cognitive overload in some folks.

Part 3: Adding Another Component

This builds on part two, so “everything in a separate, organized files”.

See how it works live.

You’re going to add an actual solar system plot as you jump from system to system. All the code for that is in planets.js which I’ve kept a copy of outside the finished solution directory.

You need to figure out where to put these puzzle pieces:

“What is this fancy new import?”

import { initializeSystem, updateOrbits } from "./planets.js"

“I wonder what this is for…”

const width = 400, height = 400
const margin = { top: 50, right: 80, bottom: 50, left: 50 }

“What is this magicks?”

const system = d3.select("#the-orbits")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr(
        "transform", `translate(${width / 2 + margin.left}, ${height / 2 + margin.top})`
    );

“You are not helping, hrbrmstr.”

initializeSystem(system)

“I know something of your’s I’d like to disable, rn, hrbrmstr…”

button.disabled = true;

“Sure, why not?”

updateOrbits(system, planets, button);

“FINALLY A CORNER PIECE! I know where this goes!”

<svg id="the-orbits"></svg>

FIN

Apologies, once more, for making you bounce around the internets, but hopefully it shows how basic reactivity can be usfeul, and that it’s straightforward to add components that enhance the reactive interactivity, even in a simple app. ☮️