From developer to architect

What is a frontend architect?

A Front-end Architect is responsible for creating and documenting architectures for large-scale front-end applications. As an architect, you will be involved in the work of multiple teams across the organization. They ensure code standards and style guides are followed, establish workflows for teams, and prioritize goals like scalability, security, testability, accessibility, maintainability, and robustness. Additionally, they analyze and build UI Pattern Libraries, including Design Systems and UI Kits.

In my case in the past year it meant working with 5 different teams, establishing various forms of documentation, leading an update from Vue 2 to Vue 3, leading a large initiative for making the application more responsive, introducing Typescript to the codebase, helping improve the testing environment and coverage and planning various forms of security improvements, while also creating some proof of concepts around AI based functionalities.

Apart from fronted architects, there are also architects in other parts of the system like the backend or devOps area. This roadmap gives a rough idea of some topics a software architect should know about.

Responsibilities of an architect

Front-end Architects provide critical technical leadership by leading code reviews, ensuring standards adherence, and establishing secure practices. They address compatibility issues, review accessibility and security guidelines, and optimize templates and JavaScript implementations. Additionally, they play a key role in generating documentation, evaluating frameworks, implementing workflows, creating pattern libraries, and guiding performance testing. Below is a concise breakdown of their main focus areas:

1. Technical Leadership and Guidance: ███████ 22%

2. Documentation, Tooling, and Updates: █████ 14%

3. Architecture and Tech Specs: ███████ 18%

4. Code Review and Quality Assurance: ████ 13%

5. Meetings and Collaboration: ████ 12%

6. Development and Coding: ████ 10%

7. Strategic Planning & Roadmap: ██ 6%

8. Miscellaneous Tasks: █ 5%

In my role, I lead regular frontend synchronization meetings with the entire product team's frontend developers, conducting check-ins and analyses for improvement. Taking the lead in documentation, I actively encourage developers to participate in these efforts. Actively involved in the code review process, I allocate 30-45 minutes daily to our codebase for code review. Strategically, my focus extends to cross-team goals like responsiveness, security, accessibility, testing, and software quality. Crafting plans for these goals, I aim for shared strategies across teams, gradually incorporating them into sprint work. Often, I work on the initial establishment of new approaches. In terms of development and coding, the focus lies heavily on refactoring, enhancing the CI environment, implementing automations, assisting fellow developers, and working on new proofs of concepts that could potentially become part of the product.

Compared to a senior software developer

In comparing the responsibilities of Front-end Architects and software developers there are clear differnces. Front-end Architects prioritize technical leadership, standards adherence, and comprehensive documentation, while software developers concentrate on feature development, testing, and bug fixes. Both roles share a commitment to code review and quality assurance. Software developers engage in daily stand-ups and sprint meetings with their team, whereas Front-end Architects participate more broadly in meetings and collaboration with various stakeholders. Both positions recognize the importance of mentoring, fostering knowledge transfer and skill development within the development team, highlighting their collaborative and supportive roles in achieving project objectives. Here is a rough breakdown of the focus areas of a senior software developer:

1. Feature Development: ████████████ 30%

2. Testing and Bug Fixes: █████ 25%

3. Code Review and Quality Assurance: ███████ 20%

4. Daily Stand-ups and Sprint Meetings: ██ 10%

5. Documentation & Mentoring: ██ 10%

6. Miscellaneous Tasks: █ 5%

Transitioning from a tech lead role, my responsibilities shifted quite a bit. My focus on developing features and addressing bugs decreased notably. While I still lend a hand to developers facing challenges, it's not a primary responsibility to develop features anymore. Stand-ups and sprint meetings reduced, making room for more collaboration and strategy discussions to tackle substantial goals. While I remain involved in sprints, my role leans towards the end, coordinating with our QA team and ensuring releases meet our quality standards. Additionally, I handle communication with the rest of the company to keep them informed about system changes and introductions. I also have discussions with the product owners, CTO and team leads about upcoming features and how they might be shaped.

Key Skills for a Front-end Architect

Communication Expertise: A Front-end Architect must excel in communication, tailoring their message for diverse audiences. This includes providing detailed documentation for fellow front-end engineers, incorporating code samples and pseudo-code, and abstracting technical details for stakeholders, directors, and VPs.

Technical Proficiency: A solid foundation in various technical aspects is imperative. This includes expertise in HTML, advanced CSS features, pre-processors like LESS and SASS, responsive web design, and JavaScript, including frameworks such as Vue.js, Angular, Svelte, or React. Performance optimization and debugging skills are also crucial.

Technical Breadth: Beyond mastering core front-end technologies, a Front-end Architect needs a broad understanding of tools such as Git, Build Tool like Webpack, and NPM scripts. They also need to be familiar with overarching frontend-topics like security, accessibility, performance and quality analysis. A certain knowledge of databases, load balancers, and CI pipelines is essential, showcasing a technical breadth that extends beyond the front-end layer.

User Empathy: Described as a "superpower," user empathy remains a pivotal skill. A Front-end Architect, operating closer to end users, must retain this skill even as their role involves thinking at higher levels and in more abstract terms. Staying connected with users and understanding their needs is critical.

