Share the Same Broadcaster Values Across Multiple Listeners

Limit to a Single Shared Broadcaster Each New Event

Combine Two Broadcasters to Compare Values

Compose Operators to Implement Game Logic

Fetch New Data Based on Conditions

Create an Initialize Operator to Clear an Input Field

Combine Broadcasters in Logical Order

Refactor Game State to a Single Repeating Broadcaster

Check Broadcasters Are Properly Cancelled in Operators

Organizing Operators and Cleaning Up

Walkthrough the Data Flow of the Word Game

Exploring the Patterns in the Operators

Comparing Similarities with Popular Async Libraries

Implementing a Word Game with Patterns and React

https://app.egghead.io/api/v1/lessons/javascript-comparing-similarities-with-popular-async-libraries/subtitles

John Lindquist: [0:00] I would like to finish by showing these concepts in other libraries. For example, RxJS, anywhere you see the word Next, you can think of a listener. Anywhere you see the word complete, you can think of a done being passed down.

[0:15] Adding a subscription is like adding a listener to an array that we did a couple times. Returning a subscription is similar to how we return a cancel function. Their subscription allows you to add other listeners and cancel from that same object. Wrapping everything like this is just having a broadcaster that takes a listener, and then does stuff with it on the inside.

[0:37] RxJS implements things like schedulers. It would take a whole other course to explain them because they handle a lot of difficult scenarios around execution priority and queuing and calling functions on animation frame rather than timers, which is pretty advanced stuff, but the concepts you learned from watching this course definitely apply when you look on the insides of RxJS.

[1:03] I'm going to pull up the map operator, and if you look at subscribe that's like calling the broadcaster function and passing in a listener.

[1:14] Their subscribers are like listeners, but objects with additional properties. The way they wrap and define their new listeners, whereas we did broadcaster passed from the function that took a value, they do a method called next, and pass in a function that takes a value.

[1:31] Then they'll do their mapping here, and pass that on to the original listener, so while the architecture and patterns are pretty different, the concepts are the same. The way you think about something broadcasting to a callback that handles that value and does something to that value and passes it to that original callback or original listener. Those concepts definitely carry over.

[1:55] If you look at libraries like callbags, you'll see that they had a start and a data and an end. Their start is like calling broadcaster, their data is like invoking the listener, and their end is like canceling. You'll see the same concepts, but the patterns they use are different.

[2:12] In a library like Most.js, you'll see similar terms like next, which would be a listener, and which would cancel it. We talked briefly about error handling. This is more cancelation, and those similar concepts all throughout these libraries.

[2:27] Most importantly just like I mentioned in the last lesson, each of these libraries and many others all capture asynchronous logic in individual functions. RxJS calls those functions operators, just like we did. Callbags uses the term callbag, and Most just calls them transforming streams.

[2:45] Hopefully, by looking under the hood of building our own library and our own operators and functions, you have a better understanding of what happens inside of the operators and functions in these libraries.

[2:56] If you're looking for my recommendation, I would recommend RxJS. It's been around for years. It's stable. It has a very large community. It's very well-tested. It has tons of features to handle every scenario, even scenarios that get way more complex than the ones that we explored. I sincerely thank you very much for watching, and I wish you all the best.

Comparing Similarities with Popular Async Libraries

Share this video with your friends

Course

Implementing a Word Game with Patterns and React