Reactive programming will be the next hot topic of the decade. Understanding how this paradigm works and when to use it will greatly benefit your asynchronous applications. Model-View-Intent (MVI) is a new architecture made for reactive programming leveraging the power and flexibility of observables to empower you to create solid and well-encapsulated architectures. Luca Mezzalira explores reactive programming and explains how you can structure an application in pure reactive programming using Cycle.js, React, and hyperscript. Luca also demonstrates how MVI architecture helps to structure your frontend reactive applications using Cycle.JS and React or hyperscript for rendering your views.

1. an architecture for
reactive programming
MVI

2. HELLO!
I am Luca Mezzalira
Solutions Architect @ DAZN
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. PASSIVE REACTIVE
BA BA

7. Imperative vs Reactive

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

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

10. 2.
MODEL VIEW
INTENT

11. VIEW MODELPRESENTER
https://en.wikipedia.org/wiki/Model-view-presenter

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

13. VIEWInput: 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

14. INTENTInput: raw user input events from the View.
Output: model-friendly user intention events.
INTENT

15. MODELInput: user interaction events from the Intent.
Output: data events.
MODEL

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

17. 3.
Cycle.js

18. Cycle.js

19. Core concepts
▸ Pure Functions
▸ Streams
▸ Components
▸ Drivers

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

21. Cycle Diversity
▸ Refactored in Typescript
▸ It accepts different type of
reactive libraries (xstream,
rxjs 4 and 5, most)
▸ Integration with Snabbdom
for DOM rendering by default
https://github.com/cyclejs/cyclejs/releases/tag/v7.0.0

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

23. Cycle.js in action

24. Shall we use
Reactive Programming
in any project?

25. @lucamezzalira
github.com/lucamezzalira
www.lucamezzalira.com
mezzalab@gmail.com