Extending Global Event System with Typescript Generics

NickSettler — Thu, 04 Aug 2022 11:06:00 +0000

Intro

In the first part we have gone through creation of the initial Event System. It allowed to track events happening anywhere in the code and trigger handlers for these events.

Anyway, the events currently must be predefined in the source code of the Event System. Also there is no event buffering, which means some code that has to process older events would not be able to retrieve them.

Undoing Singleton Pattern

Due to impossibility to pass and store types to Event System made using Singleton pattern, it is necessary to remove this pattern. So this post expects working with code without private constructor, getInstance method and instance field of the Event System class.

After implementing this part, the Event System should always be initialized and stored in the code as a separate module.

Custom Event Types

The current implementation allows to set predefined list of events that can be tracked via the Events System. Using such implementation as a library will not allow third party developers to extend this list according to their own needs. Also such lack makes code hard to refactor.

To fix this issue we can use the power of Typescript with generics, which will make third party customisation easier.

Types and Interfaces Refactoring

Firstly, it is necessary to update type definitions including Event System class types.

Event System is expected to work with object-like types, in which key is a name of the event and value is a function that will be triggered when the event happens. So we can refactor our types to accept this kind of variables using TypeScript generics.

Using this refactoring makes it possible to pass a type containing key-value pairs of events’ names and their handlers. Such refactoring will be useful while adding generics to the Event System class methods.

Class Methods Refactoring

To make Event System class methods work with events type passed via constructor, it is necessary to pass a type containing event’s names that will be handled.

After this update it will be possible to present the event name via generic while calling the function. Anyway, passing event name via generic is not necessary, because it is also passed as a function parameter, so it will be bound to generic key and this will ensure type safety while passing handler function or its parameters.

Events Buffering

Events buffering can be useful when some of the Subscribers attach to an event too late when the event has already been triggered. This missed event trigger may be important for the Subscriber, but in the current implementation it is unable to get it afterwards.

Events buffering implementation will store the few last events. If the subscriber will attach later, he will receive the last few events and will have the possibility to handle them.

To implement this feature is necessary to install third party lib Mnemonist, which has functionality of fixed length buffers. The last item is deleted when there is a new item in such kind of buffer. This is useful to prevent storing all events, which can potentially fill a lot of memory even if they will not be needed anymore.

Buffer Typing

The Event System should have availability to configure buffer behavior. For this purpose it is reasonable to introduce a few more types. The current buffer implementation assumes setting buffer direction from the following (First-In-First-Out or Last-In-First-Out) and buffer size.

Event System Class Buffer Introduce

To setup buffer configuration it is required to pass buffer setup options via Event System constructor parameters. These parameters should be also made optional, so the Event System can be easier used as a library by third party developers.

The Mneonist data structure called CircularBuffer will be used to store a particular number of the last events. It will make sure that the number of events stored in the array is always constant.

Buffer Processing Logic

To store past events and trigger their handlers from new subscribers, it is necessary to update Event System methods.

subscribe method should check if there are any events in the buffer, in which a new subscriber is interested.

notify method should store all the events it receives in the buffer, to make their processing available for the subscribe method.

Usage

Currently implemented logic makes it possible to initialize the Event System in a separate module and use it anywhere in the code. TypeScript with generics provides availability to set custom event types and ensures event handlers and arguments are passed with required data types. Events buffering affords events to be buffered and available for late subscribers.

Github Repository: https://github.com/NickSettler/events-system

Build a Global Event System With TypeScript

NickSettler — Mon, 01 Aug 2022 00:36:00 +0000

Writing complex projects may require handling different events between components. Some of these components may be too far away from each other in the way of programming. Building a global event system to handle this can solve the problem.

Event System Pattern

Event System should contain the following methods:

subscribe(event, handler). This method is used to subscribe entities to receive events and run handlers of these events. It is gonna be used by an entity interested in some events.
unsubscribe(event, handler). This method is used to unsubcribe entities from receiving events. It is gonna be used by an entity interested in some events.
notify(event, ...args). This method is used to notify all entities, which are subscribed to the event, of the event that was triggered. It is gonna be used by an entity sending events to others.

What is Singleton

Singleton is a programming pattern that ensures that there is only one instance of a class in memory. This is useful for classes that manage resources that should only be used for one instance at a time.

The Singleton pattern is implemented by creating a private constructor for the class, which prevents other pieces of code from instantiating it. The only way to get an instance of the class is through a static method that returns the one existing instance.

Event System Singleton

Event System will use the Singleton pattern to avoid memory leaks and to make sure there’s only one Event System instance all over the code to ensure logic consistency. This will make the Event System class behave the same globally in the code and will allow getting access to Event System logic through getInstance static method.

Events

Event System will be able to trigger events and notify subscribers about them. This process should be as typed as possible. For the first time, events can be stored in the interface with their names, handler arguments, and handler return types. Later we will extend this using TypeScript generics so it will be possible to use your own types which will make the Event System more customizable.

Event Subscribers

Subscribers will be notified about happening events. Each subscriber will have an event it will get notified about and a handler that will be used to process the event.

Functions are non-primitives in the JavaScript world (moreover, they are objects) and are stored in the program as pointers. In this way, functions can be unique even if they have the same code inside. This allows discerning unique subscribers to use the event they are subscribed to and the event handler used for the event.

Subscribers Methods

Since subscribers field of the EventSystem class is an array, it is enough to add or remove an entry of the array. The logic of firing an event handler will be implemented in the notify method.

Notification Methods

Event System method notify will be used by components which intend to trigger some action. This method will fire all subscribers’ event handlers.

Usage

So after all this logic implementation Event System is ready to work. Currently, there is no possibility to extend events, so they should be predefined. Such extension and some other features will be implemented in the second part.

Github Repository: https://github.com/NickSettler/events-system

DEV Community: NickSettler

Extending Global Event System with Typescript Generics

Intro

Undoing Singleton Pattern

Custom Event Types

Types and Interfaces Refactoring

Class Methods Refactoring

Events Buffering

Buffer Typing

Event System Class Buffer Introduce

Buffer Processing Logic

Usage

Build a Global Event System With TypeScript

Event System Pattern

What is Singleton

Event System Singleton

Events

Event Subscribers

Subscribers Methods

Notification Methods

Usage