Reactive Programming from Scratch (JavaScript) - Ep1

[@dancelmarkyosef]

Damn you nailed the idea of doing this series. Thank you very much

[@namangarg3933]

Dude... You are just crazy !! Super awesome stuff !! Amazing energy. I am amazed to find your channel. Please keep up the great work !!

[@emmaccode]

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]

Great Video. I just love the way you describe things in Computer Science.

[@rizwanfirdous]

Thanks for starting the new series

[@ChristopherOkhravi]

And thank *you* for watching it :D :D

[@Jtoled0]

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]

I didn't think about the overhead. Important point! Thanks for pointing it out! Much appreciated :) :)

[@NeemiasJunior1]

@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.

[@JubairAhmadSiam]

Awesome! Looking forward to this series.

[@aris9239]

Dude, I love your vids! Right to the point! Thanks

[@blokche_dev]

Valuable content as usual! Thanks a lot Christopher.

[@rsdntevl]

always top notch material, good stuff

[@ghostinplainsight4803]

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)

[@caliwolf7150]

this is excellent, thanks for making this!!

[@align2source]

Super helpful!

[@desp94]

I can just say, Thank You!

[@gauravjoshi2177]

Hi, I am not able to understand function chaining in a pipe can you suggest some reading.Thanks

[@hugodelnegro]

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.

[@Luxcium]

How can I get to that level of vim fluency I only know :wq and jhkl

[@o.voytyn]

Your observable is subject actually. Subject can emit values to multiple observables by a next method.

[@displayblock6696]

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

[@hansschenker]

Crazy smart Christopher!! :-)

[@rafaelcisnerosgomez7295]

ReactiveX So fuckin awesome :D Thanks Chris!

[@yapayzeka]

now we are talking

[@ChristopherOkhravi]

😊😊

[@guillaumeturgeon9915]

Does anyone know of a "thrush" equivalent in lodash or lodash/fp?

[@attilatoth268]

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]

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]

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]

@@ChristopherOkhravi maybe freeze the value

[@ChristopherOkhravi]

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]

@@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.

[@hatemelshenawy7197]

this will be good :)

[@ChristopherOkhravi]

😊😊😊

[@rose123998]

in case you need the link to the talk he mentioned kzbin.info/www/bejne/r4XOq4F-e5ulg9U [Boundaries by Gary Bernhardt]

[@netbin]

your logo is funny bro, reminds me something

[@ChristopherOkhravi]

If you mean the logo in the thumbnail it’s the logo of ReactiveX. Thanks for watching! :)

[@vnki]

Please stop using Ctrl-C to return to normal mode. It's a bad practice (and it bugs me ;) )

[@ChristopherOkhravi]

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]

@@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]

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]

@@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...)