Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Reactive
programming with
Cycle.js
HELLO!
I am Luca Mezzalira
Solutions Architect @ Massive Interactive
Google Developer Expert on Web Technologies
Community...
AGENDA
▸ Reactive programming
▸ Model - View - Intent
▸ Cycle.js
1.
REACTIVE
PROGRAMMING
PROGRAMMING PARADIGMS
FUNCTIONAL
It is a declarative
programming paradigm,
which means
programming is done
with expression...
Imperative vs Reactive
REACTIVE PROGRAMMING IS
PROGRAMMING WITH
ASYNCHRONOUS DATA STREAMS
IS REACTIVE
PROGRAMMING
REALLY SO
INTERESTING?
OBSERVER PATTERN
The observer pattern is a software design pattern in which an object,
called the subject, maintains a lis...
ITERATOR PATTERN
In object-oriented programming, the iterator pattern is a design
pattern in which an iterator is used to ...
RxJS
“BACK-PRESSURE? WHAT?!
Main obstacle when you approach for the first time
Reactive Programming is the vocabulary.
My first...
STREAMS
A stream is a sequence of ongoing events
ordered in time. It can emit three different
things: a value (of some typ...
COLD OBSERVABLES
Cold observables start running upon
subscription: the observable sequence only starts
pushing values to t...
HOT OBSERVABLES
When an observer subscribes to a hot observable
sequence, it will get all values in the stream
that are em...
OPERATORS
▸ Creating Observables
▸ Transforming Observables
▸ Filtering Observables
▸ Combining Observables
▸ Error Handli...
MARBLES DIAGRAM
rxmarbles.com
2.
MODEL VIEW
INTENT
Architectures Timeline
90s
MVP
80s
MVC
2005
MVVM
2013
FLUX
2009
DCI
2015
MVI
VIEW INTENT
MODEL
RENDERER
futurice.com/blog/reactive-mvc-and-the-virtual-dom
MVI RULES
▸ A module shouldn’t control
any other module (controller
in MVC)
▸ The only shared part between
modules are obs...
VIEW
Input: data events from the Model.
Output: a Virtual DOM rendering of the model,
and raw user input events (such as c...
INTENT
Input: raw user input events from the View.
Output: model-friendly user intention events.
INTENT
MODEL
Input: user interaction events from the Intent.
Output: data events.
MODEL
MVI PROs
▸ Better separation of concern
▸ Monodirectional flow
▸ Dependency Injection
▸ Applications become easier
to test...
3.
Cycle.js
Cycle.js
Cycle’s core abstraction is your
application as a pure function main()
where inputs are read effects (sources)
fr...
CORE CONCEPTS
▸ Objects
▸ Functions
▸ Drivers
▸ Helpers
DRIVERS
Drivers are functions that listen to
Observable sinks (their input), perform
imperative side effects, and may retu...
Cycle.js in action
thenewstack.io/developers-need-know-mvi-model-view-intent
Why not using
Reactive Programming
in any project then?
THANKS EVERYONE
Q&A
@lucamezzalira
www.lucamezzalira.com
www.londonjs.uk
mezzalab@gmail.com
Upcoming SlideShare
Loading in …5
×

Reactive programming with cycle.js

This is a presentation regarding Reactive Programming with Cycle.js and Rx.Js

Reactive programming with cycle.js

  1. 1. Reactive programming with Cycle.js
  2. 2. HELLO! I am Luca Mezzalira Solutions Architect @ Massive Interactive Google Developer Expert on Web Technologies Community Manager of London JavaScript User Group
  3. 3. AGENDA ▸ Reactive programming ▸ Model - View - Intent ▸ Cycle.js
  4. 4. 1. REACTIVE PROGRAMMING
  5. 5. PROGRAMMING PARADIGMS FUNCTIONAL It is a declarative programming paradigm, which means programming is done with expressions. In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function f twice with the same value for an argument x will produce the same result f(x) each time. IMPERATIVE It is a programming paradigm that uses statements that change a program's state. In much the same way that the imperative mood in natural languages expresses commands, an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how a program operates. REACTIVE It is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.
  6. 6. Imperative vs Reactive
  7. 7. REACTIVE PROGRAMMING IS PROGRAMMING WITH ASYNCHRONOUS DATA STREAMS
  8. 8. IS REACTIVE PROGRAMMING REALLY SO INTERESTING?
  9. 9. OBSERVER PATTERN The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.
  10. 10. ITERATOR PATTERN In object-oriented programming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers
  11. 11. RxJS
  12. 12. “BACK-PRESSURE? WHAT?! Main obstacle when you approach for the first time Reactive Programming is the vocabulary. My first suggestion is to familiarise with the domain, a lot of concepts become way easier if you understand what they mean before you start to work with them. streams, hot observables, cold observables, marbles diagram, back-pressure, operators...
  13. 13. 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
  14. 14. COLD OBSERVABLES Cold observables start running upon subscription: the observable sequence only starts pushing values to the observers when subscribe is called. Values are also not shared among subscribers.
  15. 15. HOT OBSERVABLES When an observer subscribes to a hot observable sequence, it will get all values in the stream that are emitted after it subscribes. The hot observable sequence is shared among all subscribers, and each subscriber is pushed the next value in the sequence.
  16. 16. OPERATORS ▸ Creating Observables ▸ Transforming Observables ▸ Filtering Observables ▸ Combining Observables ▸ Error Handling Operators ▸ Mathematical Operators ▸ Conditional Operators ▸ Connectable Observables Operators reactivex.io/documentation/operators.html
  17. 17. MARBLES DIAGRAM rxmarbles.com
  18. 18. 2. MODEL VIEW INTENT
  19. 19. Architectures Timeline 90s MVP 80s MVC 2005 MVVM 2013 FLUX 2009 DCI 2015 MVI
  20. 20. VIEW INTENT MODEL RENDERER futurice.com/blog/reactive-mvc-and-the-virtual-dom
  21. 21. MVI RULES ▸ 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
  22. 22. VIEW Input: data events from the Model. Output: a Virtual DOM rendering of the model, and raw user input events (such as clicks, keyboard typing, accelerometer events, etc). VIEW RENDERER
  23. 23. INTENT Input: raw user input events from the View. Output: model-friendly user intention events. INTENT
  24. 24. MODEL Input: user interaction events from the Intent. Output: data events. MODEL
  25. 25. MVI PROs ▸ Better separation of concern ▸ Monodirectional flow ▸ Dependency Injection ▸ Applications become easier to test (in particular views) ▸ All the states live inside the Model and the View is state- agnostic
  26. 26. 3. Cycle.js
  27. 27. Cycle.js Cycle’s core abstraction is your application as a pure function main() where inputs are read effects (sources) from the external world and outputs (sinks) are write effects to affect the external world. These side effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, etc.
  28. 28. CORE CONCEPTS ▸ Objects ▸ Functions ▸ Drivers ▸ Helpers
  29. 29. DRIVERS Drivers are functions that listen to Observable sinks (their input), perform imperative side effects, and may return Observable sources (their output). http://cycle.js.org/drivers.html Cycle.js DOMDriver
  30. 30. Cycle.js in action
  31. 31. thenewstack.io/developers-need-know-mvi-model-view-intent
  32. 32. Why not using Reactive Programming in any project then?
  33. 33. THANKS EVERYONE Q&A @lucamezzalira www.lucamezzalira.com www.londonjs.uk mezzalab@gmail.com

×