├── .gitignore
├── README.md
├── code
├── mobx0.js
├── mobx1.js
├── package.json
├── rxjs0.js
├── rxjs1.js
└── yarn.lock
├── diagrams
├── derivationGraph
│ ├── derivationGraph.pdf
│ └── derivationGraph.xml
└── rxjsCode
│ ├── rxjsCode.pdf
│ └── rxjsCode.xml
├── images
├── bg.jpg
├── dazn.png
├── me.jpg
└── me1996.jpg
├── live-coding-notes.md
├── slides.md
├── slides.pdf
├── title.png
└── videos
└── dazn.mp4
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | .DS_Store
3 | node_modules
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RxJS is far from dead, long live MobX
2 |
3 | Slides and example code of the talk
4 |
5 | ## Slides
6 | The slides are available as _pdf_ [slides.pdf](slides.pdf) or _markdown_ [slides.md](slides.md)
7 |
8 | ## Live Coding
9 | In the talk there are two section of live coding.
10 | "Before" is what we started with, and "after" is where we arrived.
11 |
12 | ### Live coding: MobX
13 | - before: [mobx0.js](code/mobx0.js)
14 | - after: [mobx1.js](code/mobx1.js)
15 |
16 | ### Live coding: RxJS
17 | - before: [rxjs0.js](code/rxjs0.js)
18 | - after: [rxjs1.js](code/rxjs1.js)
19 |
20 | 
21 |
22 |
23 | ## Tools
24 | What I used for these slides
25 |
26 | - Slides: [Deckset](https://www.decksetapp.com/)
27 | - Draws: [draw.io](https://www.draw.io)
28 | - Live Coding: Vim + [heaving configuration](https://github.com/maxgallo/dotfiles) + [nodemon](https://github.com/remy/nodemon) for hot reloading
29 |
--------------------------------------------------------------------------------
/code/mobx0.js:
--------------------------------------------------------------------------------
1 | const { observable, autorun } = require('mobx');
2 |
3 | const album1 = observable({
4 | title: "OK Computer",
5 | year: 1997,
6 | playCount: 0
7 | });
8 |
9 | autorun(() => { console.log(`Album 1 PlayCount: ${album1.playCount}`)});
10 |
11 | console.log('\n reactions \n');
12 |
13 | album1.playCount = 2;
14 | album1.playCount = 20;
15 |
16 |
--------------------------------------------------------------------------------
/code/mobx1.js:
--------------------------------------------------------------------------------
1 | // const { observable, autorun } = require('mobx');
2 | const accessedObservables = [];
3 | const derivationGraph = {};
4 |
5 | function observable(targetObject){
6 | const observableObject = {}
7 |
8 | const unique = Math.random()
9 | function getObservableId(key){
10 | return unique + key;
11 | }
12 |
13 |
14 | Object.keys(targetObject).forEach(objectKey => {
15 | Object.defineProperty(
16 | observableObject,
17 | objectKey,
18 | {
19 | get(){
20 | accessedObservables.push(getObservableId(objectKey))
21 | return targetObject[objectKey];
22 | },
23 | set(value){
24 | targetObject[objectKey] = value;
25 | derivationGraph[getObservableId(objectKey)].forEach(runner => {
26 | runner()
27 | })
28 | }
29 | }
30 | )
31 | })
32 |
33 |
34 | return observableObject;
35 | }
36 |
37 | function autorun(runner){
38 | accessedObservables.length = 0;
39 | runner();
40 | console.log(accessedObservables);
41 | accessedObservables.forEach(objectId => {
42 | derivationGraph[objectId] = derivationGraph[objectId] || [];
43 | derivationGraph[objectId].push(runner)
44 | });
45 | }
46 |
47 | const album1 = observable({
48 | title: "OK Computer",
49 | year: 1997,
50 | playCount: 0
51 | });
52 |
53 | const album2 = observable({
54 | title: "In Rainbows",
55 | year: 2020,
56 | playCount: 0
57 | });
58 |
59 | autorun(() => { console.log(`Album 1 PlayCount: ${album1.playCount}`)});
60 | autorun(() => { console.log(`Album 2 PlayCount: ${album2.playCount}`)});
61 |
62 | console.log('\n reactions \n');
63 |
64 | album1.playCount = 2;
65 | album1.playCount = 20;
66 |
67 | album2.playCount = 2000
68 |
69 |
70 | console.log('is sync?')
71 |
--------------------------------------------------------------------------------
/code/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code",
3 | "version": "1.0.0",
4 | "description": "Code examples for Talk",
5 | "main": "index.js",
6 | "author": "hello@maxgallo.io",
7 | "license": "MIT",
8 | "dependencies": {
9 | "mobx": "^5.5.0",
10 | "rxjs": "^6.3.3"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/code/rxjs0.js:
--------------------------------------------------------------------------------
1 | const { from } = require('rxjs');
2 | const { map, filter } = require('rxjs/operators');
3 |
4 | const observable = from([1, 2, 3, 4, 5])
5 | .pipe(
6 | map(x => x + 1),
7 | filter(x => x % 2 === 0),
8 | map(x => x - 1),
9 | );
10 |
11 | observable.subscribe(
12 | val => console.log('odd: ', val),
13 | error => console.error(error),
14 | () => console.log('Completed!'),
15 | );
16 |
--------------------------------------------------------------------------------
/code/rxjs1.js:
--------------------------------------------------------------------------------
1 | // const { from } = require('rxjs');
2 | // const { map, filter } = require('rxjs/operators');
3 |
4 | function from(initialData){
5 | return {
6 | pipe: (...pipeFunctions) => {
7 | return {
8 | subscribe: (onNext, onError, onComplete) => {
9 |
10 | const dataObservable = createObservable(x => initialData.forEach(x))
11 |
12 | let currentObservable = dataObservable;
13 |
14 | pipeFunctions.forEach(pipeFunc => {
15 | currentObservable = pipeFunc(currentObservable)
16 | })
17 |
18 | currentObservable.subscribe(onNext);
19 | onComplete();
20 | }
21 | }
22 | }
23 | }
24 | }
25 |
26 | function createObservable(operator) {
27 | return {
28 | subscribe: innerOnNext => {
29 | operator(innerOnNext)
30 | }
31 | }
32 | }
33 |
34 | function map(mapFunction){
35 | return sourceObservable => {
36 | const currentObservable = createObservable(destinationNext => {
37 | sourceObservable.subscribe(value => {
38 | const newValue = mapFunction(value)
39 | destinationNext(newValue);
40 | })
41 | })
42 | return currentObservable;
43 | }
44 | }
45 |
46 | function filter(filterFunction){
47 | return sourceObservable => {
48 | const currentObservable = createObservable(destinationNext => {
49 | sourceObservable.subscribe(value => {
50 | if(filterFunction(value)){
51 | destinationNext(value);
52 | }
53 | })
54 | })
55 | return currentObservable;
56 | }
57 | }
58 |
59 | const observable = from([1, 2, 3, 4, 5])
60 | .pipe(
61 | map(x => x + 1),
62 | filter(x => x % 2 === 0),
63 | map(x => x - 1),
64 | );
65 |
66 | observable.subscribe(
67 | val => console.log('odd: ', val),
68 | error => console.error(error),
69 | () => console.log('Completed!'),
70 | );
71 |
--------------------------------------------------------------------------------
/code/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | mobx@^5.5.0:
6 | version "5.5.0"
7 | resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.5.0.tgz#a29f6a7526eed28edcd3f0e921a1edaa8bb22575"
8 | integrity sha512-rD0Hsv9XtjS6axavvPX/XzWTeICRiH3bLR1L+MrJ7HOlx1hmSdWNzu8rQQ+1IkTiyJechRyGzs2tUgLRmEofJg==
9 |
10 | rxjs@^6.3.3:
11 | version "6.3.3"
12 | resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"
13 | integrity sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==
14 | dependencies:
15 | tslib "^1.9.0"
16 |
17 | tslib@^1.9.0:
18 | version "1.9.3"
19 | resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
20 | integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
21 |
--------------------------------------------------------------------------------
/diagrams/derivationGraph/derivationGraph.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/diagrams/derivationGraph/derivationGraph.pdf
--------------------------------------------------------------------------------
/diagrams/derivationGraph/derivationGraph.xml:
--------------------------------------------------------------------------------
1 | 5Zpbc6IwGIZ/jbedkHDysmrtXuzOdrYze7iMECFbJEyIp/31GyRREWrdqgG7veiQNxDI+yQfyYc9NJytHjnO4i8sJEkPgnDVQ6MehH1oyf+FsC4F2/FKIeI0LCWwE57pH1KKllbnNCS50kpJMJYImlXFgKUpCURFw5yzZfW0KUvCipDhiNSE5wAndfUHDUWsVBeAXcUnQqNY39rWNRMcvESczVN1wx5EAHgAB2X1DOvG1Pl5jEO23JPQQw8NOWOiPJqthiQpvK36Nn6ldvvgnKTilAtgecECJ3PV96+TnPAFnkgvIPi+0csnFWttj2xCkpCFwTKmgjxnOChqlnIsSC0Ws0SWLHmI86zEM6UrIu84mNIkGbKE8U1D6L4/tB8GUs8FZy9E16QsJVtRAyjam7JUPKvnaOiqkhaEC7Lak1TXHwmbEcHX8hRVC93yCjVMfacsLnfMfcUp3qOtNaxGWbRtd2e0PFBeN/tud9H3zWAdD+7HNasPYfhSubz/CJoDYLl1e0MZBFRRDcHNTC4cHIGqw7LPfP1zv/BLFX4TIdYqpOG5YFJiXMQsYilOPjOWNRpq1yGFmPjT4CikVxHkbM4D1S3VUYF5RNRZqJSKDh/FxEmCBV1Uo+JZrntXcB3cOTfiu92a7/Yt+74NVyf57tV9h6353j/L91vwtt+at/6FxvQdgE51XNsW0sIT4VQ+GuGqhc6FGb+OxG0NifP/hJl+h16rOsCd63tp9Z7zwDdsffOcm88ydX/3DDytTQs1Ljq42J9O8LRxcX+4/M80kuI5aBopwK+iePceAAJzewC3xmXIZtlcSBcheOJMdlrIBt1E3nMw4fIoEttOXwWV64OBfyaqorx35Xjzd1WEln/AUJcNMPRqDL8RHAjKUpPgCotd97RERhOzC0BANqpAsJBtDILfZQj/NnuuQAJ65kJa/0ZC2tGZ0RS9TnghFUuFiOOQkl0T6j5aHlFOynGJRgTn4jLAt9trPfU8YAy4Dbq4uDCWwXX0C0BZ7yFzzlsddv7aPiPLoNEX2t20mqrN5U5E3BffpmRFkOA8p4GWxzTZPWyoT1L9koqqB6fufRxleiX12FqeRr8Nbzwp0DpAqzWAHyN5bBSg1QAQtAbwvLScyTD5lvsnQnw3JKe1HJ59qQ+SnU1nG52AsIFtexPwY3z2NAoQdWoNc6FvTa0l2PcC7NsJ9rY5tzhR6/mTDuzpupKqP9wEWn1zm0CnnufoZmar68l6169ChJ65PLFTT5l0LVG8fdUZSBT79kHeEEJzKGDnUZjM2fv2wScs12Boq38f7nBoOzpBzsjcXwCip39/oueT418LoizufqS9qdv7JTx6+As=
--------------------------------------------------------------------------------
/diagrams/rxjsCode/rxjsCode.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/diagrams/rxjsCode/rxjsCode.pdf
--------------------------------------------------------------------------------
/diagrams/rxjsCode/rxjsCode.xml:
--------------------------------------------------------------------------------
1 | 7VpNl5owFP017iHhy+WM1XbRaXuOi64zkIHMBMIJcdT++gaTgBC1tjJ6psMsRrj55N13Lw90Amf55jNHZfbAEkwnwEk2E/hpAsAUuPJ/DWwV4PmhAlJOEgU5LbAkv7ACXYOuSIIrjSlIMEYFKbtgzIoCx6KDIc7ZutvtidGkA5QoxRawjBG10Z8kEZlGA8dpG75gkmZmac+0PKL4JeVsVegFJwA6TuigWDXnyEym+1cZSth6D4LzCZxxxoQ6yjczTOvYduO2ONLabJzjQpwzIIr0PsTWXDxOZCz0acEK+XG/uyBcD3Hk2fMqLzVngTzNRE7loSsPK4G4uKsJaMfusAWhVI/GRWJ6xBRVFYkVqLvU0zxjIbZ6BbQSTEKMi4ylrED0K2NlsxxnL3jGKOO7rctQL+7vFk2L4c6TyBMrxALlhNYpOWO5XBY4S1RU8uNhqTvoNaEZsDf1YvdX76REMRH1LLC+HBW+OmZHGdBQxVY81r0iv+FaagizHAu+lX04pkiQ1+5cSGdz2vRrhv5gRK4CHCO8IFBDtO6g35tCcpFioUe1aSEP9rbRQrtkOZw44VTN/IroCptc72VSN23WGRF4KaNXt66lb/Rz5zwyYc2NzBXTU6fZYPzqy8Jc4M1pSm369AAIow4Nvg7NuvUS6HkKy/ZsBITgOOMdrk4QEzkjMceI8SPQIcYF5zITDcCMH5z02tbi5i06Wq+VAX/rtZo5ZX2a4wvd91zGgSXFpdoYcL4/Vpi/okdJspUUlMpCB/9ZmagqVfXzRDZ1inTkJwN3N51583uLrSY79olyDQ96H8djaynwqNxcp3s7CqClNuNW+2Iz2CWR96zIf8MbcaW41+kaBMfi3o1yn4eoyfOLQg+96a1Cb2r90eauanPQtjnvSjYHLbHNVny32evorUfKSZ+LDiiwxJzIi8a83gIpUp1HA8hQ7u1mMjz9ZDfK8B9luK85f2qLLgBnV6WDC9G3H8reW8Fx2YNX767nev7V9BbYz13vruS47OFqCm4XfNcO7Wh2w5qdMbaO2TlnZ8ngZmf283+WHRdJ0Qvh7aQYWbRYFHzU9089h4Suxcrht08mhJfwEnqjRb61RYa+bZFhdDuLNPv5qPVgvySRDnc1HwyDD14PRtC/XfDHd1Bvb3bRAbMLbmh2duEx1oM6NG73Rfw1pRi963uQ9X2/JEF8P/QTgEG9Erp2aTgQQfK0/XmJ+uK//Q0PnP8G
--------------------------------------------------------------------------------
/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/images/bg.jpg
--------------------------------------------------------------------------------
/images/dazn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/images/dazn.png
--------------------------------------------------------------------------------
/images/me.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/images/me.jpg
--------------------------------------------------------------------------------
/images/me1996.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/images/me1996.jpg
--------------------------------------------------------------------------------
/live-coding-notes.md:
--------------------------------------------------------------------------------
1 | # Live Coding notes
2 |
3 | - Do not copy and paste, NEVER
4 | - Real code on the side with iPad
5 | - Keep full implementation opened in another tab --> Autocompletion
6 | - VIM
7 | - ALEDisable
8 |
9 | ## MobX
10 |
11 | 1. `autorun` tracks all the accesses and store the reaction
12 | 2. the `setters` will trigger all the reactions
13 |
14 | ## RxJS
15 |
16 | 1. `from` as first observable
17 | 2. abstract `createObservable` function
18 | 3. `pipe` with 1 `map`
19 | 4. multiple `map`s
20 | 5. multiple `map`s & `filter`
21 |
--------------------------------------------------------------------------------
/slides.md:
--------------------------------------------------------------------------------
1 | # [fit] __RxJS__ is far from dead
2 | # [fit] Long live __MobX__
3 |
4 |
5 | [.footer: @_maxgallo ]
6 | ^ - rise your hand if you use RxJS in production
7 | - rise your hand if you use MobX in production
8 |
9 | ---
10 |
11 | 
12 |
13 | # Hi 👋🏻
14 | #[fit] I'm __Max__* Gallo
15 |
16 | _About me:_ 🍝 💻 🇬🇧 🎶 🏍 📷 ✈️ ✍️
17 |
18 | _Principal Engineer_ @ DAZN
19 |
20 |
21 |
22 | _twitter:_ @\_maxgallo
23 | _more:_ maxgallo.io
24 |
25 | [.footer: or __Massimiliano__, if you like italian spelling challenges]
26 |
27 | ---
28 |
29 | #[fit] Introducing __MobX__
30 |
31 |
32 | > a battle tested, simple and scalable
33 | > state management library
34 | -- Michel Weststrate
35 |
36 | ---
37 |
38 | #[fit] Introducing __RxJS__
39 |
40 |
41 | _Part of the_ Reactive X _Family_
42 |
43 | > API for asynchronous programming
44 | with observable streams
45 |
46 | ---
47 |
48 | [.build-lists: true]
49 |
50 | #[fit] _Here's_ __the plan__
51 |
52 |
53 | 1. _Reinventing_ MobX
54 | - _Reinventing_ RxJS
55 | - All _for_ One _and_ One _for_ All
56 |
57 | ---
58 |
59 | 
60 |
61 | # [fit] Reinventing
62 | ## [fit] the wheel
63 |
64 | ## _by_
65 |
66 | # __taking things apart__
67 |
68 | ^ - This is me when I was six
69 | - I like to understand things by taking them apart
70 | - and watch inside to understand how they work
71 |
72 | ---
73 |
74 | 
75 | #[fit] Reinventing __MobX__
76 |
77 | ---
78 |
79 | # __MobX__ code
80 |
81 | ```javascript
82 | const { observable, autorun } = require('mobx');
83 |
84 | const okComputer = observable({
85 | title: "OK Computer",
86 | year: 1997,
87 | playCount: 0
88 | });
89 |
90 | autorun(() => {
91 | console.log(`Ok Computer PlayCount: ${okComputer.playCount}`)
92 | }); // Ok Computer PlayCount: 0
93 |
94 | okComputer.playCount = 2; // Ok Computer PlayCount: 2
95 | okComputer.playCount = 20; // Ok Computer PlayCount: 20
96 | ```
97 |
98 | ---
99 |
100 | [.build-lists: true]
101 | # __MobX__ code _first impressions_
102 |
103 |
104 |
105 | - Syntax _is close to the language_
106 | - _No explicit_ Subscription
107 | - transparent _reactive programming_
108 |
109 | ---
110 |
111 | 💡 _let's reinvent_ MobX
112 |
113 | ---
114 |
115 | [.build-lists: true]
116 | # __MobX__ *from the* inside
117 |
118 | - _Doesn't care about the_ past
119 | - _act as a_ proxy in front of JavaScript
120 | - _All reactions are_ Synchronous
121 | - _use_ Derivation Graph
122 |
123 | ^ Meta programming with ES6 Proxies
124 |
125 | ---
126 |
127 | # __MobX *Deep Dive*__ Computed Properties
128 |
129 | [.code-highlight: 9-14]
130 |
131 | ```javascript
132 | const { observable, autorun, computed } = require('mobx');
133 |
134 | const okComputer = observable({
135 | title: "OK Computer",
136 | year: 1997,
137 | playCount: 0
138 | });
139 |
140 | const allInfo = computed(() => okComputer.title + okComputer.playCount);
141 |
142 | autorun(() => { console.log(allInfo) }); // Ok Computer0
143 |
144 | okComputer.playCount = 2; // Ok Computer2
145 | okComputer.playCount++; // Ok Computer3
146 | ```
147 |
148 | ^ - Computed values are observables
149 |
150 | ---
151 |
152 | # __MobX *Deep Dive*__ Derivation Graph
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 | _Creation_ Flow _<---_ __vs__ _---> Reactions_ Flow
161 |
162 | 
163 |
164 | ^ - First time from right to left
165 | then left to right for changes
166 |
167 | ---
168 |
169 | 
170 | #[fit] Reinventing __RxJS__
171 |
172 | ---
173 |
174 | # __RxJS__ code
175 |
176 | ```javascript
177 | const { from } = require('rxjs');
178 | const { map, filter } = require('rxjs/operators');
179 |
180 | const observable = from([1, 2, 3, 4, 5])
181 | .pipe(
182 | map(x => x + 1),
183 | filter(x => x % 2 === 0),
184 | map(x => x - 1),
185 | );
186 |
187 | observable.subscribe(
188 | val => console.log('odd: ', val),
189 | error => console.error(error),
190 | () => console.log('Completed!'),
191 | );
192 | // odd: 1, odd: 3, odd: 5, Completed!
193 | ```
194 | ---
195 |
196 | [.build-lists: true]
197 | # __RxJS__ code _first impressions_
198 |
199 | - Syntax _is library specific_
200 | - Explicit Subscription
201 | - Observable _[TC39 stage 1](https://github.com/tc39/proposals#stage-1)_
202 | - Pipeline operator _[TC39 stage 1](https://github.com/tc39/proposals#stage-1)_
203 |
204 | ^ MutationObserver is a method for observing and reacting to changes to the DOM.
205 | It's already available in many browser.
206 |
207 | ---
208 |
209 | 💡 _let's reinvent_ RxJS
210 |
211 | ---
212 |
213 | # __RxJS *Operators*__
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 | _Operator_ 1 _-->_> _Operator_ 2 _-->_> _Operator_ 3
222 |
223 | 
224 |
225 | ---
226 |
227 | [.build-lists: true]
228 | # __RxJS__ *from the inside*
229 |
230 |
231 | - _Made of_ reusable parts > **Streams**
232 | - custom operators
233 | - Lazy evaluation
234 | - _Offer a_ Standard contract _between parts_
235 | - Synchronous _by default_ > **Schedulers**
236 |
237 |
248 |
249 | ---
250 |
251 | # __RxJS *Deep Dive*__ Schedulers
252 |
253 | > Schedulers in RxJS are things that control the order of event emissions (to Observers) and the speed of those event emissions.
254 | -- André Staltz
255 |
256 |
257 |
258 | Queue __*/*__ Asap __*/*__ Async __*/*__ AnimationFrame __*/*__ VirtualTime
259 |
260 | ---
261 |
262 | 
263 | #[fit] All _for_ One _and_ One _for_ All
264 |
265 | ---
266 |
267 | | | __Paradigm__ | __Execution__ | __Syntax__ | __Observables__ |
268 | | :---: | :---: | :---: | :---: | :---: |
269 | | __MobX__ | Transparent _Reactive Programming_ | _Sync_ | _Plain Javascript_ | _Observable Values_ |
270 | | __RxJS__ | Event Stream _Functional Reactive Programming_ | _Sync &
Async_ | _Library Specific*_ | _Observable Events_ |
271 |
272 | ---
273 |
274 | [.build-lists: true]
275 |
276 | #[fit] When _should I use_ __MobX__ ?
277 |
278 | - learning curve
279 | - values, _not events_
280 | - _Easy representation of_ application state
281 | - state = __derivation (__ _previous State_ __)__
282 |
283 | ---
284 |
285 | [.build-lists: true]
286 |
287 | #[fit] When _should I use_ __RxJS__ ?
288 |
289 |
290 |
291 | - events & values
292 | - _work with_ time
293 | - low-level control
294 |
295 | ---
296 |
297 | [.build-lists: true]
298 | #[fit] Can _I use_ __both__ ?
299 |
300 | __Yes!__
301 |
302 |
303 | 1. __*RxJS*__ _handles an_ Heavy Task
304 | 2. _it changes the_ Application State, _managed by_ __*MobX*__
305 | 3. Reaction: _the view is updated_
306 |
307 | ---
308 |
309 | ### [fit] Can _I use_ __both__ ?
310 | #[fit] __real life__
311 | #[fit] __example__
312 |
313 | Application State > __MobX__
314 |
315 | Scroll based animations > __RxJS__
316 |
317 | 
318 |
319 | ---
320 |
321 | ## __Discover more__ _about_ [MobX](https://github.com/mobxjs/mobx) _&_ [RxJS](https://github.com/ReactiveX/rxjs/) 📖
322 |
323 | - [Transparent Reactive Programming (meteor)](https://github.com/meteor/docs/blob/version-NEXT/long-form/tracker-manual.md)
324 | - [TFRP Discussion](https://github.com/mobxjs/mobx/issues/220)
325 | - [MobX in-depth explanation __Michel Weststrate__](https://hackernoon.com/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254)
326 | - [MobX autorun runtime subscription] (https://github.com/mobxjs/mobx/issues/248)
327 |
328 | - [Reactive Programming Introduction __André Stalz__](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
329 | - [Building Observables __Ben Lesh__](https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87)
330 | - [Building yur own Observable __Todd Motto__](https://toddmotto.com/rxjs-observables-observers-operators)
331 | ```
332 |
333 | ---
334 |
335 | #[fit] Thank __you__
336 |
337 |
338 |
339 | _slides_ [github.com/maxgallo/talk-rxjs-mobx](https://github.com/maxgallo/talk-rxjs-mobx)
340 |
341 | _twitter_ @\_maxgallo
342 | _other_ maxgallo.io
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
--------------------------------------------------------------------------------
/slides.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/slides.pdf
--------------------------------------------------------------------------------
/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/title.png
--------------------------------------------------------------------------------
/videos/dazn.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxgallo/talk-rxjs-mobx/4b01c4e845390eb85a84539bce5a20de60f8630f/videos/dazn.mp4
--------------------------------------------------------------------------------