Reactive Thinking

May the reactive be with you !

Nicolas KOKLA

Lead Dev Front-end / UX Developer

 
Init HelloWorld;

const presentation = {
  fullName: 'Nicolas KOKLA',
  birth: '1979-08-09',
}

let devSkill = {
  status: 'freelance',
  XP : '> 15 Years',
  code: {
    'JavaScript': true,
    'Node.js': true,
    'CSS': true
  },
  particularity: 'My father is a robot'
}

// :: TODO :: 
// You should update this young padawan...

Nicolas KOKLA

Lead Dev Front-end / UX Developer

@nkokla

nicolaskokla

nkokla

Le reactive quoi ?

De quoi il parle le monsieur là ?

Le Manifeste Réactif

The Reactive Manifesto

Reactive Manifesto

  • Responsive (Disponibles)

https://www.reactivemanifesto.org/fr

  • Resilient (Résilient)
  • Message-Driven
    (Orientés messages )
  • Elastic (Souples)

Crédit : oreilly.com

Ha !!!
        Okay !!!

Reactive Manifesto

https://www.reactivemanifesto.org/fr

Heu... Et après ?

Programmation réactive

Data flows for Reactive Programming

En informatique, la programmation réactive est un paradigme de programmation visant à conserver une cohérence d'ensemble en propageant les modifications d'une source réactive (modification d'une variable, entrée utilisateur, etc.) aux éléments dépendants de cette source.

Source : Wikipedia (fr)

In computing,
reactive programming is a programming paradigm
oriented around data flows and the propagation of change.

Source : Wikipedia (en)

Ha mais je connais !
C'est juste une gestion d’événement !!!!

Heu, oui...
Mais en fait non...

Event Driven

Pas mal, mais...


En informatique, la programmation événementielle est un paradigme de programmation fondé sur les événements.

Le programme sera principalement défini par ses réactions aux différents événements qui peuvent se produire, c'est-à-dire des changements d'état de variable [...].

Event driven

Source : Wikipedia (fr)

Event Driven

Event

Callback

Event driven

Event

Callback

object.on('event', callback)
// ou bien :
item.on('click', doSomthing)

jedi.on('useForce', troopers1.GoAway)
jedi.on('useForce', troopers2.GoAway)
jedi.on('useForce', troopers3.GoAway)
object.on('event', callback)
item.on('click', doSomthing)
jedi.on('useForce', trooper.GoAway)

1

2

3

Event driven

  • L'usage de Callback pousse vers l'imbrication de fonction.
  • Dépendance forte entre les sources d’événements et les cibles de callback.
  • Un risque important de 'code spaghetti'.
  • Simplicité du code (pour de petites applications)
  • Pas de propagation

Data flow

Data change propagation​... Voila, on y arrive !

Observable

Event

Callback

Observer

Le pattern Observable

Signal

Observers

Force

Signal

1

2

3

Signal

Droid

Jedi

Rebels

Observable Data Flow

Data flow

End

Observable Data Flow

// La gestion d'event classique :
something.on('event', callback)
// nous permet ceci :
something.on('signal', reportToDataflow)

import dataflow from 'dataflow'
import { planet } from 'star-wars/items'

planet.on('explode', dataflow.report('force-disruption'))

class Jedi {
  force = dataflow.suscribe(
    'force-disruption', this, this.updateState)
  state = { force }

  updateState(newState) {
    this.state = newState
    if(
        this.state.force != newState.force
        && newState.force['force-disruption']
    ) {
        console.log('I feel a great disturbance in the force')
    }
  }
}
import dataflow from 'dataflow'
import { xWing, planet } from 'star-wars/items'

xWing.on('hasDamages', dataflow.report('xwing-damage'))
planet.on('explode', dataflow.report('force-disruption'))
xWing.on('conflictEngage', dataflow.report('rebel-alert'))

1

2

3

Droid

Jedi

Rebels

Stream

https://github.com/nkokla/reactive-think-demo

Reactive Programming

Et ensuite ?

github.com/nkokla/reactive-think-demo

Exemple d’implémentation complet : 

nkokla

  • Rupture des dépendance entre les sources de signaux et leurs consommateurs
  • Organisation de code qui pousse vers une approche fonctionnel.

Reactive Programming

  • Réduction de la complexité du code des applications lourdes.
  • Approche du code plus complexe (Mais on peut utiliser de très bonnes librairies)
  • Propagation des changements (Mais parfois difficile à suivre - cf. marble diagrams)

Reactive Programming

Et ensuite ?
     Le Functional Reactive Programming

oreilly.com/ideas/reactive-programming-vs-reactive-systems

  • Oreilly - Reactive programming vs. Reactive systems

reactivemanifesto.org/

  • Manifeste Réactif

reactivemanifesto.org/fr

  • ReactiveX

reactivex.io/

mobx.js.org/

  • MobX

RxJS / RxJava / RxScala / RxSwift / Rx...

baconjs.github.io/

  • Bacon.JS

Merci à tous !

@nkokla

nicolaskokla

nkokla

Reactive Thinking

By Nicolas KOKLA

Made with Slides.com

Reactive Thinking

C'est quoi le reactive programming ? Apres pas mal de recherche pour trouver une réponse à cette question, je vais essayer de vous faire gagner du temps : "May the reactive be with you !"

  • 344

More from Nicolas KOKLA