myposter Tech Talk: Reactive x

1. ReactiveX

2. ReactiveX
• Problem: Verarbeiten von asynchronen Datensequenzen
• Mittel: Erweitertes Observer-Pattern mit Operatoren

3. Observer-Pattern
Subject
Observer A
Observer B
Observer C
subscribe
change
notify

4. Observable
Operatoren

5. Observable
• Drei Events statt einem
• onNext
• onCompleted
• onError
• Es gibt “Hot” und “Cold” Observables
• Variante: Single - für Sequenzen mit einem Element

6. Observable
Operatoren

7. onCompletedonNext
Quelle
Beobachter
Map
Filter

8. Operatoren
• Erzeugen, kombinieren, transformieren, filtern
• Ergebnis ist ein neues Observable
→ Operatoren können verkettet werden
• Reihenfolge ist entscheidend

10. Just
Observable
.just(1, 2, 3, 4, 5)
.subscribe(onNext = { print("$it ") })
Output: 1 2 3 4 5

12. Concat
Observable
.concat(Observable.just(1, 4, 5), Observable.just(2, 3))
.subscribe(onNext = { print("$it ") })
Output: 1 4 5 2 3

14. Filter
Observable
.just(1, 2, 3, 4, 5, 6)
.filter { it % 2 == 0 }
.subscribe(onNext = { print("$it ") })
Output: 2 4 6

15. Distinct
Observable
.just(1, 1, 2, 2, 3, 4, 5)
.distinct()
.subscribe(onNext = { print("$it ") })
Output: 1 2 3 4 5

16. Map
Observable
.just(1, 2, 3, 4, 5)
.map { it * 2 }
.subscribe(onNext = { print("$it ") })
Output: 2 4 6 8 10

17. FlatMap
Observable
.just(listOf(1, 2, 3), listOf(4, 5))
.flatMap { Observable.fromIterable(it) }
.subscribe(onNext = { print("$it ") })
Output: 1 2 3 4 5

18. ObserveOn & SubscribeOn
Observable
.fromCallable { longRunningOperation() }
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(onNext = { print("$it ") })

19. Beispiele

20. Preise für Topseller
fun getPrices(): Single<List<Price> {
val priceRequest = PriceRequest()
.setMaterial(material)
.setMaterialOption(materialOption)
.setFormats(topsellers.formats)
frameType?.let { priceRequest.setFrameType(it) }
return dataLayer
.getPrice(priceRequest)
.subscribeOn(Schedulers.io())
.toObservable()
.flatMap { Observable.fromIterable(it) }
.map { prices ->
Price(sumByFloat { it.priceCurrent }, sumByFloat { it.priceOriginal })
}
.toList()
.observeOn(AndroidSchedulers.mainThread())
}

21. App-API
@GET("price")
fun getPrice(
@QueryMap options: Map<String, String>,
@Query("formatTypes[]") formatTypes: List<String>
): Observable<ApiResponse<Prices>>

22. Texteingabe
hexInput
.textChanges()
.map { it.toString() }
.subscribe {
if (it.startsWith("#")) {
try {
color = Color.parseColor(it)
} catch (ignored: IllegalArgumentException) {}
} else {
hexInput.setText("#${hexInput.text}")
hexInput.setSelection(1)
}
}

23. Dropbox Bildersuche
private fun searchImages(): Observable<List<SearchMatch>> =
Observable
.merge(
(0 until ImagePickerHelpers.supportedExtensions.size).map {
searchImageType(ImagePickerHelpers.supportedExtensions[it])
}
)
.flatMap { Observable.fromIterable(it) }
.groupBy {
val path = it.metadata.pathDisplay
val directoryPath = path.substring(0, path.lastIndexOf("/"))
val directoryName = directoryPath.substring(directoryPath.lastIndexOf("/") + 1)
directoryName
}
private fun searchImageType(extension: String): Observable<List<SearchMatch>> =
Observable.fromCallable {
dropboxClient
.files()
.search("", extension)
.matches
}

24. Dropbox Bildersuche
private fun searchImages(): Observable<List<SearchMatch>> =
Observable
.concatEager(
(0 until ImagePickerHelpers.supportedExtensions.size).map {
searchImageType(ImagePickerHelpers.supportedExtensions[it])
}
)
.flatMap { Observable.fromIterable(it) }
.groupBy {
val path = it.metadata.pathDisplay
val directoryPath = path.substring(0, path.lastIndexOf("/"))
val directoryName = directoryPath.substring(directoryPath.lastIndexOf("/") + 1)
directoryName
}
.take(100)
private fun searchImageType(extension: String): Observable<List<SearchMatch>> =
Observable.fromCallable {
dropboxClient
.files()
.search("", extension)
.matches
}

25. Dropbox Bildersuche
private fun searchImages(): Observable<List<SearchMatch>> =
Observable
.concatEager(
(0 until ImagePickerHelpers.supportedExtensions.size).map {
searchImageType(ImagePickerHelpers.supportedExtensions[it])
}
)
.flatMap { Observable.fromIterable(it) }
.distinct { it.metadata.name }
.groupBy {
val path = it.metadata.pathDisplay
val directoryPath = path.substring(0, path.lastIndexOf("/"))
val directoryName = directoryPath.substring(directoryPath.lastIndexOf("/") + 1)
directoryName
}
private fun searchImageType(extension: String): Observable<List<SearchMatch>> =
Observable.fromCallable {
dropboxClient
.files()
.search("", extension)
.matches
}

26. Dropbox Bildersuche
private fun searchImages(): Observable<List<SearchMatch>> =
Observable
.concatEager(
(0 until ImagePickerHelpers.supportedExtensions.size).map {
searchImageType(ImagePickerHelpers.supportedExtensions[it])
}
)
.flatMap { Observable.fromIterable(it) }
.filter { it.metadata.name.contains("myposter") }
.groupBy {
val path = it.metadata.pathDisplay
val directoryPath = path.substring(0, path.lastIndexOf("/"))
val directoryName = directoryPath.substring(directoryPath.lastIndexOf("/") + 1)
directoryName
}
private fun searchImageType(extension: String): Observable<List<SearchMatch>> =
Observable.fromCallable {
dropboxClient
.files()
.search("", extension)
.matches
}

27. data class CollageModel(
val layouts: ImmutableList<CollageLayout>,
val selectedLayout: CollageLayout,
val selectedFormatGroup: CollageFormatGroup,
val tiles: ImmutableList<CollageTile>,
val texts: ImmutableList<CollageText>,
val rotations: Int,
val outerMargin: Float,
val innerMargin: Float,
val backgroundColor: Int,
⋮
)

28. MVP + ReactiveX
• Model-View-Presenter Pattern
• Model: Repräsentation des Zustands
• View: Darstellung des Zustands
• Presenter: Zustand verändern und View updaten

29. Subjects
• Sind Observer und Observable
• Geben einen Teil der ursprünglichen Daten weiter
• Varianten: Async, Behavior, Publish, Replay

30. BehaviorSubject

31. MVP + ReactiveX
• Presenter hat ein BehaviorSubject für Model-Objekte
• Bei Eingaben wird ein neues Model-Objekt erzeugt und das
onNext-Event des Subjects ausgelöst
• View beobachtet das Subject und updated das UI bei
onNext-Events

32. reactivex.io