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.

1. a reactive framework
Cycle.js

2. HELLO!
I am Luca Mezzalira
Solutions Architect @ DAZN
Google Developer Expert on Web Technologies
Community Manager of London JavaScript User Group

3. 1.
REACTIVE
PROGRAMMING

4. PASSIVE REACTIVE
BA BA

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

10. React-Native
React
https://github.com/cyclejs/cycle-react-native
https://github.com/pH200/cycle-react
Snabbdom-jsx
https://github.com/yelouafi/snabbdom-jsx

11. 3.
MODEL VIEW
INTENT

12. VIEW INTENT
MODEL
RENDERER
futurice.com/blog/reactive-mvc-and-the-virtual-dom

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

14. Cycle.js in action

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?

18. THANKS EVERYONE
Q&A
@lucamezzalira
github.com/lucamezzalira
www.lucamezzalira.com
www.londonjs.uk
mezzalab@gmail.com