Reactive Programming from Scratch (JavaScript) - Ep1

Поділитися
Вставка
  • Опубліковано 5 гру 2018
  • Let's build a reactive JavaScript library, inspired by RxJS, from scratch.
    ⭐️ Support the channel on Patreon:
    / christopherokhravi
    ► Playlist:
    • Reactivity from Scratch

КОМЕНТАРІ • 45

  • @emmaccode
    @emmaccode 2 роки тому +4

    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!

  • @Jtoled0
    @Jtoled0 5 років тому +19

    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 років тому +9

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

    • @NeemiasJunior1
      @NeemiasJunior1 5 років тому +4

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

  • @dancelmarkyosef
    @dancelmarkyosef 5 років тому +3

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

  • @JubairAhmadSiam
    @JubairAhmadSiam 5 років тому +2

    Awesome! Looking forward to this series.

  • @namangarg3933
    @namangarg3933 4 роки тому +1

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

  • @blokche_dev
    @blokche_dev 5 років тому +1

    Valuable content as usual! Thanks a lot Christopher.

  • @sampaiomarcelo
    @sampaiomarcelo 5 років тому +1

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

  • @rsdntevl
    @rsdntevl 5 років тому

    always top notch material, good stuff

  • @rizwanfirdous
    @rizwanfirdous 5 років тому +5

    Thanks for starting the new series

  • @aris9239
    @aris9239 3 роки тому

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

  • @caliwolf7150
    @caliwolf7150 2 роки тому

    this is excellent, thanks for making this!!

  • @hugodelnegro
    @hugodelnegro 3 роки тому +1

    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.

  • @align2source
    @align2source 5 днів тому

    Super helpful!

  • @hansschenker
    @hansschenker 4 роки тому

    Crazy smart Christopher!! :-)

  • @gauravjoshi2177
    @gauravjoshi2177 5 років тому +1

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

  • @displayblock6696
    @displayblock6696 5 років тому +2

    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

  • @douglasepp
    @douglasepp 3 роки тому

    I can just say, Thank You!

  • @o.voytyn
    @o.voytyn 4 роки тому

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

  • @Luxcium
    @Luxcium 4 роки тому +1

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

  • @rafaelcisnerosgomez7295
    @rafaelcisnerosgomez7295 5 років тому +1

    ReactiveX So fuckin awesome :D Thanks Chris!

  • @ghostinplainsight4803
    @ghostinplainsight4803 4 роки тому +2

    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)

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

  • @yapayzeka
    @yapayzeka 5 років тому +3

    now we are talking

  • @hatemelshenawy7197
    @hatemelshenawy7197 5 років тому

    this will be good :)

  • @guillaumeturgeon9915
    @guillaumeturgeon9915 4 роки тому

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

  • @zeocamo
    @zeocamo 5 років тому +1

    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 років тому +1

      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.

  • @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! :)

  • @rose123998
    @rose123998 3 роки тому

    in case you need the link to the talk he mentioned ua-cam.com/video/yTkzNHF6rMs/v-deo.html [Boundaries by Gary Bernhardt]

  • @vnki
    @vnki 5 років тому +1

    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 років тому +1

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