Reactive Programming from Scratch (JavaScript) - Ep1

  Рет қаралды 28,967

Christopher Okhravi

Christopher Okhravi

5 жыл бұрын

Let's build a reactive JavaScript library, inspired by RxJS, from scratch.
⭐️ Support the channel on Patreon:
/ christopherokhravi
► Playlist:
• Reactivity from Scratch

Пікірлер: 45
@JubairAhmadSiam
@JubairAhmadSiam 5 жыл бұрын
Awesome! Looking forward to this series.
@blokche_dev
@blokche_dev 5 жыл бұрын
Valuable content as usual! Thanks a lot Christopher.
@namangarg3933
@namangarg3933 4 жыл бұрын
Dude... You are just crazy !! Super awesome stuff !! Amazing energy. I am amazed to find your channel. Please keep up the great work !!
@dancelmarkyosef
@dancelmarkyosef 5 жыл бұрын
Damn you nailed the idea of doing this series. Thank you very much
@rsdntevl
@rsdntevl 5 жыл бұрын
always top notch material, good stuff
@emmaccode
@emmaccode 2 жыл бұрын
Quality editing, good descriptions -- although a bit broad -- was able to follow along perfectly as a julia, assembly, c, c++ programmer. Wanted to make a little reactive library to hook into Julia, maybe even further, via JSExpressions. The use of map() was weird, but I mostly wanted to see how you craft this sort of paradigm in JavaScript. Being a functional programming proponent, this is much like using parametric polymorphism for indexes of the type mutation. Thanks yo!
@sampaiomarcelo
@sampaiomarcelo 5 жыл бұрын
Great Video. I just love the way you describe things in Computer Science.
@aris9239
@aris9239 3 жыл бұрын
Dude, I love your vids! Right to the point! Thanks
@caliwolf7150
@caliwolf7150 2 жыл бұрын
this is excellent, thanks for making this!!
@rizwanfirdous
@rizwanfirdous 5 жыл бұрын
Thanks for starting the new series
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
And thank *you* for watching it :D :D
@align2source
@align2source Ай бұрын
Super helpful!
@hansschenker
@hansschenker 4 жыл бұрын
Crazy smart Christopher!! :-)
@Jtoled0
@Jtoled0 5 жыл бұрын
Sidenote: in your example, you used map inside of the emit method in order to perform a simple iteration of the elements in the array. IMO thats a wrong use of the map function, as map primary use case is to apply a transformation fn to every element in the array and collect the results into a new one. So you are generating some overhead. TL;DR; map != foreach/for
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
I didn't think about the overhead. Important point! Thanks for pointing it out! Much appreciated :) :)
@NeemiasJunior1
@NeemiasJunior1 5 жыл бұрын
@José Ignacio Toledo Navarro It's not true, Map is actually a Functor and not necessarily used for iterating arrays. Some great FP libraries, like Baconjs, are using the map function just as he used, and when you deal with streams this syntax is very common. Map is a identity function, and the default implementation is used to traverse lists in javascript but you can create your own map function as a Monad.
@douglasepp
@douglasepp 4 жыл бұрын
I can just say, Thank You!
@hugodelnegro
@hugodelnegro 3 жыл бұрын
This is my favorite approach to new libraries, I saw a similar one for react hooks, in the end state management ends up looking like a oop thing. Why did you use a class and not a closure? I love your channel. It would be super cool if you would also talk about architecture for data oriented architecture, or ecs architecture, or functional programming architecture. You could also "rebuild" other libraries.
@hatemelshenawy7197
@hatemelshenawy7197 5 жыл бұрын
this will be good :)
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
😊😊😊
@rafaelcisnerosgomez7295
@rafaelcisnerosgomez7295 5 жыл бұрын
ReactiveX So fuckin awesome :D Thanks Chris!
@gauravjoshi2177
@gauravjoshi2177 5 жыл бұрын
Hi, I am not able to understand function chaining in a pipe can you suggest some reading.Thanks
@displayblock6696
@displayblock6696 5 жыл бұрын
thank you very much from egypt i am a beginner and i have a suggestion first is the reactive functional programming is a paradigm? i think that this will be great if we discuss in this tutorial more than one paradigm i mean that if we can say if we do this thing by reactive so we will do it that way and if we do the same thing by another paradigm we will do it that way. and this paradigm is better that that paradigm because 1... 2... 3... it's just a suggestion and again thank you very much
@ghostinplainsight4803
@ghostinplainsight4803 5 жыл бұрын
For your example of tap, you don't need to use curly braces with the return keyword, you can use parenthesis and a comma to do the same thing. const tap = f => x => (f(x), x)
@o.voytyn
@o.voytyn 4 жыл бұрын
Your observable is subject actually. Subject can emit values to multiple observables by a next method.
@Luxcium
@Luxcium 5 жыл бұрын
How can I get to that level of vim fluency I only know :wq and jhkl
@yapayzeka
@yapayzeka 5 жыл бұрын
now we are talking
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
😊😊
@guillaumeturgeon9915
@guillaumeturgeon9915 4 жыл бұрын
Does anyone know of a "thrush" equivalent in lodash or lodash/fp?
@attilatoth268
@attilatoth268 5 жыл бұрын
I guess your variadic pipe function is slightly wrong. In the original version it was const pipe = f => g => g(f(x)) which has a nice property that it can be partially applied. For example: const doubleFirst = pipe(double) doubleFirst(console.log)(1) // => logs 2 to console So it still needs a second function before the number argument. But in the variadic form pipe(double) is just double. I cannot write doubleFirst(console.log)(1), I lost the pipeing.
@zeocamo
@zeocamo 5 жыл бұрын
map is not a forEach, and you should copy the x for each of the cbs because if any of the cbs is changing the x then it will be changed for the rest of the cbs
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
Aha. Very interesting point! Good catch. Hmm. But if x is an emitted value of unconstrained type. I.e. could be anything. Then performing a deep copy is impossible. Without making an expectation such as the type e.g. implementing a copy method. Perhaps we could instead view this as that the rule is that observers must never mutate the notification payload and if they do then behavior is unspecified. What do you think? I can’t really see another way out of this without constraining the event type and that seems like something we don’t want. Thanks again!
@zeocamo
@zeocamo 5 жыл бұрын
@@ChristopherOkhravi maybe freeze the value
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
Good point. Can’t check atm but I assume Object.freeze only works on objects. And it’s a shallow freeze right? Of course we could implement our own deep freeze that even handles non-objects but functions will be a bit tricky. And at his point I think it makes sense to simply state as a rule that handlers must never mutate event data. But either way, very interesting and important point!
@zeocamo
@zeocamo 5 жыл бұрын
@@ChristopherOkhravi arrays and functions is objects in JS, and Object.freeze(42) works because because any non objects is just return as is and numbers ans strings is immutable, so it is just run over all items in arrays and keys in objects and freeze them, this just works, i use it in one of my code bases.
@rose123998
@rose123998 3 жыл бұрын
in case you need the link to the talk he mentioned kzfaq.info/get/bejne/r7qbrbF5q5zWfac.html [Boundaries by Gary Bernhardt]
@netbin
@netbin 5 жыл бұрын
your logo is funny bro, reminds me something
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
If you mean the logo in the thumbnail it’s the logo of ReactiveX. Thanks for watching! :)
@vnki
@vnki 5 жыл бұрын
Please stop using Ctrl-C to return to normal mode. It's a bad practice (and it bugs me ;) )
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
Wow. I’ve never heard about this. Could you please share some info on why that’s bad practice. I actually deliberately trained myself to use ctrl-c instead of esc since it’s faster and I’m not a fan of remapping caps lock to escape. I’m aware that ctrl-c doesn’t expand abbreviations nor behave the same when leaving visual block mode. But I’ve never used abbreviations and I just use esc instead when i need visual block for e.g. a multi-line insert. But if there’s more badness with ctrl-c I’d love to know so please do tell :) Btw how did you even realize I use ctrl-c? 😀😀😀
@vnki
@vnki 5 жыл бұрын
@@ChristopherOkhravi Well, yes, abbr and InsertLeave autocmd is the only difference between Ctrl-c and ESC. You could use Ctrl-[ which behaves the same as ESC if you want faster/easier ESC. How I realised that you use Ctrl-c is that during the video Vim shows press :qa! to exit out of vim. Vim shows this when you press Ctrl-C.
@ChristopherOkhravi
@ChristopherOkhravi 5 жыл бұрын
Vishnunarayan K. I. Haha ok that’s awesome. I didn’t know :) Unfortunately [ is placed quite awkwardly on a Nordic keyboard :(. It’s on the third level. As such the key combination to output the character is not consistent across Mac/Linux/Win as the third level chooser isn’t standardized. Which is actually a pretty sad problem in itself :) :(
@jonasherseth5306
@jonasherseth5306 5 жыл бұрын
@@ChristopherOkhravi You're Scandinavian? I was convinced you were spanish or italian or something. I'm seriously concidering getting a US kb because of the [] {} placements on the nordic ones (ofc I could change the layout, but it's not the same...)
Reactive Programming from Scratch (JavaScript) - Ep2
33:17
Christopher Okhravi
Рет қаралды 6 М.
Reactivity Explained
7:29
Awesome
Рет қаралды 27 М.
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 112 МЛН
1❤️
00:17
Nonomen ノノメン
Рет қаралды 4,5 МЛН
Did you believe it was real? #tiktok
00:25
Анастасия Тарасова
Рет қаралды 15 МЛН
Object Oriented vs Functional Programming with TypeScript
12:07
The Only Time You Should Use Polymorphism
13:55
Christopher Okhravi
Рет қаралды 88 М.
The Absolute Best Intro to Monads For Software Engineers
15:12
Studying With Alex
Рет қаралды 602 М.
Always Use Interfaces
8:08
Christopher Okhravi
Рет қаралды 44 М.
JavaScript Pro Tips - Code This, NOT That
12:37
Fireship
Рет қаралды 2,5 МЛН
Intro to Reactive Programming
15:16
Paco van der Linden
Рет қаралды 42 М.
RxJS Top Ten - Code This, Not That
14:44
Fireship
Рет қаралды 252 М.
What is Observable | Observables | Angular 12+
14:16
procademy
Рет қаралды 146 М.
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 112 МЛН