Григорий Шехет "Introduction in Reactive Programming with React"
1 like839 views
The document introduces reactive programming with React and discusses how it diverges from true reactive principles. It explores concepts such as observables, functional reactive programming (FRP), and the use of observable patterns in state management for React applications. The conclusion emphasizes the importance of type safety, expressiveness in state management, and the relevance of using TypeScript for better documentation and reliability.
![.scan is the same as .reduce
[1, ..., n].reduce(
(acc, curr) => acc + curr,
0
)](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-69-320.jpg)
![.combineLatest 1 32 4
interval
5
1 11 1
mapTo
1
1
startWith
1 2
scan
0
Observable
.combineLatest(
Observable
.interval(1000)
.mapTo(1)
.startWith(0),
increment.view(x => x.isRunning)
)
.scan((acc, [curr, isRunning]) =>
isRunning ? acc + curr : acc, 0
)
false true
isRunning
true
combineLatest
1 11 1 10](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-88-320.jpg)
![How does it work? 1 32 4
interval
5
1 11 1
mapTo
1
1
startWith
1 2
scan
0
Observable
.combineLatest(
Observable
.interval(1000)
.mapTo(1)
.startWith(0),
increment.view(x => x.isRunning)
)
.scan((acc, [curr, isRunning]) =>
isRunning ? acc + curr : acc, 0
)
false true
isRunning
true
combineLatest
1 11 1 10](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-89-320.jpg)
![How does it work? 1 32 4
interval
5
1 11 1
mapTo
1
1
startWith
1 2
scan
0
Observable
.combineLatest(
Observable
.interval(1000)
.mapTo(1)
.startWith(0),
increment.view(x => x.isRunning)
)
.scan((acc, [curr, isRunning]) =>
isRunning ? acc + curr : acc, 0
)
false true
isRunning
true
combineLatest
1 11 1 10](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-90-320.jpg)
![How does it work? 1 32 4
interval
5
1 11 1
mapTo
1
1
startWith
1 2
scan
0
Observable
.combineLatest(
Observable
.interval(1000)
.mapTo(1)
.startWith(0),
increment.view(x => x.isRunning)
)
.scan((acc, [curr, isRunning]) =>
isRunning ? acc + curr : acc, 0
)
false true
isRunning
true
combineLatest
1 11 1 10](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-91-320.jpg)
![How does it work? 1 32 4
interval
5
1 11 1
mapTo
1
1
startWith
1 2
scan
0
Observable
.combineLatest(
Observable
.interval(1000)
.mapTo(1)
.startWith(0),
increment.view(x => x.isRunning)
)
.scan((acc, [curr, isRunning]) =>
isRunning ? acc + curr : acc, 0
)
false true
isRunning
true
combineLatest
1 11 1 10](https://image.slidesharecdn.com/random-170422105441/85/Introduction-in-Reactive-Programming-with-React-92-320.jpg)
Григорий Шехет "Introduction in Reactive Programming with React"
- 1. Introduction to Reactive Programming with React Gregory Shehet
- 2. • Software Engineer at • Front-End Digest on • Software Engineer at • Front-End Digest on • Mob-X contributor Gregory Shehet @AGambit95
- 3. Grammarly
- 4. Introduction to Reactive Programming with React
- 6. Try to code something 😡 Pain 😡
- 7. Update state of React App
- 8. Architecture? 😮 In the Front-End World? 🌍
- 10. React is not Reactive !==
- 11. 🚀Not about real reactive 🚀 ‼Later‼
- 12. What is Reactive UI? let name = 'Gregory' const App = () => { <div>{ name }</div> }
- 13. What is Reactive UI? let name = 'Gregory' const App = () => { <div>{ name }</div> } name = 'Ignat'
- 14. What is Reactive UI? let name = observable('Gregory') const App = () => observer(() => <div>{ name }</div> ) name = 'Ignat'
- 15. ✨ But a lot of Magic ✨
- 16. Treasure hunt in the land of Reactive frameworks https://youtu.be/muZG_sQLIG4 👍
- 17. • React for UI • Logs actions • Observable • Observables + React = Reactive View Conclusion: Back to React
- 18. What next? Why am I here?
- 19. Focal Type safe, expressive and composable state management for React applications.
- 21. • React for UI • Logs actions • Observable • Observables + React = Reactive View Why Focal?
- 22. • React for UI • Logs actions (subscribe + devtool will be soon) • Observable • Observables + React = Reactive View Why Focal? And…
- 23. • React for UI • Logs Actions • Observable (Atom and Lens) • Observables + React = Reactive View • Type Safe • Power of Rx.JS • React utils Why Focal?
- 25. Why TypeScript? • Better documentation • Better autocomplete • More reliable libraries • Typed programming matters
- 26. What about FRP?
- 27. What about FRP? What is FRP?
- 28. What is most important in our applications? Any ideas?
- 29. What is most important in our applications? Events
- 30. What is FRP? Functional reactive programming (FRP) is a programming paradigm for reactive programming (asynchronous dataflow programming) using the building blocks of functional programming (e.g. map, reduce, filter). @ Wikipedia
- 31. What is FRP? Functional reactive programming (FRP) is a programming paradigm for reactive programming (asynchronous dataflow programming) using the building blocks of functional programming (e.g. map, reduce, filter). @ Wikipedia
- 32. Captain Obvious: Excel Example
- 33. Observables
- 34. Excel Example
- 35. Streams A 2 B 1
- 42. Streams A 2 5 B 76 6 C 3 Combine Sum 2 11
- 43. Streams A 2 5 B 2 76 6 C 33 Combine Sum 2 11
- 45. Rx?☝
- 46. 😱 Too many operators 😱 Create, Defer, Empty, Never, Throw, From, Interval, Just, Range, Repeat, Start, Timer, Buffer, FlatMap, GroupBy, Map, Scan, Window, Debounce, Distinct, ElementAt, Filter, First, IgnoreElements, Last, Sample, Skip, SkipLast, Take, TakeLast, And, Then, When, Pattern, Plan, CombineLatest, Join, Merge, StartWith, Switch, Zip, Catch, onError, Retry, onError, Delay, Do, Materialize, Dematerialize, ObserveOn, Serialize, Subscribe, SubscribeOn, TimeInterval, Timeout, Timestamp, Using, All, Amb, Contains, DefaultIfEmpty, SequenceEqual, SkipUntil, SkipWhile, TakeUntil, TakeWhile, Average, Concat, Count, Max, Min, Reduce, Sum, Connect, Publish, RefCount, Replay, To, Action, Callable, Runnable, Array, Iterable, Pattern, Plan, Notification, Future, Aggregate, All, Amb, ambArray, ambWith, and_, And, Any, apply, as_blocking, asObservable, AssertEqual, asyncAction, asyncFunc, Average, averageDouble, averageFloat, averageInteger, averageLong, blocking, blockingFirst, blockingForEach, blockingIterable, blockingLast, blockingLatest, blockingMostRecent, blockingNext, blockingSingle, blockingSubscribe, Buffer, bufferWithCount, bufferWithTime, bufferWithTimeOrCount, byLine, cache, cacheWithInitialCapacity, case, Cast, Catch, catchError, catchException, collect, collect, Filter, collectInto, CombineLatest, combineLatestDelayError, combineLatestWith, Concat, concat_all, concatAll, concatArray, concatArrayDelayError, concatArrayEager, concatDelayError, concatEager, concatMap, concatMapDelayError, concatMapEager, concatMapEagerDelayError, concatMapIterable, concatMapObserver, concatMapTo, concatWith, Connect, connect_forever, cons, Contains, controlled, Count, countLong, Create, cycle, Debounce, decode, DefaultIfEmpty, Defer, deferFuture, Delay, delaySubscription, delayWithSelector, Dematerialize, Distinct, distinctKey, distinctUntilChanged, distinctUntilKeyChanged, Do, doAction, doAfterTerminate, doOnComplete, doOnCompleted, doOnDispose, doOnEach, doOnError, doOnLifecycle, doOnNext, doOnRequest, doOnSubscribe, doOnTerminate, doOnUnsubscribe, doseq, doWhile, drop, dropRight, dropUntil, dropWhile, ElementAt, ElementAtOrDefault, Empty, emptyObservable, empty?, encode, ensures, error, every, exclusive, exists, expand, failWith, Filter, filterNot, Finally, finallyAction, finallyDo, find, findIndex, First, firstElement, FirstOrDefault, firstOrElse, FlatMap, flatMapFirst, flatMapIterable, flatMapIterableWith, flatMapLatest, flatMapObserver, flatMapWith, flatMapWithMaxConcurrent, flat_map_with_index, flatten, flattenDelayError, foldl, foldLeft, for, forall, ForEach, forEachFuture, forEachWhile, forIn, forkJoin, From, fromAction, fromArray, FromAsyncPattern, fromCallable, fromCallback, FromEvent, FromEventPattern, fromFunc0, fromFuture, fromIterable, fromIterator, from_list, fromNodeCallback, fromPromise, fromPublisher, fromRunnable, Generate, generateWithAbsoluteTime, generateWithRelativeTime, generator, GetEnumerator, getIterator, GroupBy, GroupByUntil, GroupJoin, head, headOption, headOrElse, if, ifThen, IgnoreElements, indexOf, interleave, interpose, Interval, intervalRange, into, isEmpty, items, Join, join, jortSort, jortSortUntil, Just, keep, keep-indexed, Last, lastElement, lastOption, LastOrDefault, lastOrElse, Latest, latest, Switch, length, let, letBind, lift, limit, LongCount, ManySelect, Map, map, Zip, MapCat, mapCat, Zip, map-indexed, mapTo, mapWithIndex, Materialize, Max, MaxBy, Merge, mergeAll, mergeArray, mergeArrayDelayError, merge_concurrent, mergeDelayError, mergeObservable, mergeWith, Min, MinBy, MostRecent, Multicast, multicastWithSelector, nest, Never, Next, Next, none, nonEmpty, nth, ObserveOn, ObserveOnDispatcher, observeSingleOn, of, of_array, ofArrayChanges, of_enumerable, of_enumerator, ofObjectChanges, OfType, ofWithScheduler, onBackpressureBlock, onBackpressureBuffer, onBackpressureDrop, OnErrorResumeNext, onErrorReturn, onErrorReturnItem, onExceptionResumeNext, onTerminateDetach, orElse, pairs, pairwise, partition, partition-all, pausable, pausableBuffered, pluck, product, Publish, PublishLast, publish_synchronized, publishValue, raise_error, Range, Reduce, reduceWith, reductions, RefCount, Repeat, repeat_infinitely, repeatUntil, repeatWhen, Replay, rescue_error, rest, Retry, retry_infinitely, retryUntil, retryWhen, Return, returnElement, returnValue, runAsync, safeSubscribe, Sample, Scan, scanWith, scope, Select, Map, select, Filter, selectConcat, selectConcatObserver, SelectMany, selectManyObserver, select_switch, selectSwitch, selectSwitchFirst, selectWithMaxConcurrent, select_with_index, seq, SequenceEqual, sequence_eql?, SequenceEqualWith, Serialize, share, shareReplay, shareValue, Single, singleElement, SingleOrDefault, singleOption, singleOrElse, size, Skip, SkipLast, skipLastWithTime, SkipUntil, skipUntilWithTime, SkipWhile, skipWhileWithIndex, skip_with_time, slice, sliding, slidingBuffer, some, sort, sorted, sort-by, sorted-list-by, split, split-with, Start, startAsync, startFuture, StartWith, startWithArray, stringConcat, stopAndWait, subscribe, subscribeActual, SubscribeOn, SubscribeOnDispatcher, subscribeOnCompleted, subscribeOnError, subscribeOnNext, subscribeWith, Sum, sumDouble, sumFloat, sumInteger, sumLong, Switch, switchCase, switchIfEmpty, switchLatest, switchMap, switchMapDelayError, switchOnNext, switchOnNextDelayError, Synchronize, Take, take_with_time, takeFirst, TakeLast, takeLastBuffer, takeLastBufferWithTime, takeLastWithTime, takeRight, TakeLast, TakeUntil, takeUntilWithTime, TakeWhile, takeWhileWithIndex, tail, tap, tapOnCompleted, tapOnError, tapOnNext, Then, thenDo, Throttle, throttleFirst, throttleLast, throttleWithSelector, throttleWithTimeout, Throw, throwError, throwException, TimeInterval, Timeout, timeoutWithSelector, Timer, Timestamp, To, to_a, ToArray, ToAsync, toBlocking, toBuffer, to_dict, ToDictionary, ToEnumerable, ToEvent, ToEventPattern, ToFlowable, ToFuture, to_h, toIndexedSeq, toIterable, toIterator, ToList, ToLookup, toMap, toMultiMap, ToObservable, toSet, toSortedList, toStream, ToTask, toTraversable, toVector, tumbling, tumblingBuffer, unsafeCreate, unsubscribeOn, Using, When, Where, while, whileDo, Window, windowWithCount, windowWithTime, windowWithTimeOrCount, windowed, withFilter, withLatestFrom, Zip, zipArray, zipIterable, zipWith, zipWithIndex, ++, +:, :+
- 47. Is it not React way? 🤔 Looks like Angular
- 48. React-Redux infrastructure • Redux • Redux Form • Redux Thunk or Redux Saga • Redux React Router • Reselect • …
- 49. It’s ok to learn something every day 🍭 It’s fun 🍭
- 50. 💤 Boring 💤 Talking about Operators is
- 51. How to learn? (Video) 1) Holy.js 2016 – Виктор Русакович – Реактивное программирование: управляем потоками данных https://youtu.be/3cGKw9sxV_g 2) KharkivJS 2016 — Aliaksei Bahachuk – Reactive Programming with RxJS https://youtu.be/r1BD4TEL6Yc
- 52. How to learn? (Read) 1) http://reactivex.io/rxjs 2) https://www.learnrxjs.io/ 3) The introduction to Reactive Programming you've been missing https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 4) Egghead courses (Not Free 🙁) https://egghead.io/technologies/rx
- 53. @andrestaltz André Staltz How to learn? (Follow)
- 54. Theory is boring <Let’s code something />
- 58. Observable.startWith Observable .interval(1000) .startWith(0) 1 32 4 interval 5 1 32 4 startWith 50
- 59. Rx is Awesome But there is too much pain to use it in our app
- 61. Reactive UI <F.div> { Observable .interval(1000) .startWith(0) } </F.div> 1 32 4 interval 5 1 32 4 startWith 50
- 63. Let’s stop our increment
- 64. Let’s stop our increment Need Store Status/Value
- 65. 1 32 4 interval 5 true false true isRunning How does it work?
- 66. 1 32 4 interval 5 true false true isRunning How does it work? Magic
- 67. 1 32 4 interval 5 1 2 result 3 true false true isRunning How does it work? Magic
- 68. Let’s start from store our result value
- 69. .scan is the same as .reduce [1, ..., n].reduce( (acc, curr) => acc + curr, 0 )
- 70. Observable.scan Observable .interval(1000) .startWith(0) .scan((acc, curr) => curr, 0 ) 1 32 4 interval 5 1 32 4 startWith 5 1 32 4 scan 50 0
- 71. 1 32 4 interval 5 1 2 result 3 true false true isRunning How it should work Magic
- 72. +1 +1+1 +1 stream of 1 with interval +1 1 2 result 3 true false true isRunning How it should work Magic
- 73. Observable.mapTo Observable .interval(1000) .mapTo(1) .startWith(0) .scan((acc, curr) => acc + curr, 0 ) 1 32 4 interval 5 1 11 1 mapTo 1 1 11 1 startWith 1 1 32 4 scan 50 0
- 74. Update .scan Observable .interval(1000) .mapTo(1) .startWith(0) .scan((acc, curr) => acc + curr, 0 ) 1 32 4 interval 5 1 11 1 mapTo 1 1 11 1 startWith 1 1 32 4 scan 50 0
- 75. How to store our observables? 🤔
- 83. Why Atoms and Lenses? App Increment
- 84. Increment with Stop Demo
- 85. 1 32 4 interval 5 1 2 result 3 true false true isRunning How it should work Magic
- 86. How to combine two Observables? Observable.switchMap Observable.combineLatest
- 87. Stream of 1 with .interval and .mapTo Observable .interval(1000) .mapTo(1) .startWith(0) .scan((acc, curr) => acc + curr, 0 ) 1 32 4 interval 5 1 11 1 mapTo 1 1 11 1 startWith 1 1 32 4 scan 50 0
- 88. .combineLatest 1 32 4 interval 5 1 11 1 mapTo 1 1 startWith 1 2 scan 0 Observable .combineLatest( Observable .interval(1000) .mapTo(1) .startWith(0), increment.view(x => x.isRunning) ) .scan((acc, [curr, isRunning]) => isRunning ? acc + curr : acc, 0 ) false true isRunning true combineLatest 1 11 1 10
- 89. How does it work? 1 32 4 interval 5 1 11 1 mapTo 1 1 startWith 1 2 scan 0 Observable .combineLatest( Observable .interval(1000) .mapTo(1) .startWith(0), increment.view(x => x.isRunning) ) .scan((acc, [curr, isRunning]) => isRunning ? acc + curr : acc, 0 ) false true isRunning true combineLatest 1 11 1 10
- 90. How does it work? 1 32 4 interval 5 1 11 1 mapTo 1 1 startWith 1 2 scan 0 Observable .combineLatest( Observable .interval(1000) .mapTo(1) .startWith(0), increment.view(x => x.isRunning) ) .scan((acc, [curr, isRunning]) => isRunning ? acc + curr : acc, 0 ) false true isRunning true combineLatest 1 11 1 10
- 91. How does it work? 1 32 4 interval 5 1 11 1 mapTo 1 1 startWith 1 2 scan 0 Observable .combineLatest( Observable .interval(1000) .mapTo(1) .startWith(0), increment.view(x => x.isRunning) ) .scan((acc, [curr, isRunning]) => isRunning ? acc + curr : acc, 0 ) false true isRunning true combineLatest 1 11 1 10
- 92. How does it work? 1 32 4 interval 5 1 11 1 mapTo 1 1 startWith 1 2 scan 0 Observable .combineLatest( Observable .interval(1000) .mapTo(1) .startWith(0), increment.view(x => x.isRunning) ) .scan((acc, [curr, isRunning]) => isRunning ? acc + curr : acc, 0 ) false true isRunning true combineLatest 1 11 1 10
- 94. .mapTo to .switchMap Observable .interval(1000) .mapTo(1) .startWith(0) .scan((acc, curr) => acc + curr, 0 ) 1 32 4 interval 5 1 11 1 mapTo 1 1 32 4 startWith 5 1 32 4 scan 50 0
- 95. .mapTo 1 32 4 interval 5 1 11 1 mapTo 1 1 11 1 startWith 1 1 32 4 scan 50 0
- 96. .switchMap 1 32 4 interval 5 1 00 0 mapTo 1 switchMap 1 2 scan 0 false true isRunning true
- 103. Observable .interval(1000) .startWith(0) .switchMap(() => increment.view(x => x.isRunning ? 1 : 0) ) .subscribe(x => value.modify(v => v + x)) A little clue. Do you have any ideas?
- 104. Profiling
- 107. Don’t forget to unsubscribe :) // componentDidMount() const unsubscribe = Observable ... .subscribe(x => ...) // componentWillUnmount() unsubscribe()
- 109. Really 🌟AWESOME🌟
- 110. Reactive Components 🌟Awesome🌟 But what about existing components?🤔
- 111. Styled-components
- 117. History Util in Examples Magic of Observables https://github.com/grammarly/focal/blob/master/examples/all/src/utils/history.ts
- 118. Production Ready More than 18 million users!
- 119. What next?
- 120. • Devtool • Decouple: Focal and Focal React • Workshop • … Plans
- 121. Part 2 Reactive State Management App Some widget
- 122. Share and Star🙏 https://github.com/grammarly/focal yarn add @grammarly/focal
- 123. Thank you! Questions are welcome @AGambit95
- 124. April 26 2017 Style your application with CSS in JS https://www.facebook.com/events/2269571779934837/