Skip to main content
SimilarExport ZIP
100%

requirebin sketch

✓ Published0🌍 Public
HHypercubed
Last edited Jun 3, 2016
Created on Jun 3, 2016

This example demonstrates a simple event-driven messaging system using the Barracks library. It shows how multiple listeners can respond to the same named event, with two separate handlers writing personalized greetings to the document. The code creates a dispatcher instance, registers two 'hello' listeners, and triggers the event with the name 'Loki'. The visualization highlights the sequence of output generated by both listeners when the event fires.

AI-generated description

Similar vizzes

Loading thumbnail…

Hello Reactor

This example demonstrates a minimal event-driven communication system built with JavaScript. It shows how two listeners attached to the same `'big bang'` event respond to a dispatched payload, with one listener logging a fixed message and the other printing the passed arguments. The code defines a custom `Reactor` class and an `Event` class, showcasing manual event registration, callback storage, and dispatch logic. The implementation relies on JavaScript's array `forEach` method to invoke all registered callbacks with the spread `...eventArgs` syntax. The data originates from a hardcoded dispatch call passing the values `135`, `'test'`, and `[1, 2, 3]`.

MMAKIO135
61% match
Loading thumbnail…

requirebin sketch

This example demonstrates a minimal client-side application that loads a data package from a remote URL using the `chi-datapackage` library, then manages the resulting state through the `barracks` event-based architecture. The code shows a unidirectional data flow where a `loadPackage` effect triggers a `replacePackage` reducer to update the application state. It also logs actions and state changes for debugging. The visualization itself is not rendered in the provided files; instead, the focus is on the data-loading and state-management pipeline, with the package.json specifying the required dependencies for this workflow.

HHypercubed
61% match
Loading thumbnail…

requirebin sketch

This example demonstrates reactive state management in a React application by loading and observing a data package from a GitHub-hosted JSON file. It uses MobX to create an observable `package` property on a store, with an `observe` listener that logs changes to the console whenever the package is updated. The code loads dataset metadata via the `chi-datapackage` library, triggering the observer when the asynchronous load completes. The sketch shows how MobX tracks and reacts to state changes in a minimal data-loading workflow.

HHypercubed
59% match
Loading thumbnail…

requirebin sketch

This example demonstrates how to load and manage a data package using the `chi-datapackage` library within a Vue application. It shows the flow of loading a remote dataset, dispatching actions, and updating application state through the `barracks` framework's model, effects, and reducers. The visualization is driven by `index.js`, which uses `dp.load` to fetch a JSON data package from GitHub, then triggers a `replacePackage` reducer to update the state. The code also logs state changes and actions via lifecycle hooks, illustrating a functional reactive pattern for handling data-driven charts.

HHypercubed
59% match
Loading thumbnail…

requirebin sketch

This example demonstrates a data package loader built with the barracks and chi-datapackage libraries in a Vue application. It loads and normalizes a datapackage from a GitHub URL, fetches its resources, and updates the application state asynchronously using a unidirectional data flow with reducers and effects. The visualization showcases state management for datapackage resources, with actions logging load progress and state changes to the console.

HHypercubed
58% match
Loading thumbnail…

requirebin sketch

This example uses the typed-function library to define a recursive Fibonacci sequence generator, mapping numeric types `zero`, `one`, and `any` to specific function signatures. The code creates a `fib` function that dispatches based on argument type, then writes the first 20 Fibonacci numbers into the page body via `document.body.innerHTML`. The visualization is minimal, displaying the computed sequence as plain text. The sketch demonstrates typed function dispatch and recursion, with the source bundled through RequireBin and rendered directly in the browser.

HHypercubed
56% match
Loading thumbnail…

requirebin sketch

This example uses the `typed-function` library to define a polymorphic `fib` function with custom types for zero and one, then logs the first 20 Fibonacci numbers. The code adds type tests for exact numeric values and dispatches based on argument type, demonstrating dynamic function overloading in JavaScript. The output is generated by the Node.js `console.log` call, producing the sequence in the browser console via RequireBin.

HHypercubed
56% match
Loading thumbnail…

requirebin sketch

This example uses the `typed-function` library to define a polymorphic `fib` function with custom types for zero and one, then logs the first 20 Fibonacci numbers. The code adds type tests for exact numeric values and dispatches based on argument type, demonstrating dynamic function overloading in JavaScript. The output is generated by the Node.js `console.log` call, producing the sequence in the browser console via RequireBin.

HHypercubed
56% match