Reactive Programming from Scratch (JavaScript) - Ep1

Поделиться
HTML-код
  • Опубликовано: 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

  • @JubairAhmadSiam
    @JubairAhmadSiam 5 лет назад +2

    Awesome! Looking forward to this series.

  • @blokche_dev
    @blokche_dev 5 лет назад +1

    Valuable content as usual! Thanks a lot Christopher.

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

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

  • @dancelmarkyosef
    @dancelmarkyosef 5 лет назад +3

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

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

  • @aris9239
    @aris9239 3 года назад

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

  • @rizwanfirdous
    @rizwanfirdous 5 лет назад +5

    Thanks for starting the new series

  • @align2source
    @align2source 16 дней назад

    Super helpful!

  • @caliwolf7150
    @caliwolf7150 2 года назад

    this is excellent, thanks for making this!!

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

  • @douglasepp
    @douglasepp 4 года назад

    I can just say, Thank You!

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

  • @hansschenker
    @hansschenker 4 года назад

    Crazy smart Christopher!! :-)

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

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

  • @gauravjoshi2177
    @gauravjoshi2177 5 лет назад +1

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

  • @yapayzeka
    @yapayzeka 5 лет назад +3

    now we are talking

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

  • @hatemelshenawy7197
    @hatemelshenawy7197 5 лет назад

    this will be good :)

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

  • @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 ruclips.net/video/yTkzNHF6rMs/видео.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...)