Top Banner
a reactive framework Cycle.js
18

Cycle.js a reactive framework

Jan 09, 2017

Download

Technology

luca mezzalira
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Cycle.js  a reactive framework

a reactive framework

Cycle.js

Page 2: Cycle.js  a reactive framework

HELLO!

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

Page 3: Cycle.js  a reactive framework

1.REACTIVE PROGRAMMING

Page 4: Cycle.js  a reactive framework

PASSIVE

REACTIVE

BA BA

Page 5: Cycle.js  a reactive framework

2.Cycle.js

Page 6: Cycle.js  a reactive framework

Cycle.js

Page 7: Cycle.js  a reactive framework

Core concepts▸ Pure Functions▸ Drivers▸ Components▸ Streams

Page 8: Cycle.js  a reactive framework

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

Page 9: Cycle.js  a reactive framework

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

Page 10: Cycle.js  a reactive framework

React-Native

React

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

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

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

Page 11: Cycle.js  a reactive framework

3.MODEL VIEW INTENT

Page 12: Cycle.js  a reactive framework

VIEW INTENT

MODEL

RENDERER

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

Page 13: Cycle.js  a reactive framework

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

Page 14: Cycle.js  a reactive framework

Cycle.js in action

Page 15: Cycle.js  a reactive framework

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

Page 16: Cycle.js  a reactive framework

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

Page 17: Cycle.js  a reactive framework

Can we useReactive Programming

in any project?

Page 18: Cycle.js  a reactive framework

THANKS EVERYONE

Q&A

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