Skip to main content
100%

The introduction to Reactive Programming you've been missing

✓ Published0🌍 Public
Aallyraza
Last edited Feb 8, 2016
Created on Jun 13, 2016

This example demonstrates the core concepts of reactive programming through asynchronous data streams, using a click-event stream on a button as the central illustration. The visualization walks through how streams emit values, errors, and completion signals over time, with diagrams showing event sequences and filtering operations. The code is written in JavaScript with the RxJS library, including APIs like `Rx.Observable.fromEvent` for capturing button clicks and methods such as `map`, `filter`, and `merge` to combine and transform stream data. The accompanying markdown references the original tutorial by André Staltz and includes inline images that depict stream behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

The introduction to Reactive Programming you've been missing

This example illustrates the core concepts of reactive programming using asynchronous data streams, drawing from the original tutorial by André Staltz. The visualization, built with React, shows how streams can be created from user inputs and combined using functional operators like map and filter. The code references RxJS observables to demonstrate the flow of data events over time, with an interactive diagram that maps click events and other stream transformations. The rendering uses React components to display the stream diagrams, highlighting how multiple streams can be merged and filtered to produce new data sequences.

YYonet
90% match
Loading thumbnail…

The Missing Introduction to Angular 2 and Modern Design Patterns

The gist demonstrates Angular’s shift to reactive programming and unidirectional data flow, contrasting it with AngularJS’s two-way binding. It presents a curated markdown guide with external links and code snippets, using RxJS observables for asynchronous streams and Promises for HTTP conversions. The example renders the Angular component tree and state management patterns in a static document, sourced from a gist by ackuser, with no interactive visualization. It relies on plain React for the view layer, though no specific d3 or canvas APIs appear.

Aackuser
67% match
Loading thumbnail…

Gist 7e25cbcd7c60d58ca2949795d215284a

This example illustrates four distinct approaches to reacting to a state change in an Angular application, using the RxJS `filter` and `take` operators within a `store` service. It shows how to implement a save action by observing `saveButtonState`, then demonstrates wrapping the same observable logic in a Promise for async handling, and finally presents simpler alternatives using a callback and an event emitter. The code relies on `ButtonState` enums and a `saveDone` event emitter, with no external visualization libraries or data sources involved.

HHypercubed
63% match
Loading thumbnail…

Gist 477b1e1737cfc76ca3b7fb09d13c1c54

This example demonstrates a reactive application architecture following an Actions → State → UI flow, where user interactions trigger state changes that are rendered as a virtual DOM. It uses the iBlokz UI boilerplate with hyperscript helpers and snabbdom for efficient patching, while state management relies on RxJS-style observable streams with a `scan` reducer. The code shows a counter interface with increment/decrement buttons, illustrating how action functions return immutable state reducers and how UI components receive state and actions as arguments.

Aalex-milanov
62% match
Loading thumbnail…

ReactSimple

This example demonstrates a simple interactive web app using React to track click counts on a page. It shows two buttons and a text block that display the number of times they have been clicked, with the app state managed through React’s `useState` and event handlers like `onClick` and `onContextMenu`. The code uses React 16.9 and ReactDOM to render SVG elements, and it includes a reference to a D3-loaded CSV dataset from a GitHub gist, though the dataset is not visualized in the current interaction.

SShane Carey
61% match
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
60% match
Loading thumbnail…

A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series

This example demonstrates the core concepts of @ngrx/store, a state management library for Angular built on RxJS. It explains the roles of reducers, actions, and the single application store, showing how immutable state flows through a centralized dispatcher and BehaviorSubject. The code highlights APIs such as `scan` for aggregating state, `map` for slicing state, `distinctUntilChanged` for managing updates, and `combineLatest` with `withLatestFrom` for projecting state into views. The accompanying walkthrough applies these patterns to a sample application, including middleware, meta-reducers, and state rehydration on bootstrap.

Aackuser
60% match
Loading thumbnail…

ButtonClick

This example demonstrates a simple interactive button that triggers a JavaScript function when clicked. The page displays a large “Click me” button centered on a white background, and clicking it logs “Hello JavaScript!” to the browser’s console. The implementation uses plain HTML and CSS for layout and styling, with the click handler defined in `index.js` and loaded via a bundled script. React is listed as the framework, though the visible code relies directly on native DOM event handling rather than React components.

XXin Li
60% match