I got stuck writing a post about how to interview frontend engineers and realized I first need to outline the various types of frontend archetypes that I came across throughout my career.

Frontend engineers are known for their high attention to detail, craftsmanship in the products they deliver, and expertise in JavaScript and CSS. However, not all frontend engineers are the same. In this post, I’m exploring four common frontend engineering archetypes that often apply regardless of seniority: Product Engineer, UI Infra Engineer, Designer, and Tooling Infra Engineer. Which one are you?

Product Engineer

This is the default archetype for most frontend engineers. Product Engineers are responsible for the development and maintenance of the products that a company offers. They work closely with product managers and designers to understand the requirements of the product and ensure that it meets the needs of the target audience. In addition to coding, they also run A/B tests in production to improve metrics and make data-driven decisions about the product.

Product Engineers typically only use JavaScript, CSS and the primary backend language used to build products, and they don’t stray too far off the beaten path. Depending on the team size, they might work with other frontend engineers but more often than not they are the only frontend engineer on a team of backend engineers. They tend to have an overwhelming responsibility of instilling frontend and UI/UX values in the whole team.

Product engineers with many years of experience are usually involved with designing and adopting frontend components and design systems. By gaining experience in this role many people later move towards the UI Infra role:

UI Infra Engineer

UI Infra Engineers are responsible for building design systems and reusable components that allow Product Engineers to work more efficiently and deliver high-quality products that are consistent across the entire range of the company’s products. Many UI Infra Engineers started their careers as Product Engineers but moved on to focus on building infrastructure for other Product Engineers.

They work closely with designers and multiple product teams to understand the needs of the organization and ensure that the design system and frontend infrastructure support the organization’s goals. They might take existing components from a product team, refactor them and then make them reusable for all other product teams.

UI Infra Engineers are experts in the company’s design system and frontend, and may frequently join product teams to help them get products out of the door. They are also often the ones advocating for large-scale migrations, such as moving from one design system or frontend framework to another.

Designer

This archetype applies to frontend engineers with a strong sense of good design. Such frontend engineers can bridge the gap not only between the frontend engineering and design teams but also between the project managers and customers. This heavy focus on cross-functional collaboration ensures that the product looks and functions as intended. They can take complex design concepts and translate them into working code, while also providing valuable feedback to the design team.

By having a strong understanding of both frontend engineering and design, they can push back on poor designs and come up with designs on their own that solve UI and UX problems that the team has been facing. They may also be able to directly edit the design team’s work with the tools that they are using.

The two common ways in which somebody becomes a design-focused frontend engineer are either a designer who moves into the frontend engineering role or a frontend engineer who moves into a design role. People who are exceptional at this role are rare, and your product team is lucky to hire people who personify this archetype!

Tooling Infra Engineers are responsible for ensuring that the frontend development process is efficient and effective beyond the design system. This includes production builds, developer experience and velocity, testing infrastructure, linting, IDE plugins and everything else in the path of a frontend engineer to getting a product shipped.

They frequently jump across multiple technologies as they integrate the frontend toolchain into other build systems and infrastructure of the company. A successful tooling infrastructure team is mostly invisible as they keep systems running and codebases scaling with minimal friction, and an exceptional tooling infrastructure team is the one that keeps coming up with 10x improvements to developer velocity and production build times.

To summarize, Product Engineers are responsible for building and maintaining the products that a company offers. UI Infra Engineers build design systems and reusable components that are used by the entire organization. Frontend engineers with a design sense bridge the gap between the engineering and design teams. Tooling Infra Engineers work at the intersection of frontend and build infrastructure, ensuring that the frontend development process is efficient and effective.

Depending on your company you might have multiple folks in all of these roles, or if you are working at a small startup you might find that one or two frontend engineers share all of these responsibilities.

I hope this post helped you understand what frontend archetype you might excel in, or at least it made you think about your skills and interests which is always a good topic for your next 1:1 with your manager. If you came across an archetype not listed above, please tell me about it!