Front-end developers are responsible for building the parts of applications that users see and interact with. (In most cases, front-end development refers particularly to web applications as interpreted by a user’s browser.)
If we want to provide an engaging experience to our users, hiring good front-end developers is key.
Over time, web user interfaces (UIs) have become more interactive. They have also spread to new contexts, like mobile, wearables, and cars.
Front-end developers once easily mastered the three main technologies: HTML, CSS, and JavaScript. At that point, JavaScript represented a set of basic functions for real-time web page modifications, allowing for animating UI elements and making them more interactive.
But now JavaScript, development is more complex. It’s used in multiple programming paradigms and represents its own specialization of front-end development, separate from HTML and CSS.
Within that, there are many more specific specializations, and new ones are appearing all the time. The general knowledge and skill set has also broadened, with many technologies being used across specializations.
So how can you know what’s important when it comes to hiring front-end developers?
Based on the project and what kind of user interface you want to provide, we can split up the front-end development skill set into two main areas: UI and front-end JavaScript.
UI Development
The simpler and older of the two styles, this is used in apps like Gmail’s “Basic HTML” version and in most traditional web forums.
Such sites are still made of web pages that can contain animations and many graphic elements, but there is far less (custom) JavaScript normally involved. For this category of web applications, front-end developers need to know:
HTML and CSS. All front-end developers have to understand web markup (HTML) and cascading style sheets (CSS). These are the standard building blocks that web browsers interpret and present as visual UI elements. Front-end developers should know HTML5 and CSS3—which have been the standard versions for a while now—and know when to use their more recent features.
JavaScript basics. Use of the JavaScript language is fundamental for all front-end developers in order to make web pages interactive.
Front-end developers often use JavaScript libraries to develop UI widgets, components, and effects in the form of plugins.
There isn’t always a need for adding JavaScript libraries to projects. However, candidates should know how to use additional JavaScript libraries such as jQuery or Ext JS. This shows they generally know how to use UI frameworks and reuse UI elements.
Cross-browser compatibility. There are myriad web browsers and versions of them, and each supports different features and versions of HTML, CSS, and JavaScript. UI developers should know how to avoid and solve compatibility issues across web browsers.
Responsive design. If we want to allow using web applications in mobile devices, the UI should adapt to mobile device environments. (Even if you don’t, your users may try it anyway.) Front-end developers need to know how to build and optimize web applications for so they are flexible when it comes to screen sizes, ratios, and orientations.
UI frameworks. Many times, front-end developers don’t need to build UI elements from scratch. UI frameworks allow for reusing already-created UI elements with defined style guides, compatible with desktop browsers and mobile devices.
Developers can use lightweight UI frameworks for setting up a grid system for the whole layout or more robust frameworks for including various UI elements.
A good front-end developer will know when to use UI frameworks, which are helpful especially for rapid prototyping.
CSS-transforming tools. Front-end developers should also know how to create valid cross-browser and mobile compatible style sheets effectively. This can avoid issues in production.
CSS by itself has limited capabilities for creating optimized style sheets, but CSS preprocessors such as LESS, Sass/SCSS, or Stylus provide a more advanced way of writing style sheets and compiling them into CSS.
Another category of CSS transforming tools are those like PostCSS. Its plugins allow the use of CSS preprocessors along with other task runners for analyzing and optimizing style sheets. While experience isn’t strictly required, it does indicate that a developer is staying current in ways that boost their productivity.
If the front-end developer you’re considering doesn’t know how to use CSS transforming tools, you can expect bloated style sheets with compatibility issues that take longer to fix.
2D and 3D graphics. UIs can contain dynamic and interactive graphics and visualizations, sometimes even in three dimensions.
Creating graphics can overlap with computer graphics and design specializations, but front-end developers should know suitable ways to implement visualizations and dashboards by using SVG or JavaScript libraries. If your project specifically requires 3D graphics, they should probably be comfortable using X3D or a similar library.
Accessibility. People with certain disabilities sometimes have very limited ways in which they can interact with devices.
Hire a front-end developer who can remove disability barriers and extend UIs using ARIA accessibility attributes. They will be able to make your site much more usable via text-to-speech software, text-to-Braille hardware, and potentially other specific modifications.
Graphic design and typography. Web designers are responsible for choosing and creating visuals for web applications.
Front-end developers are responsible for ensuring that the whole design is working in web browsers. They should understand basics of graphic design and typography for digital products.
The output of web design can be modified in graphic editor software, and front-end developers should know how to use the output to make basic edits in graphic editor software, or better yet, using a browser’s developer tab to show changes exactly as they would appear.
UI and UX. UI and UX designers ensure that a user’s interaction with a product’s UI is simple, usable, and feasible in terms of web browser rendering capabilities.
Front-end developers are responsible for implementing UI and UX designers’ work. They should be familiar with user interface design best practices and know how to use the output of wireframing and mockup tools like Sketch and Balsamiq.
Search engine optimization (SEO.) If you want to address a wide or target audience, developers can use SEO techniques to make it easier to find your site when searching.
Front-end developers should know how to involve SEO principles in web markup to make web pages visible in search result lists.
Web template systems. Content management systems (CMSes) and web publishing platforms offer many built-in features for web applications. This invariably includes a web template system.
Front-end developers can use a template for the automatic generation of UI elements. If your project runs on a platform or CMS, front-end developers who are familiar with that platform and templating system have a big advantage, because they can develop your project’s UI faster and with less hassle.
Code versioning tools. Nowadays, it’s a given that your project will use a tool like Git or Mercurial to track the history of your project’s code.
Even if you don’t use code versioning tools—yet—you’ll want to find a front-end developer who is comfortable setting that up for you and implementing versioning best practices.
Without these tools, you will quickly hit a point in your project where developers need to see file history and the reason behind a change—but can’t.
Also, there’s a difference between making simple commits while working alone and knowing how to integrate changes in the context of a fast-paced development team. When you hire a front-end developer, more experience with source control—especially the flavor you intend to use—will allow them to integrate into a team much more easily.
Front-end Web Developer Interview Questions
These front-end developer interview questions will help you evaluate your candidate’s experience if you’re looking for a simpler infrastructure without much custom JavaScript development.
What were the biggest compatibility issues you had to solve?
This gives the developer a chance to show their level of experience in the industry. If front-end developers have developed applications for a wider audience or for many years, they should come across compatibility issues among different web browsers.
The answer can also include development of responsive design for mobile devices.
What do you think is the best way for rapid prototyping and development when it comes to web applications?
A good opportunity to let them explain their favourite frameworks and tools. Developers can introduce UI frameworks as well as CSS-transforming and other tools that help them to streamline software development processes.
What are the main goals and motivations for using the latest standards of HTML5 and CSS3?
UI developers should know that new standard versions were designed to deliver media content (video, audio, interactive graphics) without additional plugins such as Flash, provide better cross-platform support for various devices, and implement semantic support for web pages, which has a significant impact on SEO.
Front-end JavaScript Development
In contrast to UI development, front-end JavaScript is more important in so-called rich web applications, e.g., single-page applications like Gmail or dashboard applications like Google Analytics.
This category requires wider knowledge of JavaScript:
JavaScript advanced knowledge. UI developers need to use JavaScript for manipulating a page in real time and reusing UI elements.
Front-end JavaScript developers need to have deeper knowledge of JavaScript in terms of frameworks and libraries because they are responsible for designing and implementing front-end architecture and analyzing dependencies among user interactions. They should know how to use various JavaScript frameworks and libraries in a single project while avoiding compatibility conflicts.
Programming paradigms. Event-driven programming is not enough for designing and implementing complex front-end architecture. Front-end JavaScript developers should know other programming paradigms such as MVC, OOP, and functional programming, which support programming concepts that help create reusable and readable front-end code.
Single-page applications (SPAs). If you want to provide a better user experience, SPAs may be one way to do it. SPAs let user actions trigger re-rendering (redrawing) processes on other UI elements without reloading the whole page. Almost all JavaScript frameworks or libraries for implementing front-end architecture support the SPA concept.
Web applications can also use a multiple-page approach or a hybrid of the two. Based on the project, front-end developers should know which approach is appropriate for the project and how to implement it.
Networking protocols. An application’s front-end receives data from its back-end using networking protocols. Front-end developers need to understand the REST architectural style and standard networking protocols designed for web application environments.
Most web applications use the HTTP and/or HTTPS protocols and Ajax, and applications’ back-ends usually provide data through a REST API.
Sometimes, projects will require high interaction between the back-end and front-end—e.g., interactive games or dynamic media streams—and in these cases, your front-end developer will need to be comfortable working with more advanced protocols such as web sockets.
Security. Front-end developers should be familiar with web security concepts and how to integrate user authentication and authorization into an application’s front-end.
JavaScript frameworks already prevent most security vulnerabilities, but front-end developers should be familiar with the HTTPS protocol, know how to avoid cross-site scripting (XSS) attacks, and have experience implementing user session management and token-based authentication and authorization.
Package managers. Complex web applications contain a lot of JavaScript dependencies and maintaining them without a package manager can significantly slow down the front-end development process.
Package managers let front-end JavaScript developers manage JavaScript library dependencies and avoid version collisions.
JavaScript bundlers and task runners. JavaScript bundlers allow developers to capitalize on the concept of modularization, which is an inherent part of most modern programming languages and especially single-page applications.
JavaScript bundlers and task runners process front-end source code, which includes tasks for managing and optimizing source code and dependencies. They allow the automation of repetitive tasks in front-end development without additional tools. If we want to use test-driven development or behavior-driven development, JavaScript task runners with package managers allow us to set up projects to make applications front-end testable.
JavaScript developers need to know how to use these tools; otherwise, they won’t be able to develop SPAs effectively.
Advanced optimization. Complex front-end architectures can contain a lot of source code with redundant dependencies, a situation which requires additional optimization.
JavaScript bundlers and task runners contain plugins for optimizing redundant dependencies, but front-end JavaScript developers should also know how to implement the lazy-loading technique, where content is downloaded invisibly as a user browses or scrolls web pages.
Back-end development. Front-end JavaScript developers often work closely with back-end developers in order to design API calls which define communication between an application’s front-end and back-end.
It can also happen that front-end developers have to start building front-end architecture without any support or data from an application’s back-end. In this case, they need to know how to design and develop their own API calls to mock (fake) the data that will later be provided from the back-end.
If this is true about your project, you may need to lean towards a full-stack developer, or at least one who has worked with a variety of web APIs and has a good sense of their best practices.
Front-end Engineer Interview Questions
Here are some important front-end developer interview questions for when you need someone with more of a JavaScript focus within this field:
What is the difference between single-page and multi-page applications? Which approach would you suggest for my project?
SPAs are able to redraw any part of the UI even with new data, without the need to reload all of the UI content. Multiple-page applications redraw the whole UI with every user action that submits or requests new data. Front-end developers should understand this concept and be able to explain to you which approach is suitable for the project and why.
Which JavaScript frameworks or libraries would you suggest for my project?
A good opportunity to let them show their knowledge about JavaScript frameworks and libraries and when and how they should be used. There is no universal framework or method when it comes to developing front-end architecture, and the right way depends on the project and team.
Let them explain what approaches are used in JavaScript frameworks and libraries and if they prefer a certain approach. If the front-end developers don’t know JavaScript frameworks and what they were designed for, don’t even think about hiring them.
How would you speed up and secure a single-page application?
This question gives the developer the chance to show their experience with developing SPAs. If a developer knows advanced optimization techniques such as preloading content or lazy loading, it means that they have experience with developing robust SPAs.
If they know how to secure SPAs, they should know how to develop an application’s front-end with multiple permissions and different user roles. This experience could be shown by a short previous project demonstration.
“Needle in a Haystack” No More
In this article, we described front-end developers’ responsibilities in a web application context. We divided front-end development work into two categories–UI and JavaScript development, where each category requires specific knowledge and a specific skill set.
But many times, projects require an intersection of the two categories.
It can be very hard for someone who hasn’t been involved in software development to recognize what sort of developer experience is required for the project. But by using the Q&A in the article above, you will be able to recognize if a front-end developer understands and is able to communicate about fundamental concepts effectively.
You have your project’s requirements. Now you also know what skill set and knowledge you should focus on. It’s time to find your ideal front-end developer!