Other important characteristics: Beyond technical skills, certain characteristics are vital. These include UX/UI sensibility, a passion for programming, effective communication skills, critical thinking abilities, a commitment to continuous learning, being a team player, and demonstrating efficient time and task management.

Time Management and Prioritization

Efficient time management is a critical skill for Frontend Architects, who often find themselves overseeing multiple projects concurrently. Unlike individual coding-focused roles, the responsibilities of a Frontend Architect demand effective prioritization and allocation of time across various initiatives. Initially, this might involve extra hours to navigate the complexity of the workload. Over time, experienced Frontend Architects can identify and focus on top priorities, delegating tasks appropriately and maintaining a well-structured schedule that aligns with a healthy work-life balance.

Starting this role was a bit of challenge because it also depends a lot on how the teams are set up. In the beginning I introduced key quality tools like Sentry and SonarCloud to identify codebase issues and analyze coverage. Rolling out Vue 3 across teams was a major effort, detailed in this article. Now, with more time in this role, distinguishing my responsibilities and prioritizing tasks is a lot easier. For time management, I block out 1-2 hours each morning for critical tasks: documentation, tooling, updates, addressing requests, strategic goals, tech specs, and experiments. The afternoons I reserve for communication and less focused work as well as mentoring and helping other developers.

Does an architect still code?

Frontend Architects, while still engaging in coding activities, allocate a smaller percentage of their time to this aspect, typically ranging from 10-20%. This shift from valuing contributions solely based on lines of code reflects the broader impacts and strategic responsibilities inherent in the role. The percentages assigned to various responsibilities, such as technical leadership, documentation, architecture, and collaboration, underscore the multifaceted nature of a Frontend Architect's contributions. This role emphasizes being a force-multiplier for the team's success, strategically guiding projects, and fostering a collaborative environment.

In my current role, coding is still a part of my tasks, although it's notably less focused on actual features. I engage extensively in dependency updates, GitHub actions automations, specific bug or security fixes, necessary refactorings linked to architecture changes, and experimental features that may or may not find their way into the product.

Roadmap to becoming an architect

The journey to becoming a Frontend Architect often involves years of experience as a Frontend Engineer. There is no fixed roadmap, but gaining expertise in the mentioned skills and progressively taking on more responsibilities in decision-making will contribute towards becoming one. Becoming a Frontend Architect is not only about acquiring technical skills but also depends significantly on the structure and needs of the company you work for or going to work for. The role's specific requirements can vary based on the organization's size, industry, and the complexity of its projects. In some companies, a Frontend Architect might be responsible for the entire frontend stack, while in others, they may focus on specific domains or collaborate closely with other architects. Here are some areas you can focus on if you want to work towards becoming an architect:

Diverse Project Experience

In order to become an architect you need to gather experience in various different project, it should go beyond just mere programming tasks towards actual decision making on those projects. Focus on developing high-level decision-making skills, understanding the broader impact of choices, and navigating different project dynamics.

Master High-Level Decision-Making

Guide the design of large systems by collaborating with designers, backend engineers, and clients. Sharpen your ability to communicate technical solutions effectively, translating them into actionable tickets for development teams.

Beyond Traditional Frontend

Extend your responsibilities beyond conventional frontend tasks. Dive into backend considerations, including API design, theming automation, and effective client communication. Prioritize code consistency and reliability across a significant development team.

Continuous Learning

Allocate approximately 15% of your time to stay abreast of the latest JavaScript technologies. Embrace a continuous learning mindset to adapt to industry changes and maintain relevance in the ever-evolving tech landscape.

No Fixed Timeframe

Understand that the journey to becoming a Frontend Architect lacks a fixed timeframe. Typically requiring years of experience as a Frontend Engineer, this progression involves a gradual honing of technical and leadership skills as well as the company in need of this role.

Key Skills for Success

Manage multiple large front ends effectively, contribute to the development of design systems, and build developer-centric component libraries. Acquire architectural experience, focusing on different trade-offs between technologies and company needs.

Conclusion

In my journey as a Frontend Architect over the past year, I've seamlessly woven through the complexities of coordinating with five diverse teams, driving a Vue.js upgrade, leading initiatives for enhanced responsiveness, integrating TypeScript, fortifying testing environments, and orchestrating robust security enhancements. This role extends beyond conventional frontend tasks, delving into the intricacies of backend considerations and shaping decisions that impact large systems. While coding remains a part of my tasks, it's now entwined with diverse responsibilities— dependency updates, GitHub actions automations, bug fixes, refactoring linked to architecture changes, and experimental features. Efficient time management, prioritization, and continuous learning are vital, as is the ability to communicate important topics to varied audiences. In comparing the role to that of a senior software developer, the shift is evident—less emphasis on features, more on leadership, documentation, and strategy. Becoming a Frontend Architect is an organic progression, shaped not only by technical prowess but by the dynamic needs of the organization. The roadmap to becoming an architect can be diverse and depend a lot on your overall skills and the companies need.