Comparing various async patterns for a single demo
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
getify Merge pull request #5 from life777/master
Made links clickable in reactive-sequence example
Latest commit f457d82 Feb 20, 2018

A Tale Of Three Lists

A sorta-sophisticated but still silly async events processing demo.

The demo simulates a feed of data that's sampled at different speeds, filtered into two lists (red and blue). You can select an item from either list and it's added to your saved list in the middle. Selected duplicates are marked off and then removed. Also, both feeds can be paused.

screenshot of demo

RUN 'CALLBACKS' DEMO (see more below)


The goal of this project is to sort of be the TodoMVC of async programming. I've seeded the repo with 7 implementations of the same demo, each using a different async pattern.

The code is organized in such a way that there's as much overlap between the implementations as possible. This is intentional. It helps reduce the noise of difference, so that you can focus on only the important things: the different strengths and weaknesses of each async pattern.

I invite all visitors to study the code and do side-by-side comparisons between the different implementations, to see those pros/cons for yourself.

I will also be adding more detailed write-ups of these differences over time, as well as new implementations if there are significant (not just trivial syntax sugar) differences to be illustrated. Suggestions are welcomed!

Compared Patterns

The following patterns are currently implemented for inspection/comparison:

Not A UI/Framework Bikeshed

I use simple jQuery and CSS for the UI of this demo. I don't want that to change. This project is not about comparing different frameworks' approaches to managing and rendering the UI.

That'd be a fun project for you to fork off this one, and compare Angular, React, Backbone, Ember, etc for the UI processing of the lists, kinda like TodoMVC does.

But this project is about exploring the relative merits and shortcomings of each async pattern approach. Any other differences would be unnecessary distracting noise.

To Run Demos Locally

  1. Install from npm with npm install a-tale-of-three-lists. Verify that the node_modules dependencies directory is installed in the root directory.

  2. -OR- Clone this repo, then run npm install from inside the main root directory to install the dependencies.

  3. Now, open any one of the index.html files using the file:// protocol.

  4. -OR- You can run the demos using a local file server (like python or node). Make sure to start the server in each demo's directory, respectively.


The code and all the documentation are released under the MIT license.