Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cycling for noobs
cycleconf April 2016
Steve Lee
steve@opendirective.com
@SteveALee
Why CycleJS & RP?
• Background in embedded realtime
comms & early Windows
–Async messages, events, signals
• Result of rev...
Concerns
• Requires a “brain rewire”
• High barrier to reuse & contribution
• How do Progressive Enhancement?
• Slower ini...
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 acces...
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)
• D...
Brain aches
• State, state and state!
– Problem for imperative too; cycle brings clarity
– Externally persisted eg user se...
Resources
• Egghead.com – RxJS and CycleJS
• Staltz’s guide to Reactive Programming
– https://gist.github.com/staltz/868e7...
Stop Press!
Stalz’s announcement of the XStream reactive
streams library for CycleJS means a good
number of the issues I h...
XStream happiness
• Web apps use few of the many RxJS operators
– map, startWith, filter, merge, scan,
combineLatest, with...
Debugging / testing
• http://staltz.com/how-to-debug-rxjs-code.html
• .do(x=>console.log(‘txt’, x))
• .subscribe(x=>consol...
Relax, don’t sweat it
• This is RP with Observables, not full FRP
– Observable + iterator = streams
• No guilt - use non p...
Hygge yourself happy
Wants
• Visualisation and debugging tools
• RxMarbles to cover higher order operators
• Examples of common idioms / patter...
Possible Bugs
• DOM driver seems to change capture/bubbling
– .do(preventPropagation()), cough
• No error event for img lo...
Cycle FTW
Upcoming SlideShare
Loading in …5
×

Cycling for noobs

1,065 views

Published on

Experience from a few weeks of cyclejs and RxJS coding. Lightning talk at 2016 04-22 cycleconf

Published in: Software
  • Be the first to comment

  • Be the first to like this

Cycling for noobs

  1. 1. Cycling for noobs cycleconf April 2016 Steve Lee steve@opendirective.com @SteveALee
  2. 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. 3. Concerns • Requires a “brain rewire” • High barrier to reuse & contribution • How do Progressive Enhancement? • Slower initial development • Are custom element tags clearer?
  4. 4. Still learning and testing • But is looking promising so far
  5. 5. 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
  6. 6. Initially RP feels like …
  7. 7. Leading to this … Image: Remy by Stormy Peters
  8. 8. 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” 
  9. 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. 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. 11. 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
  12. 12. 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
  13. 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. 14. 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
  15. 15. Hygge yourself happy
  16. 16. Wants • Visualisation and debugging tools • RxMarbles to cover higher order operators • Examples of common idioms / patterns • Repository of drivers • Enhancing newbie on-boarding
  17. 17. 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
  18. 18. Cycle FTW

×