Learning and development is an essential part of our EPD (Engineering, Product, and Design) team culture at Fieldguide. We meet every few weeks as a team to discuss new features, software design principles, and emerging technology.
In this post, we'll showcase a recent learning group presentation that showcased the architecture of our multiplayer feature, called "Live Updates", which enables real-time collaboration in our product.
At some point in the evolution of the learning group we decided that this was the place to show off our powerpoint skills. Now almost every learning group comes with a spectacular set of slides, sometimes meme-based, sometimes themed, always delightful.
While the majority of our engineering staff was already familiar with websockets, we try our best to make each presentation approachable to technical and non-technical folks here at Fieldguide.
Our Live Updates service and how it interacts with other parts of Fieldguide.
We chose Socket.io as our API for interacting with websockets. They have a large amount of community support (200+ contributors, and ~3.7 million users), fantastic documentation and a ton of out of the box features like, automatic reconnection, rooms, and a massive variety of event emitters.
Overview of a socket within the context of our application.
While Socket.io allows for a socket to join as many rooms as needed, we structured our rooms so that a socket can only join one at a time. This makes it easier for us to manage the join/leave events for each socket.
Overview of event types.
Overview of connect and disconnect events.
Overview of the different types of client side events that Socket.io has built in, as well as the client side events we emit.
Socket.io has a large amount of built in server side events. We spent time here diving into the Socket.io documentation on their website.
Our API definition and how to update it.
Overview of our React contexts. Separating the two contexts allows us to keep the socket connection logic abstracted from specific interaction logic within a feature. This also sets us up to use it in other areas of the application.
We weighed numerous options for live updating data and real time display. Ultimately we landed on Hasura Subscriptions, which play nicely with other parts of our product that use Hasura as a unified GraphQL API.
We love learning from our mistakes. We went over blameless postmortem reports written by our team members from working on this feature.
If an update you made feels too easy, it probably is!
Thanks for reading! If you like what you see here and want to join our team, we're hiring!