Mark Roeser bio photo

Mark Roeser

Mark is VP Engineering leading the UI team, developing applications and microservices that provide our clients and internal users the tools to collaborate and launch campaigns. We embrace a modern stack that employs things like Java Spring, Node.js, Angular, Kafka, Docker etc.

Email

Today we are excited to share something we’ve been working on for a while: Conversant UI. Call it a component library, call it a design system, for us is a blending of art and engineering that brings consistency and best practices to the applications we build.

We are making it public today to share what otherwise only a few lucky client and Conversant users have seen: cui.conversantmedia.com

0

It’s an ongoing collaboration of UI/UX designers, front-end engineers and product owners. Many design systems stick to markup and styles, with some vanilla JavaScript. Here at Conversant we’ve embraced Angular across our web applications and built it into our components.

Open source style collaboration

Conversant UI doesn’t have a dedicated team that works on it. Even the engineering lead has a ‘day job’ as part of one of the product teams. Instead, we organized the project along the lines of an open source project, with contributors coming from the various teams that use it. As new requirements are identified, someone from the project that depends upon a new feature will work on it, coordinating the approach with the lead engineer and ultimately submitting a pull request to get it incorporated in the library.

Approaching things this way has several benefits. First, teams that would otherwise be blocked and lobbying for priority instead pick up the work directly themselves. This way, the project naturally reflects the collective priorities across the teams and moves everyone forward. Second, front-end engineers who are otherwise working on separate project teams are able to share approaches and learn from one another, leveling up our practices across the board. To date, we’ve had at least 15 contributors to the project since the initial commit last August.

1

Not our first go at it

Conversant UI replaces an earlier library that we built with Angular.js. With the disruption/discontinuous break that came between Angular.js 1.5 and Angular 2+, we took the opportunity to have a corresponding reset of our component library. In the first version, in an attempt to accommodate non-Angular.js projects, we separated the markup and styles in a separate library. We also had a third library for charts, so that projects not implementing charts didn’t take the hit of downloading the d3.js dependency.

That 3-way separation proved to be a maintenance burden, and since by then all new projects coalesced around Angular, we embraced it as our standard and simplified the project into a single library. The good news is that it’s still possible to tailor what is included, as the chart components are loaded as a separate module. We also document how to reference just the markup and styles for any projects not using Angular, so with our new approach we get ease of maintenance without giving up the flexibility.

Mini

Here at Conversant we have a special team focused on automating the creation of our personalized ad content. This team has produced a number of award-winning systems that include extensions of 3rd party desktop design tools. The limited real-estate in which these custom extensions work provide their own set of design challenges, so the UI/UX team has codified a version of Conversant UI that we call “Mini.” This gives us all of the advantages of that the “full size” gives us: reusable design and code that ensures best practices are baked into things we build every day. This Mini library is also written in Angular and is built on top of the Conversant UI library.

2

We’re quite proud of what we’ve built so far. Please have a look. If you have thoughts or questions on best practices, we’d love to share notes. If you like what you see, reach out about joining our team!