├── .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 | ![Title](title.png) 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 | ![right](images/me.jpg) 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 | ![right](images/me1996.jpg) 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 | ![fill](images/bg.jpg) 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 | ![original 150%](diagrams/derivationGraph/derivationGraph.pdf) 163 | 164 | ^ - First time from right to left 165 | then left to right for changes 166 | 167 | --- 168 | 169 | ![fill](images/bg.jpg) 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 | ![original 150%](diagrams/rxjsCode/rxjsCode.pdf) 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 | ![fill](images/bg.jpg) 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 | ![right fit autoplay mute loop](videos/dazn.mp4) 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 --------------------------------------------------------------------------------