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.

Cycle.js overview

149 views

Published on

This presentation has been prepared by Oleksii Prohonnyi for internal JS team meeting to improve skills of developers.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Cycle.js overview

  1. 1. CYCLE.JS OVERVIEW _by Oleksii Prohonnyi
  2. 2. GENERAL  A functional and reactive JavaScript framework for cleaner code  Website: http://cycle.js.org/  Sandbox: http://widdersh.in/tricycle/  Sources: https://github.com/cyclejs/cyclejs
  3. 3. MAIN IDEA
  4. 4. EXAMPLE
  5. 5. GETTING STARTED  npm install xstream @cycle/xstream-run (recommended)  npm install rx @cycle/rx-run (for RxJS v4)  npm install rxjs @cycle/rxjs-run (for RxJS v5+)  npm install most @cycle/most-run (for cujo.js most.js)  See more: http://cycle.js.org/getting-started.html
  6. 6. MVI PATTERN  See more: http://cycle.js.org/model-view-intent.html
  7. 7. MVI PATTERN  intent() function  Purpose: interpret DOM events as user’s intended actions  Input: DOM source  Output: Action Streams  model() function  Purpose: manage state  Input: Action Streams  Output: State Stream  view() function  Purpose: visually represent state from the Model  Input: State Stream  Output: Stream of Virtual DOM nodes as the DOM Driver sink
  8. 8. API Cycle.run(app, drivers)  app – main function  drivers – list of sources (drivers, sinks notations)  See more: http://cycle.js.org/documentation.html
  9. 9. DRIVERS  Drivers are plugin-like simple functions that take messages from sinks and call imperative functions.  All side effects are contained in drivers.  This means your application is just a pure function, and it becomes easy to swap drivers around.  See more: http://cycle.js.org/drivers.html
  10. 10. DATAFLOW
  11. 11. COMPOSITION  See more: http://cycle.js.org/components.html
  12. 12. REFERENCES  http://cycle.js.org/  http://reactivex.io/rxjs/  http://staltz.com/xstream/  https://github.com/cyclejs  https://egghead.io/courses/cycle-js-fundamentals
  13. 13. THANK YOU FOR ATTENTION
  14. 14. Oleksii Prohonnyi facebook.com/oprohonnyi linkedin.com/in/oprohonnyi

×