The Internet is asynchronous, people are asynchronous, the universe is asynchronous. They are now and they always will be. Writing applications which deal correctly with asynchronous data is difficult. Or at least it was. Microsoft open sourced ReactiveX in 2010 to make what used to be some of the hairiest kinds of coding almost easy.
The project was so well received that it has been ported to nearly every major programming language. Versions of ReactiveX exists for .NET, JavaScript, Java, Scala, Clojure, C++, Ruby, Python, Groovy, JRuby, Kotlin, and Swift. The project is open source and community maintain with corporate backing from the likes of Microsoft and Netflix.
Microsoft created the ReactiveX, then called reactive extensions, from the burnt out remains of Project Volta. Project Volta's goal was to extend .NET's to run both on the server and in the browser. A compiler would decide which parts were best to put where. It essentially was the Meteor framework in 2007.
In this talk we will take a deep look at ReactiveX. We will use code samples to show how things are done before and after ReactiveX. The code will be in C# and JavaScript. We will see how ReactiveX makes our lives as developers easier and our code more reactive.
4. Troy Miles
Troy Miles aka the
RocknCoder
Over 36 years of
programming experience
Speaker and author
Author of jQuery Essentials
rockncoder@gmail.com
@therockncoder
5. Upcoming talks
Angular 2 Weekend Workshop - Los Angeles
May 14th & 15th
Build a game in 60 minutes - Irvine
May 24th
SoCal Code Camp - San Diego
June 25th & 26th
Cross Platform Game Programming - Irvine
July 9th & 10th
7. The life and death and
rebirth of project Volta
Volta was an experimental .NET based toolset for
building multi-tier web apps
2007 - Microsoft released it as a tech preview
2008 - the project was cancelled
2010 - the Reactive Extension were initial released
Rx was part of project Volta
10. More definitions
The Reactive Extensions (Rx) is a library for composing
asynchronous and event-based programs using
observable sequences and LINQ-style query operators
An API for asynchronous stream programming
18. Time is money
Learning any new technology takes time
Your time is valuable
Is the dev community excited about it?
Will it help me do my current job?
Will it help me get my next job?
21. ThoughtWorks Tech Radar
The reactive architecture keeps spreading across
platforms and paradigms simply because it solves a
common problem in an elegant way, hiding inevitable
application plumbing in a nice encapsulation.
Recommended for adoption July 2014
https://www.thoughtworks.com/radar/languages-and-
frameworks/reactive-extensions-across-languages
25. The Observer
Rx works with collections that implement observer
design pattern
This is the same observer described in the Gang of
Four design pattern book
In C# it implements IQueryable which is an extension to
IEnumerable used by LINQ
26. Collections, collections
In Rx, you begin with a collection and end with a
collection
Rx methods, also called operators, always return a
new collection and never mutate the passed collection
If you’ve ever have been exposed to a functional
language like LISP, Scheme, Clojure or other this kind
of pattern should be familiar
28. Install Rx via NuGet
Rx-Main: The main package, often all you need
Includes
Rx-Core
Rx-Linq
Rx-Interfaces
Rx-PlatformServices
29. Other packages
Rx-Providers: For creating expression trees
Rx-Xaml: UI Synchronization classes for XAML
Rx-Remoting: Adds extensions for .NET Remoting
Rx-WPF/RxWindowsStore
Rx-Test: For unit testing
Rx-Alias: Provides alias for some query operators
33. Uses Wikipedia’s search service
Normally written using callbacks or promises
Written using ES2015, so it looks a bit weird
34. (function () {
'use strict';
var $input = $('#input'),
$results = $('#results');
// this function returns a promise which is important
function searchWikipedia(term) {
// let's see what we are sending
console.info(term);
// use jquery to ajax some data to wikipedia
return $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
}
35. // Only get the value from each key up
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.map(e => e.target.value)
.filter(text => text.length > 3);
// Now throttle/debounce the input for 500ms
var throttled = keyups.throttle(500);
// Now get only distinct values, so we eliminate others
var distinct = throttled.distinctUntilChanged();
distinct
.flatMapLatest(searchWikipedia)
.subscribe(
data => {
var res = data[1];
// clear the markup
$results.empty();
// emit an <li> with each result,
$.each(res, (_, value) => $('<li>' + value + '</li>').appendTo($results));
},
error => {
// clear the markup
$results.empty();
$('<li>Error: ' + error + '</li>').appendTo($results);
});
}());
37. Summary
Rx allows apps to easily work with asynchronous
streaming data
Rx requires a bit of a cognitive leap
Resulting code is simpler and more logical