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

1. CYCLE.JS OVERVIEW
_by Oleksii Prohonnyi

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. MAIN IDEA

4. EXAMPLE

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. MVI PATTERN
 See more: http://cycle.js.org/model-view-intent.html

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. API
Cycle.run(app, drivers)
 app – main function
 drivers – list of sources (drivers, sinks notations)
 See more: http://cycle.js.org/documentation.html

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. DATAFLOW

11. COMPOSITION
 See more: http://cycle.js.org/components.html

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. THANK YOU
FOR ATTENTION

14. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi