Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactive Programming et React
Search
fdecampredon
February 18, 2016
Technology
3
130
Reactive Programming et React
http://www.meetup.com/fr-FR/ReactJS-Paris/
fdecampredon
February 18, 2016
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
870
Going Reactive with React
fdecampredon
1
460
Introduction à ReactJS
fdecampredon
0
51
Other Decks in Technology
See All in Technology
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Featured
See All Featured
How GitHub (no longer) Works
holman
305
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Code Reviewing Like a Champion
maltzj
517
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Web Components: a chance to create the future
zenorocha
307
41k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
A better future with KSS
kneath
231
17k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Transcript
Reactive Programming and React @fdecampredon ReactJS Paris - 18/02/2016
Qu’est-ce que la Reactive programming ?
Qu’est-ce que la Reactive programming ? Réactif ?
React !== Reactive Programming
Qu’est-ce que la Reactive programming ?
Un peu compliqué …
« In the Interactive pattern, module X defines which other
modules X affects. In the Reactive pattern, module X defines which other modules affect X.» André Staltz @andrestaltz
Interactive vs Reactive Interactive Reactive
Dans la programmation interactive, on expose les modules de notre
application « into the wild »
Reactive programming avec RxJS
RxJS • Observable • Operators • Scheduler
Observable « Pushed Based Collection »
« The idea of futures value — Maybe » Paul
Taylor @trxcllnt
Observable SINGLE MULTIPLE PULL Value Array<Value> PUSH Promise<Value> Observable<Value>
Observable Une « Promise » qui « push » de
multiples values
« Observable is a function that, when invoked, returns 0
- ∞ values between now and the end of times » Paul Taylor @trxcllnt
Operators Transforme notre « Push based collection »
Operators Transforme notre « push based collection » comme on
transforme un array
Operators
« A scheduler controls when a subscription starts and when
notifications are published » RxJS Doc Schedulers
Schedulers Contrôle quand les valeurs sont « pushed »
Tout peut devenir un Observable ! Dom events Http request
Back to React
Events management avec React
A simple React component : What’s happening ? User click
on the button `onButtonClick` handler State update Re-rendering
Angular version User click on the button `onButtonClick` handler State
update Re-rendering What’s happening ?
Backbone version : User click on the button `onButtonClick` handler
State update Re-rendering What’s happening ?
It’s all the same
C’est parce que c’est simple !
A naive drag implementation
Vraiment ?
Problèmes… • Logique fragmentée • Des états intermédiaires de partout
• La Relation entre l’état du composant et les « user inputs » n’est pas explicite.
RxJS + React = <3
Drag with RxJS State
• Cohérent: Toute la logique au même endroit • Les
états intermédiaires deviennent implicites • On exprime de manière claire la relation entre l’état du composant et les « user inputs » Avantages
React + RxJS à la mano
Ca marche, mais c’est un peu verbeux …
rx-react A collection of helpers for working with React and
RxJS
rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin
»: Bind l’état d’un component au valeur « pushed » par un Observable • And more …
« FuncSubject »: Callable Subject • Un Sujet et une
Fonction • Invoquer la function == invoquer la méthode « onNext » • Utilisé comme Event handler, méthode de lifecycle, référence…
« StateStreamMixin » Bind l’état d’un composant à un
observable • Quand le composant est « monté » la méthode `getStateStream`est appelée • Chaque fois que l’observable push une valeur l’état est mis à jour • La Subscription est automatiquement nettoyée quand le composant est « unmounted »
rx-react with ES6 class • RxReact.Component implemente le `StateStreamMixin` (entre
autre …) • Malheureusement basé sur l’héritage :/
react-rx-component by Andrew Clark @acdlite « Create smart components using
RxJS observables »
react-rx-component • Un Higher order « smart » component implémente
la logique • Un « dumb » component transforme les props en virtual dom
Let’s Flux
Classic flux store : • Le dispatcher « push »
des actions dans le temps • Les Stores agrégent les actions et « push » les résultats intermédiaires • Ça vous dit quelque chose ?
Et si Flux n’était qu’une association d’Observable ?
Flux store as observable • le dispatcher est un observable
• Une store n’est que le résultat d’une opération « scan » sur le dispatcher • Lest composants peuvent bind leurs états aux stores.
• React n’est pas …. Réactif :D • La «
Reactive programming » c’est simple ! (Ou presque) • RxJS + React = <3 Conclusion
François de Campredon @fdecampredon https://github.com/fdecampredon/ Questions ? rx-react: https://github.com/fdecampredon/rx-react/ react-rx-component:
https://github.com/acdlite/react-rx-component/ RxJS: https://github.com/Reactive-Extensions/RxJS