What is a Front-end Architect?

Front-end development is becoming more challenging every day, new tools, new frameworks, new paradigms are emerging so fast that it is almost impossible all our front-end engineers can handle the complexity of evaluating which is good, why and when to apply certain tool or approach, what choice is the best for a specific project, the need for a new professional, an expert in this kind of decisions and evaluations is obvious.

We require Front-end Architects.

Some time ago, I proposed a new position in the previous company where I worked back then, that position was evaluated, but was not fully formalized.

That proposal raised some immediate questions, that I would like to share:

• What is a Front-end Architect?
• Which responsibilities this person will have?
• Which are the characteristics a person in this role should have?
• How about experience, knowledge? Let’s start step by step.

Front-end Architect: the role

A Front-end Architect creates and documents architectures for large-scale front-end applications. They are in charge of reviewing the implementation of applications following code standards and style guides. They set the workflows for their teams that ensure everyone uses the same tooling; having scalability, security, testability, accessibility, maintainability, and robustness as some of their main goals. Analysis and building UI Pattern Libraries (Design Systems, UI Kits, etc.) will be part of their daily work.

Responsibilities

As a professional in this position, Front-end Architects have the following responsibilities:

• Lead front-end code reviews with their teammates.
• Run reviews to guarantee the structure and design of the applications follow the standards and guidelines.
• Define practices to ensure the applications they are building are secure and don’t have vulnerabilities.
• Solve complex CSS and HTML compatibility issues in legacy browsers.
• Review the Web Content Accessibility Guidelines (WCAG) and Section 508 (if applies) are being satisfied in the project.
• Optimize logic-less templates using front-end template engines.
• Optimize JavaScript implementations.
• Generate documentation about UI architecture, interactions and behaviors with REST APIs or any other mechanism to process data (e.g. GraphQL, etc.).
• Document and assist in defining functional and technical requirements of different applications.
• Evaluate new frameworks and tools that can be integrated into the existing applications without breaking previous implementations.
• Implement front-end development workflows: building systems, dependency management, quality checkers (linting), etc.
• Create pattern libraries and style guides according to the project’s requirements.
• Guide performance testing and solve issues as they appear.

Characteristics

• UX/UI sensibility: using technical abilities and creativity to design and develop exceptional interfaces.
• Passionate about programming from a purely scientific skill into an art.
• Communication skills: clearly communicate complex ideas and proposals. Understanding problems clearly, break them down and propose solutions.
• Critical thinking style: deconstruct a problem into its base components and figure out the most effective way to solve it.
• Learning as an ongoing process: challenging themselves to learn new skills, languages, and technologies.
• Team player: Efficient and effective collaboration with other teams, managers, and other stakeholders, always keeping teamwork in mind to accelerate time to market of the proposed solutions.
• Effective time and task management: Able to organize and set priorities accordingly, in order to meet all goals set between Business/Product and Engineering.

Experience

At least five years of experience or five to ten projects as a Sr. Front-end Engineer.

Knowledge

Tooling / Workflow

• Git and social coding platforms Bitbucket, Github, Gitlab, etc.
• Configuration and tools for running custom tasks, e. g. Webpack, NPM scripts, Rollup, etc.
• Package management: npm, yarn, etc.
• Testing: unit, integration, canary, and e2e testing.
• Accessibility tools: Tenon, SortSite, Axe, WAVE, etc.

Architecture

• Guidelines and coding conventions: HTML, CSS (pre-processors and methodologies SMACSS, BEM etc.), JavaScript, TypeScript.
• Component-based development and integration.
• Performance driven development.

Development

• HTML.
• Advanced CSS features such as Flexbox, animations, Grid CSS. CSS techniques with or without frameworks.
• Preprocessors such as LESS, SASS.
• Responsive Web Design and Development (includes device debugging).
• Accessibility: WCAG 2.0 AA and AAA. Section 508 (if applies).
• JavaScript: VanillaJS; at least one framework to create Single Page Applications / microfrontends, such as Vue.js, Angular, Svelte or React.
• Performance optimization and debugging.

This is just part of what I proposed, there is a more complete and detailed technical competency matrix, but that is a topic for another article.

Best regards.