Intro to Reactive Programming and RxJava: How to React 😮😱🤪

Intro to Reactive Programming and RxJava:
How to React
Jordan Jozwiak

View Slide

Reactive
Programming
Allows us to manipulate a
stream of data with functions. 

View Slide

Reactive
Programming
Allows us to manipulate a
stream of data with functions. 
(asynchronously)

View Slide

Reactive
Programming

View Slide

Reactive
Programming
1. Data streams 

View Slide

Reactive
Programming
1. Data streams 
2. Functional Programming 

View Slide

Reactive
Programming
1. Data streams 
3. Asynchronous observers

View Slide

applications
! Retrieving data from a database and then filtering out some results
based on user settings.

View Slide

applications
2 3 7

View Slide

applications
⏳

View Slide

applications
a, b, c -> a, c

View Slide

applications
! Retrieve data from a database and then filtering out some results
! Render a UI that combines data from multiple data sources
! Create a real-time model for stock prices
! Show auto-complete search results to a user
! Log data from a temperature, wind, or pressure sensor

View Slide

Who actually uses this?

View Slide

! Very popular in the Android community

View Slide

! Some usage at Google for database requests

View Slide

! Some usage at Google for database requests
! Microsoft, Netflix, GitHub, SoundCloud, and more (see reactivex.io)

View Slide

Reactive Programming
Theory

View Slide

Theory
Implementation
Reactive Extensions (reactivex.io)
(libraries to make normal languages reactive)

View Slide

Theory
Implementation
Reactive Extensions (reactivex.io)
(libraries to make normal languages reactive)
RxJava RxSwift RxJS …

View Slide

View Slide

4 2 1 7 6

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)
4

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)
4 2

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)
4 2 6

View Slide

4 2 1 7 6
SUBJECT
subject - the stream that emits data
4 2 6

View Slide

4 2 6
OBSERVER
observer - “subscribes to” or “consumes” data. There
can be multiple observers for a single subject.
4 2 1 7 6

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)
4 2 6
SUBJECT
OBSERVER

View Slide

4 2 1 7 6
filter(x -> (x % 2) == 0)
4 2 6
SUBJECT
OBSERVER
4 2 6
SERVER 2

View Slide

4 2 1 7 6
filter / map / count /  
max / min / delay / ...
SUBJECT
OBSERVER

View Slide

4 2 1 7 6
some function that takes ⏳
SUBJECT
OBSERVER

View Slide

a d z a h
SUBJECT
OBSERVER

View Slide

SUBJECT
OBSERVER

View Slide

? ? ? ? ?
? ? ? ?
SUBJECT
OBSERVER

View Slide

SUBJECT
OBSERVER
another function

View Slide

? ? ? ? ?
? ? ? ?
SUBJECT
OBSERVER
another function
? ? ? ? ?

View Slide

What creates the subject data stream?

View Slide

! These streams are called Observables in RxJava

View Slide

! Observable.create(), fromIterable(), etc.

View Slide

! Retrofitting existing object-oriented design into Observable data
streams can be messy

View Slide

! Many, many open-source projects that wrap other implementations into
an Rx package (an easy way to get ⭐ ⭐ ⭐ on GitHub)

View Slide

! Many, many open-source projects that wrap other implementations into
an Rx package (an easy way to get ⭐ ⭐ ⭐ on GitHub)
! github.com/zsoltk/RxAndroidLibs - 500 stars for a list of libraries

View Slide

introduction
background
examples
live demo
wrap-up

View Slide

What languages
are you familiar with?

View Slide

~80 %
Percent of the most popular languages are imperative  
or multi-paradigmatic languages
Source: StackOverflow Developer Survey 2018

View Slide

What's a language paradigm?

View Slide

! Computer languages resemble linguistic language

View Slide

○ Grammatical structures

View Slide

○ Tenses: past, present, future

View Slide

○ Vocabulary

View Slide

○ Vocabulary
○ Dialects

View Slide

○ Vocabulary
○ Dialects
! Languages are multi-faceted and evolve over time. They are often multi-
paradigmatic languages.

View Slide

○ Vocabulary
○ Dialects
! Examples

View Slide

○ Vocabulary
○ Dialects
! Examples
○ Imperative (what you’re probably used to)

View Slide

○ Vocabulary
○ Dialects
! Examples
○ Reactive Programming (what we’re talking about today)

View Slide

