1. Overview of Field of Work
This section provides an overview of the field of front-end development/engineering.
1.1 — What is a (Frontend||UI||UX) Developer/Engineer?
A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and JavaScript— to develop a front-end (i.e., a user interface with which the user interacts) for websites, web applications, and native applications.
Most practitioners are introduced to the occupation after creating their first HTML web page. The most straightforward and simplest work output from a front-end developer/engineer is an HTML document that runs in a web browser, producing a web page.
Professional front-end developers broadly speaking produce:
- The front-end of Websites e.g., wikipedia.org - A website is a collection of interlinked web pages and associated multimedia content accessible over the Internet. Typically identified by a unique domain name, a website is hosted on web servers and can be accessed by users through a web browser. Websites serve various functions ranging from simple static web pages to complex dynamic web pages.
- The front-end of Web Applications e.g., gmail.com - Unlike native applications installed on a device, web applications are delivered to users through a web browser. They often interact with databases to store, retrieve, and manipulate data. Because web applications run in a browser, they are generally cross-platform and can be accessed on various devices, including desktops, laptops, tablets, and smartphones. Common development Libraries and frameworks in this space include React.js/Next.js, Svelte/SveltKit, Vue.js/Nuxt, SolidJS/SolidStart, Angular, Astro, Qwik, and Lit.
- The front-end of Native Applications from Web Technologies e.g., Discord - A native application from web technologies is a type of software application that runs natively on one or more operating systems (like Windows, macOS, Linux, iOS, and Android) from a single codebase of web technologies (including web application libraries and frameworks). Common development frameworks and patterns in this space include Electron for desktop apps React Native and Capacitor for mobile apps and even newer solutions like Tauri V2 that supports both mobile and desktop operating systems. Note that native applications built from web technologies either run web technologies at runtime (e.g., Electron, Tauri) or translate to some degree web technologies into native code and UI's at runtime (e.g., React Native, NativeScript). Additionally, Progressive Web Apps (PWAs) can also produce applications that are installable on one or more operating systems with native-like experiences from a single code base of web technologies.
1.2 — Common Job Titles (based on "Areas of Focus" in section 2)
Below is a table containing most of the front-end job titles in the wild organized by area of focus.
| Area of Focus | Common Job Titles |
|---|---|
| Website Development | _ Web/Website Developer _ Front-end Developer/Engineer * HTML & CSS Developer |
| Web Application Development / Software Engineering | _ Front-end Application Architect _ Front-end Application Engineer _ Front-end Software Developer _ JavaScript Developer * Web Developer |
| Web UX / UI Engineering | _ UX Developer/Engineer (aka UXE or User Experience Engineer) _ UI Developer/Engineer * UI Design System Developer/Engineer |
| Web Test Engineering | _ Front-end QA Developer/Engineer _ UI Testing Developer/Engineer |
| Web Performance Engineering | _ Front-end Performance Developer/Engineering _ Web Performance Analyst |
| Web Accessibility Engineering | _ Accessibility Developer/Engineer _ Web Accessibility Specialist |
| Web Game Development | _ Front-end Game Developer/Engineer _ HTML Game Developer/Engineer |
1.3 — Career Levels & Compensation
Roughly speaking (Frontend||UI||UX) developers/engineers advance in their career through the following ladder/levels and compensations.
| Level | Description | Compensation (USD) |
|---|---|---|
| Junior Engineer | Entry-level position. Focus on learning and skill development. Guided by senior members. | $40,000 - $80,000 |
| Engineer | Mid-level, 2-5 years of experience. Handles core development tasks and might take on more complex projects. | $80,000 - $100,000 |
| Senior Engineer | More than five years of experience. Handles intricate tasks and leads projects. | $100,000 - $130,000 |
| Lead Engineer | Leads teams or projects. Involved in technical decisions and architecture planning. | $130,000 - $160,000 |
| Staff Engineer | Long-term, high-ranking technical experts. Works on high-level architecture and design. | $150,000 - $180,000 |
| Principal Engineer | Highly specialized, often with a decade or more of experience. Influences company-wide technical projects. | $180,000 - $220,000 |
| Fellow / Distinguished Engineer | Sets or influences the technical direction at a company-wide level. Works on visionary projects. | $220,000 - $300,000 |
Note that companies typically use internal leveling semantics (e.g., level 66 from Microsoft).
Image source: https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer
1.4 — Occupational Challenges
- The Front-end Divide: The "The Great Divide" in front-end web development describes a growing split between two main factions: JavaScript-centric full-stack web programmers, who focus on software frameworks and programming for web applications, and HTML/CSS-centric developers, who specialize in UI patterns, user experiences, interactions, accessibility, SEO, and the visual and structural aspects of web pages and apps. This divide exists between computer science-minded programmers, who prioritize programming/software skills required to build the front-end of web applications, and those who come to front-end development from the UI/UX side, typically as self-taught programmers. To be a front-end developer, you need to be a mix of both, with the degree of mixing being subjective. However, in 2024, it's clear that the job market heavily favors JavaScript-centric programmers, skilled in areas like JavaScript/TypeScript, Terminal/CLI, Node.js, APIs, GIT, Testing, CI/CD, Software Principles, Programming Principles, etc. (Follow up post: "The great(er) divide in front-end" and "Frontend design, React, and a bridge over the great divide"). However, the job market is only a reflection of the choices made in web development, not an evaluation of the quality of those choices.
- Technology Churn: Technology churn, the rapid evolution, and turnover of technologies, frameworks, and tools, present a significant challenge in the field of front-end development. This phenomenon can make the role both exciting and at the same time daunting and exhausting.
- Web Compatibility: Ensuring that web technologies work consistently across various web platform runtimes (e.g., web browsers, webviews, Electron, etc.) while not as complicated and challenging as it once was, can still require significant effort and skill.
- Cross-platform Development: Building a single codebase to run on multiple devices presents several challenges, especially in the context of front-end development. This approach, often referred to as cross-platform development, aims to create software that works seamlessly on various devices, such as smartphones, tablets, and desktops, with different operating systems like iOS, Android, and Windows.
- Responsive Design & Adaptive Design Development: Adaptive and responsive design are critical approaches in front-end development for creating websites and applications that provide an optimal viewing experience across a wide range of devices, from desktop monitors to mobile phones. However, implementing these solutions can often be complicated and time-consuming, leading to complicated code to maintain and test.
- Front-end Development is Too Complex: A general consensus is rising that the current frontend development practices and tools are too complex and need to be simplified. This strain is real and we are all feeling it, but not everyone is pointing at the same causes.
- Front-end Development Has Somewhat Lost its Way: Somewhere along the line, being a front-end developer transformed into being a CS-minded programmer capable of wrangling overly complex thick client UI frameworks to build software solutions in web browsers on potentially many different devices. In many ways, front-end development has lost its way. Once upon a time, front-end development primarily focused on the user and the user interface, with programming playing a secondary role. Why does being a front-end developer today mean one has to be more CS than UX? Because we have lost our way, we have accepted too much in the realm of complexity and forfeited our attention to less important matters. We are now somewhat stuck in a time of being all things and nothing. We have to find our way back to the user, back to the user interface.
- Challenges in Securing Employment: In recent times, securing a job has become a complex process, often marred by interviews that prioritize subjective and irrelevant criteria. These interviews frequently fail to assess skills pertinent to the actual job responsibilities, leading to a flawed hiring process. Technical roles, in particular, are frequently misunderstood, with assessments focusing on superficial generalizations rather than true technical acumen. Success in landing a job in this field often hinges more on chance or networking than on a comprehensive evaluation of an individual's personality, teamwork abilities, practical experience, communication prowess, and capacity for learning and critical thinking. Some of the most effective hiring practices involve companies acknowledging the inherent unpredictability of the hiring process and adopting a more holistic approach (i.e., selecting someone and engaging them in a small short contract of real work).