cycling for noobs
TRANSCRIPT
![Page 2: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/2.jpg)
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
![Page 3: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/3.jpg)
Concerns
• Requires a “brain rewire”• High barrier to reuse & contribution• How do Progressive Enhancement?• Slower initial development• Are custom element tags clearer?
![Page 4: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/4.jpg)
Still learning and testing
• But is looking promising so far
![Page 5: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/5.jpg)
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
![Page 6: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/6.jpg)
Initially RP feels like …
![Page 7: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/7.jpg)
Leading to this …
Image: Remy by Stormy Peters
![Page 8: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/8.jpg)
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”
![Page 9: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/9.jpg)
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
![Page 10: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/10.jpg)
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
![Page 11: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/11.jpg)
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
![Page 12: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/12.jpg)
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
![Page 13: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/13.jpg)
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?
![Page 14: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/14.jpg)
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
![Page 15: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/15.jpg)
Hygge yourself happy
![Page 16: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/16.jpg)
Wants
• Visualisation and debugging tools• RxMarbles to cover higher order operators• Examples of common idioms / patterns• Repository of drivers• Enhancing newbie on-boarding
![Page 17: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/17.jpg)
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
![Page 18: Cycling for noobs](https://reader036.vdocuments.net/reader036/viewer/2022062901/58f3134b1a28ab6f798b4579/html5/thumbnails/18.jpg)
Cycle FTW