Frontend Enablement: Forging a New Path
Let me tell you a story about Sheila. Sheila always wanted to visit the rainforest. She loved tropical climates, the flora, the fauna. She dreamt about going for a while and finally saved up enough money for a trip. Soon, she was on a plane off to the tropics!
Once she landed, it didn’t take her long to get to her final destination. She went to bed early and woke up the next morning ready to go. Sheila, being the adventurous type that she was, decided to explore some lesser known parts of the forest. Now, she was no stranger to the outdoors. She spent most weekends hiking, camping, anything that kept her outside. She felt fairly prepared for the rainforest. On her first day, she grabbed her backpack and a map and headed out.
Things didn’t go well for Sheila.
She was in completely unknown territory. The map was mostly accurate, but it didn’t fully capture the view from the ground. There were vines, branches, trees, all sorts of things in her path slowing her down to a grinding march. The path she took was unpredictable and multiple times she had to double back to find a navigable route. It wasn’t the kind of hiking to which she was accustomed.
The first day was a bust. Having barely seen any of the rainforest, Sheila trudged back to her campsite tired and disappointed. But she didn’t lose heart! She decided to do things differently on the second day. This time she hired a local guide to help her trek through the forest.
Things went much better for Sheila.
The guide had spent time in the area and knew some of the better routes Sheila never would have been able to find. He walked out in front of her chopping through vines and branches clearing a path for her to walk. They cut across a few trails that had already been cleared by others. He even chuckled good-naturedly when she fumbled her way through the few phrases she knew in his native language. Working with the guide, Sheila was able to experience 10 times the rainforest she had the day before.
That day and the subsequent days were a great success. Sheila saw everything she had hoped to see and more. Her expectations for the trip had been high. As she traveled back home, she reflected on her trip knowing it had exceeded her expectations.
SalesLoft’s Rainforest
Like Sheila traveling to see the rainforest, SalesLoft Engineering has been on our own frontend adventure over the past year. We’ve started migrating our Angular 1.x application to React, updated our build process from Rails’ Asset Pipeline to Gulp to Webpack 1 to Webpack 4, introduced new testing libraries and infrastructure, extracted our frontend application from our API server, and created a monorepo we now use for all cross-client frontend code.
Whew.
That’s a lot of change for a relatively small engineering department to go through in a single year. This all happened in parallel with feature development as well. We didn’t (and still don’t) have the luxury of stopping everything to make sweeping changes to our frontend processes or implement a new technology. We felt similarly to Sheila after her first day. How do we handle all this change? How do we make sure product teams can deliver value to our customers quickly while still moving forward with so many of these new initiatives?
We took a multi-pronged approach (my teammate and partner-in-crime Pete Finn recently wrote about our internal frontend meetup) but a primary component was creating a team focused on frontend enablement. This move was inspired by Spotify’s GLUE team especially, as well as by larger organizations like AirBnB and Atlassian who have multiple dedicated enablement teams. We want to share our experience with the community, elicit feedback, and spark conversation.
Rhythm & Blues
In December of 2018, we created the Rhythm & Blues team (all engineering teams at SalesLoft have nicknames). This is the team I’m on and we’re focused on accelerating the rest of the organization’s frontend development.
Much like Sheila’s guide, our job is to understand the wider terrain we’re navigating as an engineering organization. We clear the path for others to move faster. We are aware of paths others have cleared that we can use to our advantage. At a high level, we codified this via the mission statement in our team charter:
We facilitate higher team productivity, better frontend code quality, and continuous development of people by providing libraries and components, educational resources, and governance to key front end initiatives.
Practically, this plays out in many ways.
Building
We proactively build out our internal UI kit. Our product teams need atomic components that adhere to our design standards that they can use to compose UIs quickly. With the move to React, we have a blank slate to build all these components well. Our design team has done a fantastic job developing specs for our atomic UI elements. We are converting those specs into reusable components that can be used across our different client applications.
Coupled with this work is maintaining the infrastructure for the frontend monorepo that houses all these components. We publish our components as multiple small packages to an internal NPM registry. A monorepo helps us manage this process well and provides necessary structure and enforcement around documenting, versioning, and publishing packages.
Collaborating
We work with design to stay ahead of product teams, building foundational components they’ll need once their feature work starts. There may be a feature on the horizon that’s completely new. We don’t have any building block components for teams to use. Or it requires spiking on new technologies or paradigms to build the feature. We pave the way by preparing those building blocks or spiking on unknowns so product teams can deliver value to our customers more quickly.
We also coordinate with Product and Design to find alignment on prioritized projects. Product is on the front lines with our customers, listening to their feedback and understanding what’s most important to them, in order to guide our roadmap so we as an organization can deliver more value for our customers. Design has their thumb on the pulse of where our products are going next from a visual and user experience perspective. Having an open line of communication with both departments is vital to ensure Rhythm & Blues is focusing on the right things at the right time.
Educating
Documentation is a significant part of our work as well. As frontend initiatives change, those changes must be codified and communicated throughout the organization. We work on best practices documentation and updates via email, our internal knowledge base, and project READMEs/docs. We also share through talks at our internal meetup and more focused lunch ’n learns. All this is to bring cohesion and consistency to how our frontend projects are built and maintained.
Another area we’re helping teams grow is through leveling up less experienced developers internally. We hired our first junior UI engineer at the beginning of this year (shout out to Adrianna Valdivia) and we’re extremely excited to have her on our team! Rhythm & Blues will be a landing spot for newer engineers to grow, hone their frontend engineering skill set, and learn what it means to be a SalesLoft engineer specifically.
Now and the Future
How is all this going? We think it’s gone pretty well. One of the challenging opportunities for this team is defining what our metric of success is. That’s going to be a continuing conversation over the next few months. In the meantime, we’ve already seen some great wins and we have more lined up for the immediate future.
We’ve grown the UI kit by a factor of 5. Our frontend monorepo just underwent a major infrastructure refactor enabling it to scale much more effectively. Our junior UI engineer is fully on-boarded and getting code into production. We are currently working on a significant set of “building block components” paving the way for a double-digit percentage of our primary web client getting refactored from Angular to React. And our meetings with Product and Design have resulted in helpful reprioritization as company initiatives shift.
At SalesLoft, our expectations for ourselves are high. We are relentless in pursuing our goal: “Activate the authentic seller in all of us.” In the coming months, Rhythm & Blues will play an important role in empowering the engineering organization to exceed expectations and deliver more value to our customers faster.
It’s exciting to see this team fully ramped up. We know we still have things to figure out but we’re gaining momentum quickly. We would love to hear from other organizations who have either gone through this process or are thinking about it. What’s worked for you? What are your considerations in putting together a team like this?
Ray is a UI engineer at SalesLoft working on the frontend enablement team. He loves working with full-stack JavaScript and learning Elixir.
