This document summarizes techniques for robust UI development with ClojureScript including: - ClojureScript enables first-class immutability and persistent data structures which helps manage increasingly complex state in single-page apps. - The reagent library separates state (stored in atoms) and views (functions of state) allowing hot code reloading to change views without losing state. - The re-frame library takes this further with a single state container (the database) and separating events, event handlers, effects, and subscriptions to control mutation and side effects predictably. - Clojure.spec can specify and validate the application state at runtime to catch errors and provide helpful messages.

1. Robust UI development
with ClojureScript

2. – http://redux.js.org/docs/introduction/Motivation.html
“As the requirements for JavaScript single-page
applications have become increasingly
complicated, our code must manage more
state than ever before.”

4. A user interface is a
giant blob of state

6. ClojureScript
• first-class immutability and persistent data
structures
• think carefully about state
• is a lisp!

7. Rapid Primer

8. Vectors

9. Maps

11. Atoms: Represent Mutable
State

13. view = f(state)
changeschanges with the
state
constant (you wrote it)

14. reagent: view as a function of data

15. reagent: separate state and
views using atoms

16. constantchanges because f is
changing
changes (you’re writing it)
view = f(state)

17. Hot code reloading
• change view as you type, but maintain state
• enables rapid feedback cycles
• how do we make this work?
• change only f, not s: this means we need to
separate f from s
• ClojureScript and reagent already do this!

18. *figwheel demo*
Demonstrate how figwheel can reload code
while maintaining state

19. This is cool! But…

20. We need to control mutation
and side effects
• our state is in multiple atoms
• our side effects are in event handlers scattered
throughout the code
• how can we make mutation and side effects more
predictable?

21. re-frame: state container
and application architecture
• put state all in one place: the re-frame DB
• Events: “something happened”
• event handlers return Effects — a data description
of side effects to be performed
• Effect Handlers perform the side effects
• Query the state in our views using Subscriptions

22. re-frame redux + libraries
events actions
subscriptions reselect
effects redux-saga

24. Ensuring consistency of
state with clojure.spec
• a system for specifying data as a composition of
predicates
• it is not a type system
• allows runtime data validation, documentation, test
data generation and generative testing
• we are only interested in data validation for now

25. • validate the state after every change, and fail
loudly if the state is invalid
• spec also provides useful error messages
• since spec validates at runtime, we can perform
more interesting validations

26. *demo of spec
validation with re-frame*
Demonstrate specifying the application state
with spec and the failure and error message
when our code tries to put the application into
an invalid state