cycling for noobs
TRANSCRIPT
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
Concerns
• Requires a “brain rewire”• High barrier to reuse & contribution• How do Progressive Enhancement?• Slower initial development• Are custom element tags clearer?
Still learning and testing
• But is looking promising so far
Quick Demo of Brian
• 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
Initially RP feels like …
Leading to this …
Image: Remy by Stormy Peters
Drowning?
• Cycle opinionated use 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”
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
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
Stop Press!
Stalz’s announcement of 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
XStream happiness
• Web apps 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
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?
Relax, don’t sweat it
• 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
Hygge yourself happy
Wants
• Visualisation and debugging tools• RxMarbles to cover higher order operators• Examples of common idioms / patterns• Repository of drivers• Enhancing newbie on-boarding
Possible Bugs
• DOM driver 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
Cycle FTW