a reactive framework

Cycle.js

HELLO!

I am Luca MezzaliraSolutions Architect @ DAZNGoogle Developer Expert on Web TechnologiesCommunity Manager of London JavaScript User Group

1.REACTIVE PROGRAMMING

PASSIVE

REACTIVE

BA BA

2.Cycle.js

Cycle.js

Core concepts▸ Pure Functions▸ Drivers▸ Components▸ Streams

STREAMSA 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

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

React-Native

React

https://github.com/cyclejs/cycle-react-native

https://github.com/pH200/cycle-react

Snabbdom-jsxhttps://github.com/yelouafi/snabbdom-jsx

3.MODEL VIEW INTENT

VIEW INTENT

MODEL

RENDERER

futurice.com/blog/reactive-mvc-and-the-virtual-dom

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

Cycle.js in action

https://github.com/lucamezzalira/jsday-cycle-js

Awesome Cycle.jshttps://github.com/cyclejs-community/awesome-cyclejs

Cycle.jshttp://cycle.js.org/

Unidirectional Data flowhttps://vimeo.com/168652278

Cycle.js fundamentalshttps://egghead.io/courses/cycle-js-fundamentals

Can we useReactive Programming

in any project?

THANKS EVERYONE

Q&A

@lucamezzaliragithub.com/lucamezzalirawww.lucamezzalira.comwww.londonjs.ukmezzalab@gmail.com