Event Bus Archives

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub. The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs co...

By default, communication between Vue components happen with the use of props. Props are properties that are passed from a parent component to a child component. For example, here’s a component where title is a prop: <blog-post title="My journey with Vue"></blog-post> Props are always passed from the parent component to the child component. As your application increases in complexity, you slowly hit what is called prop drilling that is React-focused, but totally applies). Prop drilling is the idea of passing props down and down and down to child components — and, as you might imagine, it’s generally a tedious process. So, tedious prop drilling can be one potential problem in a complex. The other has to do with the communication between unrelated components. We can tackle a...

Tag: Event Bus

Let’s Create a Lightweight Native Event Bus in JavaScript