greim

/*
 * Using `motel` to implement a vacancy observer.
 * This happens once at app startup time.
 */

const motel = require('motel');
const vacancies = motel();

// start observing the DOM for vacancies
vacancies.connect(document.getElementById('#app'));

greim

Vacancy Observers

Vacancy observers are a data-fetching strategy for functional UI frameworks which doesn't rely on side effects. Instead, components are written as pure functions, indicating their remote data dependencies directly in their output using vacancies.

An observer may then detect the presence of those vacancies and take appropriate action, depending on the environment. For example:

• In an Elm app: the observer might be a MutationObserver—running independently in JavaScript—which listens for vacancies in the DOM, makes HTTP requests, and feeds the results into Elm over a port.
• In a React+Redux app: similar to above, the observer might be a MutationObserver which dispatches actions to Redux.
• In a server-side renderer: The observer might be a post-processor which analyzes the HTML output to detect vacancies, fetch them, and use that data to either re-render the output, or http2-push to the client.
• In a unit test runner: the observer would simply be the caller of the co

greim

How HTML Parsing Works

An HTML parser scans through an input string, starting at the beginning:

<div>hello<br>world</div>
│
└─ scanning begins here