RxJs Zip - Real-Life Analog of ZIP operator (Reactive Dürüm, 2021)

In this video, we continue to look for real-life analogs for #rxjs operators, and today we are going to look at the ZIP operator. This operator allows you to combine multiple streams together and emit an array of values arrived from combined streams. Additionally, this operator cares about the order of how values should be paired (it is hard to explain it with text - better one time to see). I hope you will find this video useful. Stay tuned and enjoy watching!
Courses:
⭐ Angular Interview Hacking
🔗 courses.decodedfrontend.io/co...
⭐ Angular Material Theming Course (Advanced)
🔗 courses.decodedfrontend.io/co...
⭐ Performant Graphql Backend in 1 Day by Using Hasura Engine
🔗 courses.decodedfrontend.io/co...
🕒 Time Codes:
00:00:00 - Intro;
00:00:39 - Mental model for ZIP operator;
00:02:56 - Let's code it!;
00:13:20 - Outro;
#rxjs #angular #webdevelopment

[@artempushnev1855]

Шавуха!!!!😂 It's a great video! Thanks for the explanation!

[@averiivy1]

Please make a series of rxjs operators like forkjoin and combinelatestwith. And also flattening operators like mergemap, switchmap,etc

[@DecodedFrontend]

It will be soon ;)

[@averiivy1]

@@DecodedFrontend thank you so much ! Looking forward to it!!!

[@georgimollov]

@@DecodedFrontend this will be highly appreciated, very difficult to create a mental map for all the operators out there in rxjs

[@Billiam112]

withLatestFrom vs combineLatest would be neat too.

[@aleksandrm3466]

Спасибо за работу и шавуху)))

[@DecodedFrontend]

Хаха обращайтесь! 😄

[@joshblf]

Adding mental models to your videos is genius. Especially for RxJs operators. 👍 Great job

[@DecodedFrontend]

Glad you liked it :)

[@oskarzajac8935]

wow, thanks for making the effort and making zip human readable

[@kishorkadavil550]

Great content. Nobody can explain more clearly than this. Thanks, buddy. Expecting more such content.

[@DecodedFrontend]

Thanks, Kishor! Glad to hear that because I wasn't completely sure if such a way of explanation will get any positive feedback :)

[@eXpertise7]

Great video, make more of these RxJS real life analogs! thanks!!

[@DecodedFrontend]

Thanks for feedback! There will be ;)

[@denisbielishev]

It's a good decision create videos about RxJS operator. It's useful for us and for you.. There are a lot of operators, that's why you can create several decades of videos

[@SonuSindhu]

Thanks, wanted more videos on rxjs

[@VipinRawat_Offcial]

As usual awesome 🙂

[@haroldpepete]

that is one of the best videos to understand the behavior of those operators, thank

[@ozguryilmaz8152]

Thanks for your clear explanation 🙏 Since you are so much interested in dürüm issue, I would like to give further information in return for your favor :) 'Döner dürüm' in Turkey is a kind of kebap, which is separated from the others as the way of its service style. The main name of the food is 'Döner', which means turning in Turkish. Therefore, it notifies that this kind of kebap is not cooked on a horizontal barbecue but on a vertical position and continuously turns during the cooking process. 'Dürüm' as a noun comes from the turkish verb dür-mek, which means wrapping. If the döner is serviced on a plate, it is called service-döner, on the other hand, if it is wrapped by a bread, it is called dürüm-döner. Shawarma is an Arabic word, originated from Turkish verb çevir-mek, which means also turning. Just because, I've been to Arab countries, I could observe the fact that some regions use both definitions of shawarma and döner, whereas some others use only one of them.

[@DecodedFrontend]

wow, damn... I thought I was an expert in dürüms but it looks like I am just a stupid newbie comparing to you :D it was indeed interesting, thanks👍

[@ozguryilmaz8152]

@@DecodedFrontend hahaha I would prefer to be relatively new in dürüms and an expert in Angular like you :) We look forward to the continuation of your useful lectures, thanks 🙏

[@markusingvarsson2146]

Loved it! Such a great analogy.

[@MrNigam1992]

Beautifully explained

[@andrewarosario]

