Robust UI development with ClojureScript
- 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
- 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