In one of the latest freelance projects of mine, my client prefers Vue.js, which is recently super popular on the frontend side. So, I dove into Vue. I can say that it is very practical and effective. Besides, when we compare it with other predominant competitors like Angular and Aurelia, we can easily notice Vue has a very small learning curve.

However, it didn’t take long for me to have a feeling that my code was getting unmanageable. This wasn’t a big surprise to me because this is often the trade-off with dynamically-typed languages.

Today, I am going to show an effective way of using global events in Vue.

A Simple Event Bus in Vue

The typical way of implementing a global event bus in Vue is just using the Vue object itself:

Super easy, right?

However, there are a couple of problems hidden under this cool dynamic syntax.

You may also like:
How and Why We Moved to Vue.js.

The Problem Coming From Strings

As long as our application has more than a couple of lines, sooner or later, we start stressing to follow which components publish and which others listen to them.

Therefore, we can imagine how hard it is to identify a simple typo in a string-based event name, especially in a large project:

Implicit Event Parameters

This is another problem we should notice because we don’t define any corresponding type or interface for our event — only God knows what and how many parameters might be in our event.

In order to identify them, we have to do these kinds of tests:

A Proper Solution Comes From ES6+

As a fan of the statically-typed Java world, I prefer using types clearly unless it’s super unconventional for the specific language. Thus, I will show a solution to get rid of these string-based event names by using the capabilities, which ECMAScript 6 and later offers.

Defining Event Types

Let’s create a separate file to define our event types:

As we notice, defining event type classes and parameters explicitly in constructor offers us great readability.

Although it is optional, we recommend keeping comments updated. This provides a way to follow the components, which deal with a certain event type.

Importing Event Types

To use our type-based events, we can easily import them into our components:

As we specify explicitly every event type we need, it brings us another important benefit that we can easily identify what events are involved in a component.

Registering an Event

In order to register our event, we simply use our event types and their static name properties:

Plus, we can expect the event type instance itself as a single argument instead of more than one arguments:

Publishing an Event

Now, we can publish our events simply by creating a new instance of that event type:

Implementing a Wrapper Class

Certainly, we may proceed to define a class, as EventBus and wrap the basic methods of Vue instance:

Therefore, we can use it in a more practical way:

Using as a Plugin

In addition, we may prefer to use our EventBus as a Vue Plugin:

Certainly, to be able to use the plugin, we should import and register it to our Vue instance:

Consequently, we can simply import and use our EventBus in any other Vue component as well:

Finally

In this short tutorial, I have explained how to implement type-based global events and use them in Vue.

You can find the code of the sample plugin over on GitHub.



Source link

Write A Comment