relayr logo

Tech Blog

Frontend Overview

author

Lucas Mathis, Frontend Team Lead

May 10, 2019


Hello and welcome to the relayr Engineering blog!

The frontend team at relayr is made up of 13 developers spanning three offices in two countries: Munich and Berlin in Germany and Katowice in Poland. It’s our job to build useful interfaces for our customer-facing dashboards and internal administration tools to match the functionality provided by the backend team. This post will be a high-level overview of what we do, the technologies we use to do it, and how we organize the work as a team.

Our frontend stack is centered around React. We’ve recently updated to version 16.8 and have been experimenting with adding React Hooks to parts of our codebase. For code style we use a modified version of AirBNB’s ESLint rules, along with Prettier to ensure consistent formatting throughout. Between ESLint and Prettier we’re free to build things quickly without “sweating the small stuff” in terms of code style or format.

To support React we use Redux for state management, CSS Modules for component-specific styles, i18next for translations, Docz for internal component documentation, and Lodash as a JavaScript Swiss Army knife. For testing our code we use Enzyme and Jest for unit testing, and Selenium for integrated browser tests.

Instead of reinventing the wheel when it comes to buttons and dropdowns, we use the React version of Semantic UI as a component library. Working in conjunction with our design team we’ve restyled all of the Semantic components, so we have access to a full library of components created by an open source community while still following our color palette and style guide. For charts and graphs we use Highcharts, and for maps and address geocoding we use Mapbox.

We use Webpack 4 as a dev server and to bundle our production-ready code. Recently our team has been working to centralize our configurations (Webpack, ESLint, Prettier, etc.) so we can make changes in one place and see them reflected in all of our various repos. We use Github to store our code, as well as Github issues to discuss design decisions and evaluate changes to our platform.

Now that we’ve discussed all of our technology… what exactly do we build with it?

Our work is split into two main types. The first part is what we call “product work,” which means building and improving the components and modules. One example would be a map module, which allows someone to visualize their IoT devices based on their locations. Our library of modules covers the most common use cases for our platform.

The product work supports us in our individual projects, which represent an application built for one of our customers based on their unique business needs. These customer-specific dashboards combine our modules, which can be imported to give users a ton of basic functionality out of the box, with custom development we do to support each customer. This includes different types of data visualization, device administration, and anything else that helps us build something truly useful for a given customer.

And so you have a high-level overview of the tools we use to build the relayr frontend. For deeper dives into the details, check out the rest of our blog, and if you’re a frontend developer and this tech stack seems interesting to you, please check out our hiring page. We’re always looking for talented developers to join our team :)