Originally the frontend was written using a generic Object Oriented model. This led to a great deal of technical debt, complicated UI interactions, and overall confusing code.
I rewrote the frontend over the course of a single evening to use an event driven model and the results were fantastic. The library used for the refactor was tiny-pubsub.
Over time a god object emerged which led my frontend client to have anti patterns littered everywhere. This article will describe how my mega class emerged and how I ended up solving that problem by using tiny-pubsub.
The Original Model
The original state management model for the bullets took an object oriented model. A central StateManager class managed the entirety of the game’s state by delegating each entity it’s own Sub-Manager.
These managers attempt to guess the current state of entities based on the last update the server pushed out through websockets. This allows the game to run using very low amounts of bandwidth while still displaying the real time state of each entity.
This led to a ton of problems over time - primarily on the fronts of readability and maintainability. The state of the various entities became intertwined over time and it became difficult to hunt down state related bugs.
The largest anti-pattern the old model used was having a god object, the top level State Manager.
This state manager ended up being responsible for all sorts of things and was passed as a parameter to tons of UI functions.
Here is the file that handled displaying the count of active players in the old system:
update_player_counter had to be called elsewhere every time a new player spawned or died.
Throughout the code base there were three incentations of this function. Two in
and another in the state handler
As an isolated incident this was not terribly painful, but when the function calls across all UI interactions accumulated the resulting code was difficult to understand and maintain. The resulting code tightly coupled UI interactions and state management. Other classes end up being responsible for triggering UI updates.
The resulting code is heavily coupled. It intertwines UI interactions with state management.
state handler ended up being responsible for triggering UI updates and was an argument to nearly everything.
Almost every method, ui interaction, etc needed to store a copy of a state handler.
This mean’t every time I registered an event listener I would need a state handler handily stored nearby.
By the time I had a complete frontend the name
state_handler showed up in well over
70% of files.
Decoupling the Code With Tiny Pubsub
But what it does do is encourage a decoupled codebase through the event driven programming paradigm.
Here is a self contained example:
The Refactored Model
The refactored model is significantly more distributed in terms of code organization. In the new model each entity is described by series of callbacks defined in a single file. The callbacks respond to published events and update the state of the entities. These events are published from other self contained modules that are solely responsible for firing these events.
For example, the file
tick.js looks something like this…
Each event file is responsible for only one type of event. Some events are triggered by other events and mutate the data a bit for use by other modules.
The UI interactions are also handled in self contained modules.
Here is the new version of
The state management is implemented through small self contained modules. Here is the example for bullet state management:
Everything remains self contained and simple. Here is an organizational diagram displaying the event based frontend architecture.
Result of Using Event Driven Programming
Rewriting bulletz.io to use an event driven model resulted in strongly decoupled logic. The frontend code for bulletz.io is significantly simpler and easier to follow. As a side effect the several UI bugs were fixed. The UI updates as well as state updates are written as self contained modules that respond to data emitted elsewhere.
I’d recommend giving event driven programming a shot if you are writing a web page any time soon without a framework! The library I wrote for the problem is called tiny-pubsub and the Github link can be found here.
Also be sure give bulletz.io a try!