Comparing various async patterns for a single demo
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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
asynquence fixing CDN URLs Jun 26, 2017
callback initial commit Oct 13, 2015
csp fixing CDN URLs Jun 26, 2017
promise-generator fixing CDN URLs Jun 26, 2017
promise fixing CDN URLs Jun 26, 2017
reactive-sequence Fix bug with adding items from side lists into the central list in re… Oct 22, 2017
thunk initial commit Oct 13, 2015
.gitignore initial commit Oct 13, 2015
.npmignore initial commit Oct 13, 2015
README.md adding better links to README Oct 14, 2015
package.json adding better links to README Oct 14, 2015
screen.png initial commit Oct 13, 2015

README.md

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)

Why

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.

License

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

http://getify.mit-license.org/