making design decisions in react-based clojurescript web applications
TRANSCRIPT
![Page 1: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/1.jpg)
Making design decisions in React-based ClojureScript web
applications
@friemens
![Page 2: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/2.jpg)
![Page 3: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/3.jpg)
React
Componenthierarchy
DOMVDOM
Callback
Render
![Page 4: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/4.jpg)
How do I organize state and presentation logic?
Componenthierarchy
DOMVDOM
Callback
Render
?
![Page 5: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/5.jpg)
App state: One or many atoms?
Componenthierarchy
Or put everythinginto one atom?
Partition stateby components?
![Page 6: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/6.jpg)
App state: Same information in different places
Componenthierarchy
App state
![Page 7: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/7.jpg)
App state: Structural mismatches
Componenthierarchy
App state
![Page 8: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/8.jpg)
App state: Unpredictable data needs
Dynamic, user-driven
screen
![Page 9: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/9.jpg)
App state: Update state after events
Update state directly?
HTML inputApp state
Or send an 'update' event?
Component-external code
![Page 10: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/10.jpg)
Where to start
● Keep frontend state in single atom
● Keep components stupid● Move presentation logic out of your components● Provide a communication channel to components● Avoid component assumptions about your state
● Presentation logic is a set of functions[state event] stateorchannel→
![Page 11: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/11.jpg)
The Big LoopTM
App state
Componenthierarchy
DOMVDOM
Presentationlogic
Remote backend
Events
DispatcherChannel
![Page 12: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/12.jpg)
The Om/Next (Relay+Falcor inspired) approach
Q
Q
Q
Q
Query Tree
QBackend
Tree-ish data
QQQ
Components +co-located queries
![Page 13: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/13.jpg)
Do I need the Om/Next approach?
Unpredictable data needs?
Provide an endpoint accepting GraphQL-style queries.
Co-locate your queries with your components.
yesno
Having a generic queryendpoint might even then be beneficial.
Top-level components decide upon queries and pushstate to child components.
![Page 14: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/14.jpg)
Dataflow
observe
compute
App state
Derived state
Component hierarchy
![Page 15: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/15.jpg)
Cursor
A value combining ● pointer to a ref● a path
2
1
2 1
CursorApp state
![Page 16: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/16.jpg)
Do I need dataflow and/or cursors?
Structural mismatches?Transformations?
Add dataflow.
Keep it simple,use cursors.
Need reusable components on derived state?
Make sure update logicknows locations in root atom.
noyes
It's not hard to makecomponents reusable.
![Page 17: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/17.jpg)
How to synchronize app state with your backend?
Remote backend App state
Asynchronouscommunication
![Page 18: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/18.jpg)
Synchronization of state with your backend
Handle asynchronity with your event channel
App state
Presentationlogic
Remote backend DispatcherChannel
Other Events
Async response
![Page 19: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/19.jpg)
Synchronization: Inconsistencies after errors
FrontendBackend
![Page 20: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/20.jpg)
Combine many logical requests in one roundtrip
App state
Presentationlogic
Remote backend
request 1request 2request 3
response 1response 2response 3
![Page 21: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/21.jpg)
FrontendBackend
Query data after update in same network roundtrip
![Page 22: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/22.jpg)
User input while in synchronization
Database
User +Frontend
Time
edit
query
edit
update + query
?
![Page 23: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/23.jpg)
User input while in synchronization
Don't.Lock your UI.
Merge user input with loaded data.
How should I handle user input while loading
data?
![Page 24: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/24.jpg)
Synchronization: Concurrency control
Time
Database
User A
User B
query
edit
update
queryupdate
?
![Page 25: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/25.jpg)
Synchronization: Concurrency Control
Optimistic Concurrency Control a.k.a Version numbers
v0v0 v1
v0
v0
v0
v1
v0
Time
Database
User A
User B
![Page 26: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/26.jpg)
Synchronization: Concurrency Control
Pessimistic Concurrency Control a.k.a Locking
Time
Database
User A
User B
![Page 27: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/27.jpg)
Synchronization: Concurrency Control
Version numbers+ conflicts unlikely+ loosing work is acceptable+ cheap- affects your data
Locking+ safety-first approach- lock management- dead client detection
Optimistic or pessimisticconcurrency control?
It really depends on your domain!
![Page 28: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/28.jpg)
Wrap up
![Page 29: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/29.jpg)
Wrap up
Optimistic or pessimisticconcurrency control?
How (un)predictable are your data needs?
Do your components require expensive data transformations?
Examine decisions that your favoriteReact-wrapping lib has made on behalf of you!
![Page 30: Making design decisions in React-based ClojureScript web applications](https://reader031.vdocuments.us/reader031/viewer/2022030222/58b8a8611a28abc06d8b6371/html5/thumbnails/30.jpg)
Thank you for listening!
Questions?
@friemens www.doctronic.de