Web Components Design Pattern

Question

Anyone have idea about the common design problems we face in web components designs. I have started with Vuejs/ReactJS and Angular 2 but the most common problem I face is communication between components. I want to talk to other dynamic components and pass some data to it expecting data in return.

Like I have a repeated list of items and all the items I have to open a option picker menu(reusable). And I want to get back a callback as well when a option is selected. You can think of common Modal or Popover residing under the #app element.

Somehow I achieved this using PubSub pattern but don't think that it is good idea to use. Please suggest if anyone have any better idea about it.

Answer 1

In Angular 2, use services to share data and to communicate between components. For options picker, create a common menu component in your app's shared folder. Pass options array as @Input() to display menu options dynamically and upon click, you can emit ActionId or anything else unique to that action then using pub/sub you can perform any action in any component.

Answer 2

In vuejs, there are multiple modes you can communicate between dynamic components.

• With props and events
• With event bus
• With centralised state

props and events

Communication between parent child components can be very trivial with help of props, which can take data from parent to child, and emit, which can raise events from child to parent. You can see a sample implementation here.

event bus

Non-parent child communication can be handled by a central event bus, with which you can send event to any other component, and as well listen to event raised by any component. To give an example:

var bus = new Vue()

in component A's method

bus.$emit('id-selected', 1)

in component B's created hook

bus.$on('id-selected', function (id) {
  // ...
})

Centralised state

However to prevent logic of communication become unmanageable, one can use a central state management, which can keep track of state, which can be accessed and updated by all the components. Here you can find a simple implementation of state management in very raw manner. How ever more popular among the community is vuex an Elm-inspired state management library, which is actually very similar to redux in functionality. You can see a sample implementation of this here.