Web Components Design Pattern
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.
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.
