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 co

Answer 1

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.