○ Vocabulary
○ Dialects
! Examples
○ Reactive Programming (what we’re talking about today)
○ Functional Programming (used in Reactive Programming)

View Slide

Imperative vs. Functional

View Slide

Imperative Programming

View Slide

! Describes how the program
operates

View Slide

operates
! Uses statements to change
state of the program

View Slide

operates
! Conditional statements, loops,
inheritance

View Slide

operates
inheritance
! Easier initial learning curve

View Slide

operates
inheritance
! Examples: C, PHP, Java

View Slide

operates
inheritance
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
Functional Programming
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
! Describes what the program
should accomplish
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
should accomplish
! Ideally stateless
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
should accomplish
! Ideally stateless
! Evaluate functions and create
expressions instead of
statements
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
should accomplish
! Ideally stateless
statements
! More difficult conceptually
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
should accomplish
! Ideally stateless
statements
! Examples: Scala, Haskell
if (value % 2 == 0) {
// do something
}

View Slide

operates
inheritance
should accomplish
! Ideally stateless
statements
! Examples: Scala, Haskell
if (value % 2 == 0) {
// do something
}
boolean filter(int value) {
return value % 2 == 0;
}

View Slide

History of Imperative Programming
! Old computers utilized vacuum tubes and very limited memory
! Programs written as step-by-step instructions
! FORTRAN introduced in 1954. Compiled, variables, complex
expressions.
! 60s and 70s: COBOL, BASIC, C
! Object-oriented code grew in popularity in the 1980s. Smalltalk. C++
! 90s: Perl, Python, Javascript, Ruby, Java

View Slide

History of Functional Programming
! Based on lambda calculus (Church 1936)
○ Study of computation with functions
! Lisp was developed by IBM in the 1950s
○ LISP = LISt Processor
○ Still in use today
○ Only a year younger than FORTRAN
! John Backus gave a 1978 Turing Award lecture on why imperative programming is
“bad” and functional programming is “good”
! 80s-00s - Object-Oriented programming dominated based on principles like
encapsulation. Academics and theoreticians care about Functional Programming.
! 2010s - JavaScript made passing around functions cool again

View Slide

Reactive Programming 
1. Data streams 
 
2. Functional programming 
 
3. Asynchronous observers 

View Slide

A flow of data objects from one
function to the next
1. Data streams 
 
 

View Slide

1. Data streams 
 
 

View Slide

! Functions are meant to be pure
1. Data streams 
 
 

View Slide

! All functions have an input and
output data types
1. Data streams 
 
 

View Slide

output data types
! No external state is modified
(no side-effects)
1. Data streams 
 
 

View Slide

output data types
! No external state is modified
(no side-effects)
Example: 
add(x, y) -> return x + y
1. Data streams 
 
 

View Slide

1. Data streams 
 
 

View Slide

Uses the Observer pattern with
Subject data sources that notify
Observers
1. Data streams 
 
 

View Slide

Uses the Observer pattern with
Subject data sources that notify
Observers
Errors propagated through the flow
of data
1. Data streams 
 
 

View Slide

Reactive Programming is NOT

View Slide

Reactive Programming is NOT
! It's own language
! React, ReactJs, ReactNative

View Slide

RxJava

View Slide

RxJava
! The Java library for the Reactive Extensions specification
○ This specification is applied to other languages: RxJs, RxSwift,
etc. - reactivex.io/languages

View Slide

RxJava
! Helpful due to complicated stream and asynchronous apis

View Slide

RxJava
! Brings functional design to an object-oriented language

View Slide

RxJava
! Brings functional design to an object-oriented language
! Very helpful for mobile development, which often involves
asynchronously requesting data from a server, transforming it, and
displaying it in the UI

View Slide

introduction
background
examples
live demo
wrap-up

View Slide

... to subscribe to data
Imperative
List data =  
new DataSource().getData();
for (Integer value : data) {
System.out.println(value);
}
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Reactive
new DataSource().getDataStream()
.subscribe(new Consumer() {
@Override
public void accept(Integer value) {
}
});
Imperative
List data =  
}
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Imperative
List data =  
}
Reactive
@Override
}
});
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Reactive
@Override
}
});
Imperative
List data =  
}
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Reactive
.subscribe( 
value -> System.out.println(value) 
);
Imperative
List data =  
}
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Reactive
.subscribe(
value -> System.out.println(value)
);
Imperative
List data =  
}
Output: 4, 2, 1, 7, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

