Cycle.js a reactive framework
Download as PPTX, PDF1 like261 views
Cycle.js is a reactive JavaScript framework based on functional reactive programming principles. It uses unidirectional data flow and pure functions to implement the model-view-intent pattern. In Cycle.js, everything is modeled as streams, including user events from drivers and values from components. This allows for reactive programming where user intentions trigger model updates as stream events.
Cycle.js a reactive framework
- 2. HELLO! I am Luca Mezzalira Solutions Architect @ DAZN Google Developer Expert on Web Technologies Community Manager of London JavaScript User Group
- 5. 2. Cycle.js
- 6. Cycle.js
- 7. Core concepts ▸ Pure Functions ▸ Drivers ▸ Components ▸ Streams
- 8. STREAMS A stream is a sequence of ongoing events ordered in time. It can emit three different things: a value (of some type), an error, or a "completed" signal. EVERYTHING CAN BE A STREAM
- 9. Cycle Diversity ▸ Refactored in Typescript ▸ It accepts different type of reactive libraries (xstream, rxjs 4 and 5, most) ▸ Cycle and Motorcycle are merged adding the best of both frameworks ▸ Integration with Snabbdom for DOM rendering https://github.com/cyclejs/cyclejs/releases/tag/v7.0.0
- 13. MVI RULES ▸ Unidirectional data flow ▸ A module shouldn’t control any other module (controller in MVC) ▸ The only shared part between modules are observables ▸ Intent is a component with only one responsibility: It should interpret what the user is trying to do in terms of model updates, and export these "user intentions" as events
- 15. https://github.com/lucamezzalira/jsday-cycle-js
- 16. Awesome Cycle.js https://github.com/cyclejs-community/awesome-cyclejs Cycle.js http://cycle.js.org/ Unidirectional Data flow https://vimeo.com/168652278 Cycle.js fundamentals https://egghead.io/courses/cycle-js-fundamentals
- 17. Can we use Reactive Programming in any project?