1. Reactive
programming with
Cycle.js

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

3. AGENDA
▸ Reactive programming
▸ Model - View - Intent
▸ Cycle.js

4. 1.
REACTIVE
PROGRAMMING

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. Imperative vs Reactive

7. REACTIVE PROGRAMMING IS
PROGRAMMING WITH
ASYNCHRONOUS DATA STREAMS

8. IS REACTIVE
PROGRAMMING
REALLY SO
INTERESTING?

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. 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. RxJS

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. 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. 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. 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. 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. MARBLES DIAGRAM
rxmarbles.com

18. 2.
MODEL VIEW
INTENT

19. Architectures Timeline
90s
MVP
80s
MVC
2005
MVVM
2013
FLUX
2009
DCI
2015
MVI

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

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. 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. INTENT
Input: raw user input events from the View.
Output: model-friendly user intention events.
INTENT

24. MODEL
Input: user interaction events from the Intent.
Output: data events.
MODEL

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. 3.
Cycle.js

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. CORE CONCEPTS
▸ Objects
▸ Functions
▸ Drivers
▸ Helpers

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. Cycle.js in action

31. thenewstack.io/developers-need-know-mvi-model-view-intent

32. Why not using
Reactive Programming
in any project then?

33. THANKS EVERYONE
Q&A
@lucamezzalira
www.lucamezzalira.com
www.londonjs.uk
mezzalab@gmail.com