Written by Cody Lindley
Overview:
A broad examination of the front-end developer profession.
Contribute content, suggestions, and fixes on github:
https://github.com/FrontendMasters/learning-roadmap
Fundamentally a front-end developer, historically sometimes referred to as a client-side developer, produces the code sent from a web server to a client/front-end to establish a user interface. For example, when you load a webpage into a web browser, code is sent from a web server to the device/client requesting the page. The code sent will produce the user interface one sees in the web browser. This code is considered front-end code and is a mixture of the web technologies HTML, CSS, and JavaScript.
An individual typically enters into the field of front-end development by first learning to build a simple website using HTML and CSS. HTML or HyperText Markup Language is likened to the structural framing of a house, while CSS or Cascading Style Sheets can be considered the finishing touches one sees once a home is complete.
Eventually, the house (i.e., a website) will need to become automated. In other words, it will need to become interactive and respond to events orchestrated by the user or the device on which it runs (e.g., on click or on load do X). To accomplish this, front-end developers learn the JavaScript programming language and use this language and the Document Object Model (aka the DOM) to add dynamic and interactive aspects to HTML and CSS.
As a front-end developer progresses in their career, they will move from a simple understanding of web pages and websites to potentially a robust grasp of software development practices as it is done on the web platform using the JavaScript programming language.
Front-end developers develop for the web platform, and the web platform is most commonly associated with web browser run times. Open a web browser like Google Chrome, navigate to a web page like google.com, and what you are looking at was developed by a front-end developer who developed the web page using HTML, CSS, and JavaScript.
The web platform runtime is not just for web browsers. It can also be used by WebViews and Progressive Web App (aka PWA) techniques to create native-like applications that are installed on an operating system. This means that a front-end developer can take their knowledge of web technologies and the web platform run time associated with browsers and web development and use these skills to create native applications for popular operating systems like Windows, Mac OS X, iOS, Android, and Linux.
Loosely, think of a WebView or PWA like a single tab from a web browser without an address bar or backward and forward buttons, that is embedded into a native application. This scenario is identical to the browser, and WebViews/PWA's run from HTML, CSS, and JavaScript but instead of facilitating internet access to web pages the intention is the web platform runtime is used to access the native operating systems APIs (i.e., A single browser view of a web page(s), using web technologies, that is run like a native application that may or may not be connected to the internet that has access to native operations either via native web APIs or bridges from web technologies to native APIs).
The most common solutions for WebView development are:
Front-end developers can also find themselves developing source code using web platform technologies (e.g., CSS and JavaScript), but then the source code created is not used by a web platform run time scenario but instead as input which gets translated to native run time code. Basically, coding environments exist where web technologies are written not to run on the web platform but written to be used as input to create real native applications using native APIs.
Some examples of these environments are:
As you can see, Front-end developers not only develop for web browsers but also for several other run time scenarios beyond web browsers. Being a front-end developer today could mean creating webpages and web applications that are accessed via web browsers, but it can also mean creating native applications that are installed on operating systems and run offline (e.g. Visual Studio Code is built using Electron).
A professional front-end developer will minimally have a working knowledge of browsers, the internet and be skilled at using the following web technologies:
Beyond being skilled at the technologies just mentioned, a front-end developer might also be skilled in one or more of the following areas:
As of late, defining the skills of a front-end developer has become complicated due to a significant divide in the front-end developer profession. A gap has arisen between those front-end developers who focus on programming and becoming a traditional computer science-oriented JavaScript/software developer, and all this entails, and those who focus more on the UI, HTML, CSS and happen to know some JavaScript. This gap, for better or worse, was orchestrated by the fact that JavaScript infiltrated the back-end and thus back-end developers in time found themselves writing JavaScript back-ends with tools like Node.js and mongoDB. Eventually, these engineers infiltrated the front-end. The good news is this scenario resulted in a front-end and JavaScript renaissance. Pretty much, everything got better. Tools. Frameworks. Package Managers. Libraries. CSS. JavaScript. But, it especially got better for those who already had a command of the JavaScript programming language. The bad news this renaissance also diluted and complicated the skills required to do front-end development and has pulled the profession towards a more engineering-focused field of work often requiring traditional computer science training and software development know-how over UI experience. Unfortunately, for the time being, getting a front-end developer job today might come down to how much you know about computer science theories, software development, or the specifics parts of the ECMAScript specification. I say unfortunately because, in my opinion, what is more important than these matters is a robust understanding of how to construct a usable touch point between the user and the code.
Simultaneously, a trend has been occurring for several years now where websites and web applications are being built using a thick/fat client architecture (e.g., Single Page Applications or SPA's). Meaning, what was once mostly done on the server is now done in the client at runtime. In short, the application logic that runs a website or web application will today often run in the client instead of on the server. When this architecture is in use, the data that drives the website or web application is requested at runtime by the client using a data API (i.e., an interface that returns data only, typically in the form of JSON). What this means for the front-end developer profession is what was once consider back-end competencies are now becoming required competencies to do front-end development (e.g., Software Development, Web Application Development, Software Build Processes, State management, Application performance, etc).
Due to the divide mentioned above and the movement towards thick/fat applications in the client, the front-end skillset spectrum is currently being stretch by what is known as a full-stack developer. A full-stack developer can supposedly not only code a front-end application UI using HTML, CSS, and JavaScript for multiple screen sizes but can also develop the database and data API as well as the web server serving the client. It is this author's opinion that this jack of all development trades has been seen before in the form of a webmaster and back-end framework developers. The author believes that history will repeat itself and the notion of a single do it all developer will run its course again and then eventually be wisely replaced with reasonably focused developers either working mainly on the front-end or back-end with a clear separation. I believe this will happen because the mile wide and inch deep developer is ultimately inept at properly caring for the UI and user experience. Don't get me wrong, a one in a million, unicorn, rock star developer does exist that can do it all and do it well. But modeling a profession on such an individual is impractical and dangerous.
As I just mentioned, a great divide has been brewing in the front-end developer space for several years between two very different types of front-end developers. On the one side, you have JavaScript-focused programmers who write JavaScript for front-end runtimes that likely have computer science skills with a software development history. They probably view HTML and CSS as an abstraction (i.e., JSX and CSS in JS). On the other side, you have, most likely, non-computer science educated developers who focus on HTML, CSS, and JavaScript as it specifically pertains to the UI. When entering or trying to understand the front-end developer space, you will feel this divide. The term front-end developer is on the verge of meaninglessness without clarifying words to address what type of front-end developer is being discussed.
Below is a list and description of the most common front-end job titles (Keep in mind titles are hard). The common, or most used (i.e., generic), title for a front-end developer is "front-end developer" or "front-end engineer." Note that any job that contains the word "front-end", "client-side", "web UI", "HTML", "CSS", or "JavaScript" typically infers that a person has some degree of HTML, CSS, DOM, and JavaScript professional know-how.
Front-End Developer/Engineer (Previously called Client-side Developer): The generic job title that describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform (URLs, HTTP, Browsers, Web APIs, etc.).
Application/JavaScript Developer/Engineer: The job title given to a developer who comes from a computer science engineering background and is using these skills to work with front-end technologies. This role typically requires computer science knowledge and years of software development experience. When the word "JavaScript Application" is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end software applications). In all likely hood if the words engineer, JavaScript, or full-stack appear in the job title, this will entail server-side JavaScript (i.e., Node.js, MongoDB, etc.).
Front-End Performance Developer/Engineer : The job title given to a JavaScript Application Engineer or UI Developer who is focused on the performance implications of JavaScript and JavaScript runtimes.
CSS/HTML Developer: The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and Application know-how.
Front-End Web Designer: When the word "Designer" is included in the job title, this will denote that the designer will possess front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.
UI (User Interface) Developer/Engineer: When the word "Interface" or "UI" is included in the job title, this will denote that the developer should have interaction design skills in addition to front-end developer skills or front-end engineering skills.
Mobile/Tablet Front-End Developer/Engineer: When the word "Mobile" or "Tablet" is included in the job title, this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively e.g., React Native, or on the web platform, i.e., in a browser).
Front-End SEO Expert: When the word "SEO" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.
Front-End Accessibility Expert: When the word "Accessibility" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.
Front-End Developer Operations Engineer: When the word "DevOps" is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to developer collaboration, tooling, integration, deployment, automation, and quality.
Front-End Testing/QA Engineer: When the word "Testing" or "QA" is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves manual testing, unit testing, functional/integration testing, user testing, and A/B testing.
Note that each of these job titles could potentially be prefixed with the terms "Junior," "Mid-level," "Senior," "Lead," "Director," or "Principle".
A front-end developer will often work on a web development team containing the following roles:
The five roles just mentioned can overlap each other. For example, a front-end developer will typically have a good handle on UI/Interaction design as well as Back-end development. Additionally, it is not uncommon to find a Visual Designer who does Interaction Design and can also contribute to front-end coding efforts.
A larger web development team might include the following roles not mentioned above:
The national average in the U.S for a mid-level front-end developer is somewhere between $65k and 100k.
Of course, when you first enter into the profession, expect to enter the field at around 40k a year depending upon location and experience.
A lead/senior/principal front-end developer/engineer can potentially live wherever they want (i.e., work remotely) and make over $150k a year (visit angel.co, sign-up, review front-end jobs over $150k or examine the salary ranges on Stack Overflow Jobs).