This document discusses using reactive programming with the QIX engine. It introduces QIX as modeling data into a state that can change based on user interactions. RxJS is presented as a way to handle asynchronous and mutating data, working well with QIX. The basics of reactive programming with Observables and Operators are explained. Examples are given of using RxQ, an RxJS wrapper for QIX, to build custom interfaces that compose multiple data sources and respond to state changes. Code examples are provided and resources listed for learning more about QIX, RxJS, and RxQ.

1. Taming the QIX Engine
with Reactive Programming
Speros Kokenes
Justin Skaggs
Axis Group
@sperosck @justin_skaggs

2. QIX Engine
Qlik Sense Client
Business Users

3. Custom Interfaces

6. To leverage the QIX Engine
Understand how QIX works
&
Have a strategy for interfacing with it

7. Rx
Understand how QIX works
&
Have a strategy for interfacing with it
To leverage the QIX Engine

8. Why tame QIX? Why Rx?
QIX is basically a giant state machine for a data set
Rx handles asynchronous and mutating data easily
Rx works well with QIX for scalable, maintainable apps

9. How does QIX work?

10. Models data into a state
Current State: All 6 records

11. State can change based on interactions with the data

12. State can change based on interactions with the data
Current State: All 6 records

13. State can change based on interactions with the data
Current State: All 6 records
Filter to “Monday”

14. State can change based on interactions with the data
Current State: All 6 records
Filter to “Monday”
Current State: 2 of 6 records

15. Users can perform calculations against the data state

16. Users can perform calculations against the data state
Current State: All 6 records

17. Users can perform calculations against the data state
Current State: All 6 records
Sum of Sales by Fruit?

18. Users can perform calculations against the data state
Current State: All 6 records
Sum of Sales by Fruit?

19. The QIX Engine
Models data into a state
State can change
Calculations against state

20. How do you interact with the QIX Engine?
Classes with methods for interaction:
Calculate data
Modify the data state
Modify the app structure

21. In summary
QIX app models data state that changes over time
State reacts to user input
We have to react to the state changes to stay in sync

22. What is reactive programming?

23. Programming with asynchronous data streams

24. Programming with asynchronous data streams
Modeling values that change over time

25. Imperative example (non-reactive)

26. Reactive

27. If you’ve used Excel before, you’ve done reactive programming

32. Observer
produce values
Observable
listen for values
subscribing

33. Observable
Observer

34. Power of Observables
Composing them with synchronous-like logic called operators
Observable
Operator
Observable

38. How about capturing multi-click events?

39. How about capturing multi-click events?
Example from https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

40. Benefits: Treat async data…
With composable operations
With synchronously defined logic

41. models data that changes
over time on the server
QIX
models data that changes
over time on the client
Rx

42. RxQ
An RxJS wrapper for the QIX Engine API

43. Engine Classes wrapped in Observables
All Engine methods exposed in Operators
What does RxQ do?

44. Enough slides, let’s code

45. Simple Hub Example

46. Simple Hub Example
• Custom Hub Interface
• Search functionality
• Key Themes
• 2 asynchronous sources
• Qlik Sense Hub (Doc List)
• User (filter hub, sort, search)
Hub 1
filterDocs$
search$
Marble Diagram
combineLatest
.filter( )=

47. Combined Hub Example

48. Combined Hub Example
• Multiple Hubs (apps & streams)
• Custom interface
• Sort, filter and open applications
• Key Themes
• 5 asynchronous sources
• hub 1, hub 2
• User (filter hub, sort, search)
Hub 1
Hub 2
filterDocs$
search$
Marble Diagram
combineLatest
.filter( )
.filter( )
= +

49. Chart w/ Filter Example

50. Chart w/ Filter Example
• Key Theme - React to all the things
• User Events -> Change Server State
• Server State Change -> Update Client State
• Client State Change -> Update Client View
filterSelection$
data$
Marble Diagram
QIX

51. How to learn more QIX
The QIX Engine - under the hood - Qlik Dev Group
Introduction to Generic Object | Qlik Community
Help.qlik.com
Qlik Branch Slack

52. How to learn more RxJS
The introduction to Reactive Programming you've been missing · GitHub
RxJS API Document - ReactiveX
RxJS Lessons - Screencast Video Tutorials @eggheadio

53. How to learn more RxQ
Tutorial: Build an Interactive Chart on QIX with RxQ
https://github.com/axisgroup/RxQ
Ping me on Qlik Branch Slack

54. 😊=+