Download as PDF, PPTX
Effects, Coeffects & Subscriptions: a pit of success for SPAs
- 1. Effects, coeffects & subscriptions:a pit of success for SPAs Manuel Rivero @trikitrok
- 2. About me ● I’mManuel Rivero (@trikitrok). ● I’m a member of Codesai. ● I collaborate with BCN Software Craftsmanship, Clojure Developers BCN and Aprendices (@deAprendices) communities. ● My current client is Green Power Monitor where we develop a SPA for monitoring and managing renewable energy portfolios using ClojureScript and Om.
- 3. Thanks to: ● Allthe members of Clojure Developers BCN for all the fun and evenings of sharing and learning. ● All the people in Codesai & Green Power Monitor that gave me feedback to improve this talk. ● Francesc Guillén for introducing me to ClojureScript, teaching me so much, and letting me participate in his re-frame + React Native adventure.
- 4. Context â—Ź Rewrite inClojureScript a browser SPA written in JavaScript that implements a visual method to practice spelling. â—Ź Create a mobile version, adding some improvements and making it offline first. â—Ź We wanted to share as much code as possible between browser and mobile versions.
- 5. Stack â—Ź ClojureScript. â—Ź re-frame,a framework for writing SPAs in Clojurescript. â—Ź Reagent a minimalistic interface between ClojureScript and React. â—Ź expo to build React Native apps that work across both iOS and Android.
- 6. Some things wehave learned
- 7. 1. Effects &Coeffects
- 8.
- 9. Unidirectional Data FlowArchitecture from re-frame wonderful docs
- 10. Imagine a re-frameapp as a reduce
- 11. State Management â—Ź Atany point in time, app state results from reducing over all events dispatched in the app up until that time. â—Ź The combining function for the reduce is the set of registered event handlers.
- 12. Great if eventhandlers are pure functions
- 13. Pure Event Handlers â—ŹLocal reasoning â—Ź Easier testing â—Ź Events replay-ability
- 14.
- 15. Side-causes Data afunction requires but it does not receive in its argument list
- 16. Side-effects What afunction does to the world
- 17. What’s the problemwith effectful event handlers?
- 18. Effectful Event Handlers â—ŹAction at a distance. â—Ź Difficult to test. â—Ź Events replay-ability is lost.
- 19. How do weusually try to fix this? â—Ź Separation of concerns â—Ź Test doubles We regain isolation but, events replay-ability is still lost...
- 20.
- 21. DI in anevent handler with a side effect extended version
- 22. Testing event handlerwith a side effect
- 23. Testing event handlerwith a side effect
- 24. Testing event handlerwith a side effect
- 25. DI in anevent handler with a side cause extended version
- 26. Testing event handlerwith a side cause
- 27. Testing event handlerwith a side cause
- 28. Testing event handlerwith a side cause
- 29.
- 30. Is there aneasier way?
- 31. Effects and Coeffects ●Effects: describe your program’s side-effects (what it does to the world) ● Coeffects: track your program’s side-causes (what it requires from the world)
- 32. Declarative Effects pattern â—ŹEvent handlers are pure functions again â—Ź They receive coeffects and return effects â—Ź Injecting the values coeffects track and interpreting effects to actually perform side-effects are done by sth else (the language run-time, a framework, etc)
- 33. Declarative Effects pattern Effectsas Data, Richard Feldman
- 34. What do weget?
- 35. Pure event handlersagain! extended version
- 36.
- 37. Pure event handlersagain! extended version
- 38. Pure event handlersagain!* extended version * using destructuring
- 39.
- 40. Pure Event Handlers â—ŹLocal reasoning â—Ź Easier testing â—Ź Events replay-ability
- 41.
- 42. How are effects& coeffects handled?
- 43. Effect & Coeffectshandlers
- 44. Effect & Coeffectshandlers in re-frame â—Ź Built-in effects handlers (:db, :dispatch, :dispatch-later, etc) â—Ź Built-in coeffects handlers (:db) â—Ź You can create your own custom effects and coeffects handlers and register them into re-frame.
- 45. :timestamp is acustom coeffect extended version
- 46. Pure Functional Core,Imperative Shell
- 47.
- 48. Advantages over ports& adapters â—Ź Less accidental complexity in business logic â—Ź Remove business logic fragility to interface changes in ports â—Ź Still keeps pluggability (you can still use ports & adapters in the imperative shell)
- 49. 2. Subscriptions &Reactivity
- 50.
- 51. re-frame subscriptions â—Ź Anovel and efficient de-duplicated signal graph which runs query functions on the app state â—Ź These query functions extract data from the app state and provide it to view functions in the right format
- 52.
- 53.
- 54. Improve Performance â—Ź Byreducing renderings â—Ź By de-duplicating computations
- 55. re-frame subs: Reactivesignal graph from re-frame wonderful docs
- 56. re-frame subs: Reactivesignal graph
- 57. Simpler model &Dumb Views ● Avoid having to keep derived state in the model (app state). ● Dumb down the views, that end up being simple “data in, screen out” functions
- 58. 3. UI modeledas FSMs
- 59. Unidirectional Data FlowArchitecture from re-frame wonderful docs
- 60.
- 61.
- 62. UI modeled asFinite State Machines from a great Jeb Beich’s post in Cognitect’s blog
- 63. 4. Design Constraints and Pitsof success
- 64. Working against thearchitecture/design
- 65. Things could bemuch easier
- 66. A Pit ofSuccess “A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things.” Jeff Atwood
- 67. A Pit ofSuccess Functional architecture: The pits of success, Mark Seemann
- 68. Only pure functionsfor business logic
- 69.
- 70. UI modeled asFSMs from a great Jeb Beich’s post in Cognitect’s blog
- 71. Subscriptions â—Ź Reduce accidentalcomplexity by avoiding derived state â—Ź Dumb views down â—Ź Allow separated optimization of query code using a reactive de-duplicated signal graph
- 72. We were ina pit of success!
- 73. For redux users Declarativeeffects: â—Ź redux-saga or redux-loop Subscriptions: â—Ź reselect
- 74.
- 75.
- 76.
- 77.
- 78. 6. What didClojureScript give us?
- 79. Elegant Weapons from amazingxkcd comic
- 80. Sound functional language â—ŹImmutable data structures â—Ź Powerful standard library â—Ź Reference types â—Ź Lightweight but powerful polymorphism
- 81. Interactive Development â—Ź Greatdevelopment experience â—‹ REPL & Figwheel â—Ź Different flow: RDD + TDD â—‹ Faster feedback cycles
- 82. Avoid JS toolingfatigue ES5, ES6, ES7, JSX, Babel, TypeScript, Webpack, …
- 83. 7. No silverbullet
- 84. Hard things arestill hard re-frame puts you in a great starting point However, you still have to work hard to get good naming, model your domain, discover useful abstractions and organize your code
- 85. Beware of “shape”coupling ● Avoid that your code knows too much about the app-state representation. ● Especially important for tests. Use builders.
- 86. Beware of longevent cascades â—Ź Some business logic might be difficult to follow. â—Ź Common problem in all event-based systems: â—Ź Paliate with tooling (re-frisk) and packaging by feature.
- 87. Living on thebleeding edge ● expo: early days & quickly evolving => ClojureScript bindings continually catching up. ● Still worth it though: avoids maintaining different views for iOS and Android. ● It’ll get better as it stabilizes.
- 88.
- 89. ● Browser andmobile versions share most of its code ● Effects, coeffects & subscriptions ○ Removes a lot of accidental complexity ○ A “pit of success” ● ClojureScript: ○ sound language ○ great interactive development flow
- 90.
- 91. References & Links â—ŹEffects & Coeffects â—‹ Coeffects: The next big programming challenge, Tomas Petricek â—‹ Side-effect, Wikipedia â—‹ What is functional programming?, Kris Jenkins â—‹ Avoiding Action at a Distance Is the Fast Track to Functional Programming, Ashley Nelson-Hornstein â—‹ Effects as Data, Richard Felman â—‹ Unidirectional data flow architectures, Andre Staltz â—‹ Using coeffects in re-frame, Manuel Rivero â—‹ Using effects in re-frame, Manuel Rivero â—‹ Creating custom effects in re-frame, Manuel Rivero â—‹ An Introduction to Elm â—‹ Boundaries, Gary Bernhardt
- 92. References & Links â—ŹUIs modeled as FSMs â—‹ Using State Machines to Simplify User Interface Development, Jeb Beich â—‹ Creating a User Interface with Re-frame and State Machines, Jeb Beich â—Ź Pits of success â—‹ Functional architecture: The pits of success, Mark Seemann â—‹ Falling Into The Pit of Success, Jeff Atwood â—‹ A Good Language Conserves Programmer Energy, Eugene Wallingford â—‹ The deep synergy between testability and good design, Michael Feathers â—Ź Simplifying React â—‹ 6 things Reacters do that Re-framers avoid, Eric Normand â—‹ A guide to the React Lifecycle Methods for Re-frame, Eric Normand â—‹ JSX vs Clojurescript: the showdown, Inge Solvoll â—‹ Comparing Reagent to React.js and Vue.js for dynamic tabular data, Dmitri Sotnikov
- 93. References & Links â—ŹInteractivity â—‹ Developing ClojureScript With Figwheel, Bruce Hauman â—‹ Repl Driven Development, Stuart Sierra â—Ź Other interesting links â—‹ Interview with Yassine Elouafi, creator of redux-saga â—‹ Elm architecture with React + Redux + Redux-loop, Egor Sapronov â—‹ Rethinking All Practices: Building Applications in Elm, Jamison Dance â—‹ Reduce side effects in React/Redux, Michal Zalecki â—‹ Managing side effects in Redux, Rico Sta. Cruz â—‹ Offline first â—‹ re-frame â—‹ Reagent
- 94. References & Links â—‹React Native â—‹ re-natal â—‹ expo â—‹ Redux â—‹ reselect â—‹ redux-saga â—‹ redux-loop â—‹ Clojure Developers BCN Meetup â—‹ Aprendices Community on G+ â—‹ Clojure Barcelona Community on G+ Note for myself: inevitable actually exists and means unavoidable... (see the video of the talk when it comes out )
- 95. re-frame: how itworks discarded slide copied from wonderful re-frame docs