This repository has been archived by the owner on Apr 20, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
528e7e4
commit 0feaae9
Showing
5 changed files
with
100 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # RxJS Community Examples # | ||
|
|
||
| Below are samples using RxJS as provided by the community. | ||
|
|
||
| - [React](http://facebook.github.io/react/) | ||
| - [Rx-React](https://github.com/fdecampredon/rx-react) | ||
| - [RxReact](https://github.com/AlexMost/RxReact) | ||
| - [cycle-react](https://github.com/pH200/cycle-react) | ||
| - [React RxJS Autocomplete](https://github.com/eliseumds/react-autocomplete) | ||
| - [React RxJS TODO MVC](https://github.com/fdecampredon/react-rxjs-todomvc) | ||
| - [Rx TODO MVC](https://github.com/footballradar/rx-todomvc) | ||
| - [React RxJS Router](https://github.com/kmcclosk/reactjs-rxjs-example) | ||
| - [React + RxJS + Angular 2.0 di.js TODO MVC](https://github.com/joelhooks/react-rxjs-angular-di-todomvc) | ||
| - [React + RxJS Reactive Cube](https://github.com/hugobessaa/cubactive) | ||
| - [Real-Time with React + RxJS + Meteor](https://medium.com/@bobiblazeski/functional-reactive-interfaces-e8de034de6bd) | ||
| - [React + RxJS Flow](https://github.com/justinwoo/react-rxjs-flow) | ||
| - [Reactive Widgets](https://github.com/zxbodya/reactive-widgets) | ||
| - [React RxJS Infinite Scroll](https://github.com/justinwoo/react-rxjs-scroll) | ||
| - [React RxJS Flux](https://github.com/xgrommx/react-rx-flux) | ||
| - [Real-Time TODOs using RethinkDB, React, RxJS and Socket.io](https://github.com/bobiblazeski/rio) | ||
|
|
||
| - [Flux](http://facebook.github.io/flux/) | ||
| - [Rx-Flux](https://github.com/fdecampredon/rx-flux) | ||
| - [ReactiveFlux](https://github.com/codesuki/reactive-flux) | ||
| - [Thundercats.js](https://github.com/r3dm/thundercats) | ||
| - [Flurx](https://github.com/cell303/flurx) | ||
| - [RR](https://github.com/winsonwq/RR) | ||
|
|
||
| - [Ember](http://emberjs.com/) | ||
| - [RxEmber](https://github.com/blesh/RxEmber) | ||
|
|
||
| - [AngularJS](http://angularjs.org) | ||
| - [Ninya.io - Angular + RxJS + rx.angular.js](https://github.com/ninya-io/ninya.io) - [Site](http://stackwho.herokuapp.com/) | ||
| - [The Car Game](https://github.com/mikkark/TheCarGame) - [Site](https://thecargame.herokuapp.com/) - [Blog Post](https://allthingsarchitectural.wordpress.com/2014/11/24/game-programming-with-angular-rxjs-and-node-js/) | ||
|
|
||
| - [Cycle](https://github.com/staltz/cycle) | ||
| - [Cycle TODO MVC](https://github.com/staltz/todomvc-cycle) | ||
|
|
||
| - [WebRx](https://github.com/oliverw/webrx) | ||
| - [Zorium](https://zorium.org/) | ||
|
|
||
| - Everything else | ||
| - [RxJS Examples from Cmdv](https://github.com/Cmdv/RxJS-Examples) | ||
| - [RxVision](http://jaredly.github.io/rxvision/) | ||
| - [Mario Elm Example](http://fudini.github.io/rx/mario.html) | ||
| - [Firebase + RxJS](http://blog.cryptoguru.com/2014/11/frp-using-rxjs-and-firebase.html) | ||
| - [Reactive Trader](https://github.com/AdaptiveConsulting/ReactiveTrader) - [Site](https://reactivetrader.azurewebsites.net/) | ||
|
|
||
| - [NPM Dependencies](https://www.npmjs.com/browse/depended/rx) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| # RxJS Presentations # | ||
|
|
||
| The following are presentations about RxJS | ||
|
|
||
| - Don't Cross the Streams - Cascadia.js 2012 [slides/demos](http://www.slideshare.net/mattpodwysocki/cascadiajs-dont-cross-the-streams) | [video](http://www.youtube.com/watch?v=FqBq4uoiG0M) | ||
| - Curing Your Asynchronous Blues - Strange Loop 2013 [slides/demos](https://github.com/Reactive-Extensions/StrangeLoop2013) | [video](http://www.infoq.com/presentations/rx-event-processing) | ||
| - Streaming and event-based programming using FRP and RxJS - FutureJS 2014 [slides/demos](https://github.com/Reactive-Extensions/FutureJS) | [video](https://www.youtube.com/watch?v=zlERo_JMGCw) | ||
| - [Tyrannosaurus Rx](http://yobriefca.se/presentations/tyrannosaurus-rx.pdf) - [James Hughes](http://twitter.com/kouphax) | ||
| - Taming Asynchronous Workflows with Functional Reactive Programming - EuroClojure - [Leonardo Borges](https://twitter.com/leonardo_borges) [slides](http://www.slideshare.net/borgesleonardo/functional-reactive-programming-compositional-event-systems) | [video](http://www.slideshare.net/borgesleonardo/functional-reactive-programming-compositional-event-systems) | ||
| - Reactive All the Things - ng-conf 2015 - [Martin Gontovnikas](https://twitter.com/mgonto/) & [Ben Lesh](https://twitter.com/BenLesh) | ||
| - [Slides](http://mgonto.github.io/reactive-all-the-things-talk/#1) | ||
| - [Video](https://www.youtube.com/watch?v=zbBVG8bOoXk&feature=youtu.be&app=desktop) | ||
| - The Reactive Loop - Functional JS London 2015 | ||
| - [Slides](http://slides.com/theefer/reactive-loop-funjs#/) | ||
| - [Code](https://github.com/theefer/funjs-reactive-loop) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,3 @@ | ||
| # The Reactive Extensions for JavaScript (RxJS) Examples # | ||
|
|
||
| The Reactive Extensions for JavaScript have a number of examples that highlight the unique capabilities of the library. | ||
|
|
||
| ## Scenarios | ||
|
|
||
| ### Simple Data Binding ### | ||
|
|
||
| Using nothing more than `Rx.BehaviorSubject` objects, see how easy it is to accomplish Knockout.js style data-binding. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/simpledatabinding) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/rwr42/) | ||
|
|
||
| ### Autocomplete ### | ||
|
|
||
| Coordinate key up behavior with querying a web service to retrieve hints for queries. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/autocomplete) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/AL8Mj) | ||
|
|
||
| * * * | ||
|
|
||
| ### Canvas Paint ### | ||
|
|
||
| Paint on an HTML5 Canvas by coordinating mouse move with mouse down events until mouse up. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/canvaspaint) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/2EnC4) | ||
|
|
||
| * * * | ||
|
|
||
| ### Data Binding ### | ||
|
|
||
| Do data binding just like you would with [knockout.js](http://knockoutjs.com/). | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/blob/master/examples/databinding/) | ||
|
|
||
| * * * | ||
|
|
||
| ### Image Cropper ### | ||
|
|
||
| Create an image cropper which coordinates the corners of an image to crop. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/crop) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/gJtjx) | ||
|
|
||
| * * * | ||
|
|
||
| ### Drag and Drop ### | ||
|
|
||
| Implement drag and drop with ease of dragging an image around a page. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/dragndrop) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/pfCqq) | ||
|
|
||
| * * * | ||
|
|
||
| ### Konami Code ### | ||
|
|
||
| Implement the [Konami Code](http://en.wikipedia.org/wiki/Konami_Code) using the Reactive Extensions with a buffer to react to entering the following: | ||
|
|
||
| <p><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↑</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↑</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↓</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↓</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">←</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">→</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">←</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">→</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">B</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">A</kbd></p> | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/konamicode) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/2Ydym/) | ||
|
|
||
| * * * | ||
|
|
||
| ### Require.js Integration ### | ||
|
|
||
| Using [Require.js](http://requirejs.org) with the Reactive Extensions for JavaScript. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/requirejs) | ||
|
|
||
| * * * | ||
|
|
||
| ### Testing with Jasmine ### | ||
|
|
||
| Unit testing the Reactive Extensions operators using [Jasmine](http://pivotal.github.io/jasmine/). | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/testing/jasmine) | ||
|
|
||
| * * * | ||
|
|
||
| ### Testing with Mocha and Node.js ### | ||
|
|
||
| Unit testing the Reactive Extensions operators using [Mocha](http://mochajs.org/) with [Node.js](http://nodejs.org) | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/testing/nodejs) | ||
|
|
||
| * * * | ||
|
|
||
| ### Testing with QUnit ### | ||
|
|
||
| Unit testing the Reactive Extensions operators using QUnit. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/testing/qunit) | ||
|
|
||
| * * * | ||
|
|
||
| ### Time Flies Like an Arrow ### | ||
|
|
||
| This is an example showing `Time Flies Like An Arrow` which moves around based upon mouse movements. Each letter is delayed by its position multiplied by its index. | ||
|
|
||
| - [See the code](https://github.com/Reactive-Extensions/RxJS/tree/master/examples/timeflies) | ||
| - [Edit the code in JSFiddle](http://jsfiddle.net/mattpodwysocki/9EjSQ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # RxJS Videos # | ||
|
|
||
| Below are videos either of tutorials or of presentations about RxJS | ||
|
|
||
| ## Videos ## | ||
|
|
||
| - [Practical Rx with Matthew Podwysocki, Bart de Smet and Jafar Husain](http://channel9.msdn.com/posts/Bart-De-Smet-Jafar-Hussain-Matthew-Podwysocki-Pragmatic-Rx) | ||
| - [Netflix and RxJS](http://channel9.msdn.com/posts/Rx-and-Netflix) | ||
| - [Hello RxJS - Channel 9](http://channel9.msdn.com/Blogs/Charles/Introducing-RxJS-Reactive-Extensions-for-JavaScript) | ||
| - [MIX 2011](http://channel9.msdn.com/events/MIX/MIX11/HTM07) | ||
| - [RxJS Today and Tomorrow - Channel 9](http://channel9.msdn.com/Blogs/Charles/Matthew-Podwysocki-and-Bart-J-F-De-Smet-RxJS-Today-and-Tomorrow) | ||
| - [Reactive Extensions Videos on Channel 9](http://channel9.msdn.com/Tags/reactive+extensions) | ||
| - [Asynchronous JavaScript at Netflix - Netflix JavaScript Talks - Jafar Husain](https://www.youtube.com/watch?v=XRYN2xt11Ek) | ||
| - [Asynchronous JavaScript at Netflix - MountainWest JavaScript 2014 - Jafar Husain](https://www.youtube.com/watch?v=XE692Clb5LU) | ||
| - [Asynchronous JavaScript at Netflix - HTML5DevConf - Jafar Husain](https://www.youtube.com/watch?v=5uxSu-F5Kj0) | ||
| - [Adding Even More Fun to Functional Programming With RXJS - Ryan Anklam](https://www.youtube.com/watch?v=8EExNfm0gt4) | ||
| - [Reactive Angular - Devoxx France 2014 - Martin Gontovnikas](http://parleys.com/play/53677646e4b0593229b85841/chapter0/about) | ||
| - [Reactive Game Programming for the Discerning Hipster - JSConf 2014 - Bodil Stokke](https://www.youtube.com/watch?v=x8mmAu7ZR9Y) | ||
|
|
||
| ## Podcasts ## | ||
|
|
||
| - [.NET Rocks #907](http://dotnetrocks.com/default.aspx?showNum=907) | ||
| - [JavaScript Jabber #83](http://javascriptjabber.com/083-jsj-frp-and-rxjs-with-matthew-podwysocki/) |
Oops, something went wrong.