Designing with Data Flow

How we can approach design with application state and data flow in mind.

Transcript

1. DESIGNING WITH DATA FLOW
2. A BIT ABOUT ME… JACK HSU ▸ Web developer ▸ Twitter: @jay_soo ▸ Blog: jaysoo.ca
3. IF YOU’RE BUILDING SOFTWARE, THERE IS A CERTAIN POINT WHERE YOU’LL BE DOMINATED BY COMPLEXITY. Rich Hickey
4. IN THE BRIEF WHAT IS SIMPLICITY? ▸ Simple: One concept ▸ Complexity: Interleaving of concepts ▸ Limits ▸ Simplicity Matters: https://www.youtube.com/watch? v=rI8tNMsozo0
5. WHAT MAKES DESIGN COMPLEX? ▸ Permutations of states ▸ Interleaving UI interactions ▸ Error states ▸ etc.
7. CQRS/ES SIMPLIFYING DESIGN
8. CQRS? ▸ CQRS = Command Query Responsibility Segregation ▸ (aka Flux) ▸ Commands = What the user intends to do ▸ Query = What the user sees
9. EVENT SOURCING ▸ Commands result in events ▸ Events affect application state
10. EVENT SOURCING ▸ Commands may result in events ▸ Events may affect application state NEXT!
13. CREATE NEW OPEN EMAIL
14. SEPARATION OF CONCERNS QUERIES ▸ List notifications ▸ Offline? ▸ …
15. SEPARATION OF CONCERNS COMMANDS ▸ Dismiss notification ▸ Go online ▸ …
16. THE GLOBAL STATE ONE STATE TO RULE THEM ALL
17. GLOBAL APPLICATION STATE
18. GLOBAL APPLICATION STATE WHY IS THIS USEFUL? ▸ State decoupled from UI ▸ UI reproducible from state
19. ERROR HANDLING
20. TEXT NO CODE NEEDED! ▸ List out possible states ▸ Handle each state in UI accordingly ▸ No interaction with running app =
21. HOW DOES UI UPDATE? ES + STATE ATOM ▸ Commands update parts of the state atom ▸ Updates to state cause change in UI ▸ Can reason about state changes without UI ▸ UI decoupled from commands
22. THE DATA FLOW TYING IT ALL TOGETHER
23. DATA FLOW QUERY UI CMD EVENT STATE
24. ONE-WAY DATA FLOW DOWN UI ▸ Data only flows in one direction ▸ From top-level component to child components
25. INVERSE DATA FLOW UP ▸ User interaction causes a flow back up ▸ Could result in a command in the application
26. OPEN EMAIL
27. TEXT BENEFITS ▸ Separation of concerns ▸ Completeness & correctness ▸ Design & Discovery process
30. DESIGN AND DISCOVERY ▸ Design UI with known states ▸ Discover through implementation
36. TAKEAWAYS ▸ Separate commands and queries ▸ Design UI from global application state ▸ Design how data flows through application ▸ Design for one thing at a time
37. DISCUSSIONS ▸ Designs work with actual state? code? ▸ Managing app complexity ▸ Too many states?
38. RESOURCES ▸ Pure UI - http://rauchg.com/2015/pure-ui/ ▸ Simplicity Matters (Talk) - https://www.youtube.com/ watch?v=rI8tNMsozo0
39. THANK YOU!