Communication between components

Photo by Colwyn on Flickr

Communication is important, especially neighborhood communication 😎 Let’s collect communication approaches between components.

I remember a time when I jumped to Angular and while developing I had to find the best way to communicate between components. In Angular we may dispatch events ($emit, $broadcast), in React use Redux etc. Each framework has own approaches, but we may have general solutions no matter of framework, web components. So, let’s collect them.

We are going to talk about neighborhood communication 😎

Custom Events

Custom Event is a good approach to dispatch events and listen. You should listen event from target Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest). It does not work in IE but for that we have a Polyfill solution.

https://medium.com/media/16932839705733df0195944222629851/href

So, Custom Event Service is going to look like that:

https://medium.com/media/3ed344e0110d101d92c73e16d6c24914/href

Communication phase:

Publish/SubscribeThe Publish/Subscribe pattern encourage us to think hard about the relationships between different parts of our application.

Publish/Subscribe pattern saves a TOPIC name and reference to a callback. When you publish the TOPIC it calls the callback.

👏 Thank you for reading. Suggestions, comments, thoughts are welcome 👍

If you like this, clap, follow me on medium, twitter, share with your friends 😎

Communication between components was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Publication date: 
05/16/2018 - 19:48