Amazing explanation!

[@CrusaderMen]

Thank you! This is great!

[@letok2871]

Супер видео!

[@user-oz5nw2hi1f]

Thank you. It's much better for understanding!

[@castrojunin]

Incredible series of rxjs man :-)

[@user-wh4pm2bj1q]

Perfect!

[@Isa-oo8mz]

Very cool video. Great explanation!

[@swapnasaritnayak2569]

Awesome ❤️

[@andpzk]

Awesome!

[@siju.mathew]

Great explanation. Good job. Keep it up!

[@vladlandcovschi9978]

Best explanation ever

[@valikonen]

Fantastic job, thank you!

[@katerynadanylenko9465]

Great explanation!! Thank you so much for your hand work 👍

[@Faheem4449]

Really loved Durum ❤️❤️😂😂. I was fun to learn

[@rameshkumarveldurai5241]

Great content. Thank you :)

[@yuliakhitrukhina]

Thank you! Great explanation with simple understandable examples)

[@jakubdrewniak2668]

analogy to durum is awesome, i will always remmeber how zip works with durum :D

[@Bukratusi]

man you are genious i know wha they do but u create a very nice analogy. awesome thnaks.

[@krishnachaitanya102]

@Decoded Frontend, You are lit 🔥🔥🔥🔥🔥🔥🔥

[@AmarSingh-uw1db]

Gratitude Sirji ❤❤. Thanks for wisdom

[@afsharanh]

wow this is the best explanation for zip and combineLatest operators, gj man!

[@vijayu707]

Genius.. Very well explained. Very very underrated tech channel..

[@Nabulio85]

very good demonstration, beautiful pedagogy

[@yuriinadilnyi3029]

so great explanation)

[@MukeshSharma-xd4dn]

Oh my God!! You are a gem, a sage. Today i got deep understanding of streams. Many thanks

[@RamKumar-es3mp]

Really Great content. Thanks

[@woendi]

I was just about to google what the difference between zip() and combineLatest() was, the moment before you demonstrated :D Great Job

[@aparnashankar2215]

Its very good and provides a good explanation for zip operator

[@krisnarusdiono1304]

quiet late for watching your latest videos, still worth it and this video is something new for me (also berloner durum) ... you are my mentor 🤞🏻😁

[@frankretief6260]

Please do more of these, awsome

[@DecodedFrontend]

Thanks for the feedback! I am glad you liked it ;)

[@frontend3409]

Such a great example! Wow! The best explanation of zip operator in web!

[@Favorite010499450]

Thank you for such a very clear explanation & example. I hope there is also another explanation about: - concatMap - exhaustMap - mergeMap - switchMap For me, those operators are very hard to wrap my head around.

[@kashifalikhan4420]

Very good explanation,

[@5hrk]

Шавуха))) улыбнуло)

[@mustafasange]

Using shawarma as an example 😋. Wonderful! 👍

[@tomaszdarowski9906]

Good job

[@Doktornikita]

THX!

[@nickpravda3249]

Спасибо, благодаря этому видео я узнал, что дурум это шевуха, а флет бред это лаваш :) А если серьезно, годный контент, молодец!

[@DecodedFrontend]

Как работает zip оператор, надеюсь, тоже)

[@cangua4462]

Thanks sir

[@DraaElMizan]

Best explanation of RXJs zip operator. Thank you so much. By the way I really enjoyed your Angular Forms course (the best). Any luck making a similar course for RXJs?

[@johanneswe]

clicked because of the thumbnail

[@evnews]

красава! внятно и понятно!

[@DecodedFrontend]

Спасибо 🙏🏻 рад, что понравилось

[@BR4IN0FF]

Лучшее объяснение которое видел. Спасибо

[@DecodedFrontend]

Спасибо за отзыв! Рад, что понравилось 🙂

[@imarryday]

@@DecodedFrontend Не думал что ты по русски говоришь, минут 20 пытался гуглить где говорят "шавуха" ))

[@DecodedFrontend]

@@imarryday ну это не самое распространённое название, но я встречал несколько раз точно))

[@RamKumar-es3mp]

Please do upload more videos on rxjs thanks

