5 WAYS TO LEVEL UP AS A FRONTEND ENGINEER

After 6+ years of building web applications, it has become clearer to me that exceptional frontend engineers don’t just build user interfaces, they take ownership of outcomes, think in systems, and relentlessly pursue deeper understanding of the craft.

In 2018, I made a decision to change career path from healthcare practice to software engineering. I had been practicing Pharmacy for about a year since graduation from university. After committing time and resources to learning how to code, it did not take quite long before I landed my first role as a frontend engineer. I needed to be exceptional in software engineering just as I had excelled in healthcare practice. So I leveraged every opportunity to learn about software engineering best practices, clean code patterns, etc. It’s been over 6 years since I started developing web applications and recently I was honoured to receive this recognition from the company I currently work for. So I decided to share my thoughts on the question: what does it take to level up as a professional frontend engineer?

After reflecting on my experience so far, I came up with a list of 5 things that can make any frontend engineer experience tremendous growth and success in their career.

Ownership

Take ownership of every aspect of the client-side of your application or any feature assigned to you. From visual consistency with the UI/UX design, cross-browser compatibility, performance optimisation (bundle size, how fast a page loads, how fast a UI element responds to user interactions), accessibility compliance, error handling, security, component reusability, etc. The point I’m trying to make here is that an exceptional frontend engineer is a lifelong learner with a very high sense of responsibility and accountability. Ownership drives you to learn continuously. Ownership pushes you to get better at your craft. Ownership makes you ask revealing questions that expose design and architectural flaws. Ownership makes you elevate engineering standards in your team or organisation through leading by example. For instance, ownership makes you write automated unit tests for features you work on even though no one else in your team does.

Quality output

Always strive to deliver quality output. Always attempt to develop user interfaces that are consistent with the UI/UX design. Seek to build features that have very little to no bugs. Endeavour to ensure that the user interfaces you build are WCAG compliant, that is, you’ve built the user interface with the correct semantic HTML elements for the job and all interactive elements are keyboard accessible. WCAG compliance enables software applications to be operable even by people living with disabilities. Always ensure that the code you write is readable, well-structured and easy to maintain even by other engineers.

Systems thinking

A high-performing frontend engineer does not limit his scope to just UI engineering, but instead he seeks to have a fair understanding of the entire system. Understand the problems that your product aims to solve. Understand the problems that each feature added to your product aims to solve. Understand the impact that every third-party dependency installed in your system will have on overall performance and security. Understand the impact that a well architected backend API will have on page load time. Understand the impact that a poorly designed UI/UX will have on frontend code quality. To enhance systems thinking, a professional frontend engineer reads engineering case studies of how notable engineering teams approached and solved hard engineering problems. Commit to learning and researching about frontend systems design such as how to implement a news feed, how to implement a photo-sharing app like instagram, how to design complex and accessible UI components such as Accordion, Carousel, Tabs, etc.

Collaboration

Frontend engineering sits at the middle between design and backend engineering. We translate UI/UX designs from tools like Figma into functional applications. We also integrate backend APIs to display dynamic data. As a result, we frequently communicate with designers and backend engineers. Collaboration involves prompt and effective communication. As a frontend engineer, there are times you’d experience unexpected validation errors from an API endpoint even though the request payload is correct. Collaboration in that case would involve informing the backend engineer who authored the API about the unexpected error. And to make the communication effective, you could also share screenshots of the payload and API response, or share a copy of the cURL request. That way, the backend engineer will be able to quickly replicate, debug, and resolve the issue promptly. Our communication does not stop with designers and backend engineers. Most engineering teams also comprise of product managers and Test Ops engineers. Seek to maintain a good relationship with every team member and ensure that the culture of communication is upheld.

T-shaped

An exceptional frontend engineer is T-Shaped. That is, while their depth and expertise lies in UI engineering, the breadth of their knowledge also cuts across a few concepts in other domains. For example, , how the web works, the significance of CORS, preflight requests, databases, caching, basic CI/CD with GitHub actions, horizontal vs vertical scaling, basic UX design principles, etc. This will make you to have a holistic view of the software development lifecycle and will improve your systems thinking. Being T-shaped also paves a way for you to progressively transition into full stack software engineering roles over time. Be a constant learner and let your curiosity drive you to paths of new learnings and adventures.

Ownership, Quality Output, Systems Thinking, Collaboration, and being T-shaped are my top 5 recommendations for levelling up as a frontend engineer. And of-course, these recommendations go beyond frontend engineering and are applicable to any discipline in software engineering.