Download to read offline
Uploaded bySteve Lee
Cycling for noobs
The document provides an overview of CycleJS and reactive programming (RP). It discusses why the author chose CycleJS and RP due to their component model, declarative code, and explicit data flow. It addresses some initial concerns with RP like requiring a "brain rewire" and barriers to reuse. It demonstrates a simple app called Brian designed for people with cognitive disabilities. It describes the learning process of getting used to RP concepts like state management and higher order operators. Resources for learning more about CycleJS, RxJS, and debugging reactive apps are provided. The author notes improvements from the XStream library and looks forward to better visualization and debugging tools.
More Related Content
Cycling for noobs
- 1. Cycling for noobs cycleconfApril 2016 Steve Lee steve@opendirective.com @SteveALee
- 2. Why CycleJS &RP? • Background in embedded realtime comms & early Windows –Async messages, events, signals • Result of review of client side tools • Good components model • Declarative code • Explicit data flow & transformation
- 3. Concerns • Requires a“brain rewire” • High barrier to reuse & contribution • How do Progressive Enhancement? • Slower initial development • Are custom element tags clearer?
- 4. Still learning andtesting • But is looking promising so far
- 5. Quick Demo ofBrian • Designed for people with cognitive disabilities – eg dementia or learning disabilities. • Easy access to media and communications • Various grades of UI complexity – https://brian.opendirective.com – https://brian.opendirective.com/assistant – https://github.com/opendirective/brian
- 6. Initially RP feelslike …
- 7. Leading to this… Image: Remy by Stormy Peters
- 8. Drowning? • Cycle opinionateduse of Reactive frameworks – All side effects in drivers – Main made of pure function(s) • Drivers are not complex– one liners are common • Imagine flows splitting and joining (aka a graph) – Split: const stream2$ = stream1$ – Join .merge() – Needs visualisation tools – Play “Where’s my water”
- 9. Brain aches • State,state and state! – Problem for imperative too; cycle brings clarity – Externally persisted eg user settings – DB via API (eg pouchdb) – Scan or single atom? – Is single atom as bad as global state? • Higher order operators eg flatMap – XS helps • How to map web app experience to RP
- 10. Resources • Egghead.com –RxJS and CycleJS • Staltz’s guide to Reactive Programming – https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 • XStream – http://staltz.com/xstream/ • RxMarbles – http://rxmarbles.com/ • RxJS 5 docs: overview, operator selector – http://reactivex.io • RxJS 4 docs – https://github.com/Reactive-Extensions/RxJS/tree/master/doc
- 11. Stop Press! Stalz’s announcementof the XStream reactive streams library for CycleJS means a good number of the issues I hit have disappeared 0/ • http://staltz.com/xstream/ • http://staltz.com/why-we-built-xstream.html
- 12. XStream happiness • Webapps use few of the many RxJS operators – map, startWith, filter, merge, scan, combineLatest, withLatestFrom, mergeMap • Hot vs cold, plus interaction with splitting • Schedulers • RxJS size on mobile
- 13. Debugging / testing •http://staltz.com/how-to-debug-rxjs-code.html • .do(x=>console.log(‘txt’, x)) • .subscribe(x=>console.log(‘txt’, x)) • Log all inputs and outputs (in production too) • Unit test win with pure functions, less mocking • ASCII Marble test descriptions 0/ • Global exception handler may be useful?
- 14. Relax, don’t sweatit • This is RP with Observables, not full FRP – Observable + iterator = streams • No guilt - use non pure main function • But, refactor out any code smells and anti patterns as soon as possible. Pay your Technical debt early
- 15.
- 16. Wants • Visualisation anddebugging tools • RxMarbles to cover higher order operators • Examples of common idioms / patterns • Repository of drivers • Enhancing newbie on-boarding
- 17. Possible Bugs • DOMdriver seems to change capture/bubbling – .do(preventPropagation()), cough • No error event for img loading – In line function handler with VDOM • Extra click event on a removed node – .filter(.parentElement !== null) • Crazy bug with driver not getting item but added subscribe does • Reactivex.io docs for Observable.from missing
- 18.