hannah howard #aboutme › system › files › presentation-slides › presentation.pdf1. lresult...
TRANSCRIPT
![Page 2: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/2.jpg)
REACTIVEPROGRAMMING:A Better Way to Write Frontend Applications
![Page 3: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/3.jpg)
1. PROBLEM STATEMENT
![Page 4: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/4.jpg)
WHAT IS ACOMPUTERPROGRAM?
![Page 5: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/5.jpg)
A computer program is asequence of instructions
for performing a taskdesigned to solve
specic problems.- Wikipedia
![Page 6: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/6.jpg)
Program = Todo List?
'SEQUENCE OF INSTRUCTIONS'
![Page 7: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/7.jpg)
LESSON PLAN
![Page 8: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/8.jpg)
HOW COMPUTER PROGRAMS ACTUALLY RUN
![Page 9: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/9.jpg)
the heart of frontend programming
INTERRUPTIONS:
![Page 10: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/10.jpg)
2. A BRIEF HISTORY OF INTERRUPTIONS
![Page 11: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/11.jpg)
Technique 1:
GLOBAL EVENT BUS
![Page 12: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/12.jpg)
In The Beginning... C!
1. #define BYTE unsigned char 2. #define NUM_SCAN_QUE 256 // this MUST be 256, using BYTE rollover for \ 3. // q code 4. BYTE gb_scan; 5. BYTE gb_scan_q[NUM_SCAN_QUE]; 6. BYTE gb_scan_head; 7. BYTE gb_scan_tail; 8. 9. static void interrupt(far *oldkb)(void); /* BIOS keyboard handler */ 10. 11. /* get_scan() April 17,1993 */ 12. void interrupt get_scan(void) 13. 14. /* read the scan code from the keyboard */
![Page 13: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/13.jpg)
Windows event loop
1. int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) 2. 3. MSG msg; 4. BOOL bRet; 5. 6. while (1) 7. 8. bRet = GetMessage(&msg, NULL, 0, 0); 9. 10. if (bRet > 0) // (bRet > 0 indicates a message that must be processed.) 11. 12. TranslateMessage(&msg); 13. DispatchMessage(&msg);
![Page 14: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/14.jpg)
1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second message parameter 2. 3. switch (uMsg) 4. 5. case WM_CREATE: 6. // Initialize the window. 7. return 0; 8. 9. case WM_PAINT: 10. // Paint the window's client area. 11. return 0; 12. 13. case WM_SIZE: 14. // Set the size and position of the window. 15. return 0; 16. 17. case WM_DESTROY: 18. // Clean up windowspecific data objects. 19. return 0; 20. //
Window procedure = read message, update state
![Page 15: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/15.jpg)
1999?
![Page 16: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/16.jpg)
1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second message parameter 2. 3. switch (uMsg) 4. 5. case WM_CREATE: 6. // Initialize the window. 7. return 0; 8. 9. case WM_PAINT: 10. // Paint the window's client area. 11. return 0; 12. 13. case WM_SIZE: 14. // Set the size and position of the window. 15. return 0; 16. 17. case WM_DESTROY: 18. // Clean up windowspecific data objects. 19. return 0; 20. // 21. // Process other messages. 22. //23. default:
Or did we?
![Page 17: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/17.jpg)
1. function todoApp(state = initialState, action) 2. switch (action.type) 3. case SET_VISIBILITY_FILTER: 4. return ...state, 5. visibilityFilter: action.filter 6. ; 7. case ADD_TODO: 8. return ...state, 9. todos: [
![Page 18: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/18.jpg)
NO SHADE TO REDUX
![Page 19: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/19.jpg)
Technique 2:
OBSERVER PATTERN
![Page 20: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/20.jpg)
A SHORT DIGRESSION...
![Page 21: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/21.jpg)
VERY IMPORTANT CONTENT CREATOR
![Page 22: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/22.jpg)
HOW WILL PEOPLE SEE MY CONTENT?
![Page 23: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/23.jpg)
OLD SCHOOL WAY
![Page 24: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/24.jpg)
I will make content- inuencer
I will subscribe to yourcontent
- adoring fan
I made new content- inuencer
I am notied about yourcontent, and can watch
it- adoring fan
![Page 25: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/25.jpg)
I will emit events- Subject
I will subscribe to yourevents
- Observer
An event happened- Subject
I am notied about theevent, and can handle it
- Observer
![Page 26: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/26.jpg)
Real World Example
1. // Function to change the content of t2 2. const modifyText = () => 3. const toggle = document.getElementById("toggle"); 4. toggle.firstChild.nodeValue = t2.firstChild.nodeValue == "on" ? "off" : "on"; 5. 6. 7. // add event listener to table 8. const el = document.getElementById("toggleswitch"); 9. el.addEventListener("click", modifyText, false);
![Page 27: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/27.jpg)
OBSERVER PATTERN VS GLOBALEVENT BUS
(+) Way simpler than global event bus(+) Localized scope(-) Have To Setup Subscriptions
![Page 28: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/28.jpg)
Take home quiz:
TRY DRAG AND DROP
![Page 29: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/29.jpg)
MIXING CONCERNS1. Handling events2. Subscribing observers
![Page 30: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/30.jpg)
Is this what happened?
REDUX ORIGIN STORY
![Page 31: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/31.jpg)
IS THERE A BETTER WAY?
![Page 32: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/32.jpg)
3. FUNCTIONAL REACTIVE PROGRAMMING
![Page 33: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/33.jpg)
I taught middle school
ONCE UPON A TIME...
![Page 34: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/34.jpg)
GOOD TEACHERS = JEDI
![Page 35: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/35.jpg)
DON'T START WITH A PLAN...
![Page 36: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/36.jpg)
AND GET INTERRUPTED.
![Page 37: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/37.jpg)
PLAN FORINTERRUPTIONS
AND REACT!
![Page 38: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/38.jpg)
PSA:
PAY TEACHERS
![Page 39: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/39.jpg)
HOW COULD WEWRITE PROGRAMS
REACTIVELY?
![Page 40: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/40.jpg)
Consider this statement
Y = X + 3
![Page 41: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/41.jpg)
Assign once the value for y by adding 3 to x
IMPERATIVE MEANING:
![Page 42: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/42.jpg)
An equation
MATH MEANING
5 10 15 205101520
5101520
5101520
y
x
![Page 43: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/43.jpg)
X is a value that can change over time. Y is always thevalue 3 greater than X
REACTIVE MEANING:
![Page 44: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/44.jpg)
a data stream of numbers over time
X VALUES OVER TIME
0 9 3 10 4
![Page 45: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/45.jpg)
a data stream of numbers derived from another stream
Y VALUES OVER TIME
0 9 3 10 4
3 12 6 13 7
![Page 46: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/46.jpg)
Stream of user input events
MOUSE CLICKS OVER TIME
MC MC MCMCMCMC MC MCMCMCMC MC
![Page 47: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/47.jpg)
REACTIVEPROGRAMMING INTHE REAL WORLD?
![Page 48: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/48.jpg)
Only better...
OBSERVER PATTERN!
![Page 49: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/49.jpg)
A value that changes over time, that we can listen tochanges on
OBSERVABLE:
![Page 50: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/50.jpg)
Value as 'Observable'
1. x.subscribe(nextX => console.log(nextX)) 2. 3. x.subscribe(nextX => console.log(nextX + 3)) 4. 5. y = "?"; 6. 7. x = [0, 9, 3, 10, 4] 8. 9. y = x.map(nextX => nextX + 3) 10. 11. x = Observable.of(0, 9, 3, 10, 4); 12. 13. y = x.map(nextX => nextX + 3)
![Page 51: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/51.jpg)
Go Left Go Right
Left ButtonClicks
Right ButtonClicks
Left ClickPosition
Right ClickPosition
Position
![Page 52: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/52.jpg)
How This Works
1. import 2. fromEvent, 3. merge 4. from "rxjs";
![Page 53: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/53.jpg)
4. HOW DO I ACTUALLY USE THIS?
![Page 54: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/54.jpg)
IMPORTANT DATA POINT
![Page 55: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/55.jpg)
YOU'RE ALREADY USING IT.
![Page 56: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/56.jpg)
TWO QUESTIONS FOR USING RXJSHow to architect applications with RxJS?How do I integrate this in my application, today?
![Page 57: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/57.jpg)
User name:
Password:
Submit
User name Password Submit Button
Login Attempts
Login Responses
Login In ProgressLogin FailuresLogin Successes
Failure Message
User Token Get Protected
Protected Resourc
![Page 58: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/58.jpg)
But how tho?
1. const api = 2. login: (username, password) => Promise, 3. protectedResource: 4. get: (userToken) => Promise 5. 6. ; 7. 8. const username$ = new Subject(); 9. const password$ = new Subject(); 10. const submitButton$ = new Subject(); 11. 12. const loginAttempts$ = submitButton$.pipe(withLatestFrom(username$, password$)); 13. 14. const loginResponses$ = loginAttempts$.pipe( 15. mergeMap(([_, username, password]) => api.login( 16. username,17. password
![Page 59: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/59.jpg)
How data propogates through your program
SIGNAL GRAPH
![Page 60: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/60.jpg)
ACTUAL SIGNAL GRAPH FROM REAL APP
email passwordauthorizationRequested
selectedAccountIndex portfolioSelectedauthorization
user failedLogins portfolios
activePortfolio
portfolioSecurities
accounts
activeAccount
activeAccountPerformances activeAccountPortfolios
![Page 61: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/61.jpg)
PRODUCTION CONCERNS1. How do I test?2. How do I make sure my graph is sound?3. Ack RxJs idiosyncracies!4. One big graph or lots of smaller ones?5. Diagramming is hard
![Page 62: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/62.jpg)
I liked Signal Graphs so much I bought thecompany!
- me, 2018
![Page 63: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/63.jpg)
A library for frontend state management using signalgraphs
SIGNAL:
![Page 64: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/64.jpg)
Signal!
1. const signalGraph = new SignalGraphBuilder() 2. .define( 3. addPrimary('username$'), 4. addPrimary('password$'), 5. addPrimary('submitButton$'), 6. addDerived( 7. 'loginAttempts$', 8. makeLoginAttempts, 9. 'submitButton$', 10. 'username$', 11. 'password$' 12. ), 13. addDerived('loginResponses$', makeLoginResponses, 'loginAttempts$', 'api'), 14. addDerived( 15. 'loginInProgress$', 16. makeLoginInProgress,17. 'loginAttempts$',
![Page 65: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/65.jpg)
Available Now(ish):
@RXREACT/SIGNAL
![Page 66: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/66.jpg)
Coming Soon:
AUTOMATICGRAPH
VISUALIZATION
![Page 67: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/67.jpg)
INTEGRATION
![Page 68: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/68.jpg)
FRAMEWORK = ANGULAR1. You're done2. Check out NgRx
![Page 69: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/69.jpg)
BUT WHAT ABOUT REACT?
![Page 70: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/70.jpg)
GOOD NEWS!
![Page 71: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/71.jpg)
Tools for integrating react with RxJs!
RXREACT:
![Page 72: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/72.jpg)
Signal-connect
1. import withViewModel from '@rxreact/signalconnect' 2. 3. const PositionedBox = ( position ) => <RedBox pose=position /> 4. 5. const ballSignalGraph = new SignalGraphBuilder().define(/*...*/).build() 6. 7. // connect(graph, mapGraphOutputsToProps, mapGraphInputsToProps = ) 8. const BoundBox = connect( 9. ballSignalGraph, 10. 11. position: 'position$' 12. 13. )(PositionedBox) 14. 15. const LeftButton = connect(
![Page 73: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/73.jpg)
5. USED CAR SALES PORTION
![Page 74: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/74.jpg)
RxJs+React on it's own
@RXREACT/CORE:
![Page 75: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/75.jpg)
RxReact Demo
1. import withViewModel from '@rxreact/core' 2. 3. const PositionedBox = ( position ) => <RedBox pose=position /> 4. 5. const boxVm = 6. inputs: 7. position: position$ 8. 9. 10. 11. const BoundBox = withViewModel(boxVm)(PositionedBox) 12. 13. const LeftButton = withViewModel( 14. outputs: 15. onClick: leftClick$ 16.
![Page 76: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/76.jpg)
WHAT ABOUT TYPESCRIPT?
![Page 77: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/77.jpg)
RXREACT TYPESCRIPT
![Page 78: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/78.jpg)
VIEW MODEL AS REDUCER?
![Page 79: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/79.jpg)
1. let viewModel = viewModelFromReducer( 2. initialState: 3. count: 2, 4. fruit: 'bananas', 5. extra: 'applesauce' 6. , 7. reducer(state, action) 8. switch (action.type) 9. case ActionType.SET_COUNT: 10. return ReducerResult.Update( ...state, 11. count: action.payload
![Page 80: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/80.jpg)
@RXREACT/PROCESS
![Page 81: HANNAH HOWARD #ABOUTME › system › files › presentation-slides › presentation.pdf1. LRESULT CALLBACK MainWndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) // second](https://reader033.vdocuments.net/reader033/viewer/2022060511/5f28dba8a5394b1c09152224/html5/thumbnails/81.jpg)
reactivex-talk.techgirlwonder.com github.com/hannahhoward/reactivex-talk
THAT'S ALL FOLKS!