Reactive
.subscribe(
value -> updateUI(value)
);
Imperative
List data =  
updateUI(value);
}

View Slide

Reactive
.subscribe(
value -> saveToDatabase(value)
);
Imperative
List data =  
saveToDatabase(value);
}

View Slide

... to subscribe to data changes

View Slide

Imperative
ScheduledExecutorService scheduler = // initialize
Runnable runner = new Runnable() {
public void run() {
List data = new DataSource().getData();
}
}
};
ScheduledFuture> future = // initialize
scheduler.schedule(new Runnable() {
public void run() {
future.cancel(/* mayInterruptIfRunning */ true);
}
}, /* delay */ 0, TimeUnit.SECONDS);

View Slide

Imperative
public void run() {
}
}
};
public void run() {
}
???

View Slide

Imperative
public void run() {
}
}
};
public void run() {
}
Reactive
.subscribe(
value -> System.out.println(value)
);

View Slide

... to filter our data

View Slide

Imperative
List data =  
if (value % 2 == 0) {
}
}
Output: 4, 2, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

http://reactivex.io/documentation/operators/filter

View Slide

Reactive
.filter(value -> value % 2 == 0)
.subscribe( 
result -> System.out.println(result) 
);
Imperative
List data =  
if (value % 2 == 0) {
}
}
Output: 4, 2, 6, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

… to map our data
Output: 8, 4, 2, 14, 12, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

… to map our data
Imperative
List data =
int result = value * 2;
System.out.println(result);
}
Output: 8, 4, 2, 14, 12, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

... to map our data
Imperative
List data =
}
Output: 8, 4, 2, 14, 12, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

... to map our data
http://reactivex.io/documentation/operators/map

View Slide

... to map our data
Reactive
.map(value -> value * 2)
.subscribe(
result -> System.out.println(result)
);
Imperative
List data =
}
Output: 8, 4, 2, 14, 12, ...
Data: 4, 2, 1, 7, 6, ...

View Slide

... to group our data

View Slide

List data =
Map> result =
new HashMap<>();
String evenKey = "EVEN";
String oddKey = "ODD";
String key;
if (value % 2 == 0) {
key = evenKey;
} else {
key = oddKey;
}
result.putIfAbsent(
key,
new ArrayList<>());
result.get(key).add(datum);
}
Output: {EVEN=[4, 2, 6], ODD=[1, 7]}
Data: 4, 2, 1, 7, 6

View Slide

http://reactivex.io/documentation/operators/groupby

View Slide

.groupBy(
value -> (value % 2) == 0 ? "EVEN" : "ODD"
)
.collectInto(
// put our groups into a hashmap
// this is actually still a little messy
)
.subscribe(
resultMap -> System.out.println(resultMap)
);
Output: {EVEN=[4, 2, 6], ODD=[1, 7]}
Data: 4, 2, 1, 7, 6

View Slide

.groupBy(
value -> (value % 2) == 0 ? "EVEN" : "ODD"
)
.collectInto(
// put our groups into a hashmap
// this is actually still a little messy
)
.subscribe(
resultMap -> System.out.println(resultMap)
);
List data =
Map> result =
new HashMap<>();
String evenKey = "EVEN";
String oddKey = "ODD";
String key;
if (value % 2 == 0) {
key = evenKey;
} else {
key = oddKey;
}
result.putIfAbsent(
key,
new ArrayList<>());
result.get(key).add(datum);
}
Output: {EVEN=[4, 2, 6], ODD=[1, 7]}
Data: 4, 2, 1, 7, 6

View Slide

So many more operators
! Transforming
! Buffer
! Scan
! Filtering
! Debounce
! Distinct
! First
! Last
! Take
! Min
! Combining
! Join
! Merge
! Zip
! Math
! Average
! Concat
! Max

View Slide

Some operations can get complicated
http://reactivex.io/documentation/operators/join

View Slide

introduction
background
examples
live demo
wrap-up

View Slide

Reactive
Programming
1. Data streams 
3. Asynchronous observers

View Slide

Thanks!

View Slide

Intro to Reactive Programming and RxJava: How to React 😮😱🤪

Intro to Reactive Programming and RxJava: How to React 😮😱🤪

Jordan Jozwiak

More Decks by Jordan Jozwiak

Other Decks in Technology

Featured

Transcript