Taming the QIX Engine with Reactive Programming

Transcript

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. = +