[@ams1ams53]

Hey, I enjoy your content thanks. Can you make a video about how to handle local storage? Or how to handle logged in user information, how to uae data service properly?

[@ericaskari]

Thank you, now I'm hungry 🤤

[@DecodedFrontend]

He he 😀You are welcome!

[@user-ny4yt1kf9v]

Now I know how to cook durum, thx

[@DecodedFrontend]

Actually, It is a vital skill 😀

[@IhorKevin]

Особисто мені цей оператор більше тетріс нагадує: коли у всіх колонках заповнюються кубики - лінія готова!

[@nagendradevara1]

Nice Thumbnail 🥙👨‍🍳

[@DecodedFrontend]

he he :) Thanks!

[@rihardkrauz4696]

Лайк за шавуху 😂

[@DecodedFrontend]

Хаха))

[@dekathomas]

Nice explanation! Can you show us the type of hot and cold observable, and others? Thanks!

[@DecodedFrontend]

Later on but I will

[@codebase4947]

I would like to know more about the map operators and the new ones.

[@MrNigam1992]

Can you explain the fork Join operator as well?

[@saurabhchauhanit]

Really like the video, can you please at the end provide some real world usage example if you can, I mean not showing but just telling that these are some scenario in real world where you can use it

[@DecodedFrontend]

Thank you for hint, I will deffinitely think about it for the next vid. For this particular example I would answer something like this: Imagin you build an app where developers estimate some user stories. Every developer send its own score and once everyone voted you would like to show the average score and this is where you could use zip operator. So you create a separate stream for every developer (data can arrive via websocket in real-time) and then you combine with zip operator streams for every developer and once all of them voted on some concreat user story you will get an array of all answers and can get easily the average number from it. And then the process just repeats for every user story :)

[@saurabhchauhanit]

@@DecodedFrontend thank you for answering

[@zeeshanexplores]

Great great video. Can you please put code for these videos on github etc?

[@herseyvar1164]

Turkish Durum Doner is great

[@adityagautam1217]

how's forkJoin different from zip??

[@alextiger548]

Nice stuff brohaim

[@rahultej8352]

Doesnt zip return OperatorFunction? how was pipe added on it

[@Afdac247]

By the way I see your import statements and how their bundle sizes next to them what's the vs code extension for that

[@DecodedFrontend]

There we go: marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

[@028-manikandan3]

Sir i got a error inside ngonint this.drums$.the error is observable is assignable type of observable please response sir 🙏🙏🙏

[@adennis200]

Hahaha regards from Berlin;)

[@olivierboisse1678]

How many items does zip operator retains in the queue ? Imagine a scenario where one observable emits values at high frequency and a second obversable emits values at low frequency, if we zip both observables, the values of the first source must be kept in memory, this could raise a memory error after some time isn't it ?

[@oren-karaso]

Hey Dmytro! In 7:26, why aren't you getting an error about a type mismatch after adding the map operator to each inner stream inside the zip? After all, now each stream will return Observable rather than the actual type of each subject

[@thiemofischer2230]

The cabbage guy is everywhere...

[@DecodedFrontend]

Yep!

[@evnews]

I really wonder how you can achieve that wit redux!?!?!?

[@DecodedFrontend]

What do you mean? How to use zip operator with ngrx, or?

[@evnews]

@@DecodedFrontend or! is there a workaround (or something similar) in redux like zip?

[@codeSurvivor]

🌯

[@JohnDoe-ji1zv]

Пожалуйста не говори валуэ 😅 вэлью будет правильнее. Спасибо за видео!

[@trash2trash]

Well ,, it is just Semaphore algo:) in shorts

[@balajibalamurugan8053]

shawarma in india

[@Afdac247]

Rxjs man never use subscribe (other than to call it) even agn

[@DecodedFrontend]

Hi Michael! I am not sure I get it, what do you mean?

[@Afdac247]

@@DecodedFrontend what I mean is I rxjs tap operator mimics next,error, complete. I just do of().pipe(...). subscribe() much cleaner and scalable code

[@marekkazimierczak9210]

6:25 👏👏👏👏👏In PL we call it "KEBAB"