Cycle.js overview
0 likes•269 views
Cycle.js is a functional and reactive JavaScript framework designed for cleaner code utilization, featuring a model-view-intent (MVI) pattern for state management and visual representation. It offers various installation options depending on the reactive programming library being used, such as xstream, rxjs, or most.js. The framework emphasizes the use of drivers to handle side effects while keeping the application as a pure function.
Cycle.js overview
- 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