Frontend Interview Rounds Explained
Most of the well known companies conducts 4 types of frontend interview technical rounds for any individual contributor positions. Here we will only going to cover the technical rounds involved in the process. Interview round names and the order can be vary company by company
# Machine Coding Round
In this interview round you can expect development of an application or part of the functionality of a big application that includes functional requirements and non-functional requirements like performance, accessibility support.
Primary objective of this interview round is to test your overall knowledge of frontend skills including JavaScript, HTML & CSS in a real development environment.
Evaluation Pointers
Evaluation of this round is based primarily on the basis of below pointers
- Modularity & extendability of the code - How you break a big problem into multiple small problems and organize your code by keeping in mind about separation of concerns and reusability. Extendability is the another criteria to test whether you code requires a a big chunk of rewrite every time when a new functionality will be introduced.
- Best practices - How you are incorporating frontend best practices of defining variables, functions, classes, iteration over items etc
- Overall functionality: In this round, generally interviewers prefer functionality over look and feel, but your application should be able to perform all the mentioned functional requirements and should have capability mentioned as part of non-functional requirements
Essential topics
Even though this round requires a good knowledge about most of the frontend areas, but few topics are essential. Here is the list of essential topics for this interview.
- JavaScript Basics: Function, Object and Array Methods, closures, this key word, Iteration constructs, ES6 destructuring, spreading etc.
- Async JavaScript: Promises & its Methods, Async-Await, fetch API call, AbortController, setInterval, settimeout etc
- DOM & BOM: Accessing, modification and deletion of DOM elements, x y location specific concepts etc.
- Concepts: Throttling, debouncing, template passing, Exception & error handling etc.
- JavaScript Framework/React: Component creation, Hooks, props propagation, design patterns
Example Question:
Develop an user interface of a mailing client similar to Gmail, which should have below functional and non functional requirements.
Functional requirements:
Able to view all the emails in a list format by sorting order, default by date Able to view the email content in a modal when click on any of the mails in the list. Able to search for a particular mail through mail summary heading.
Non-functional requirements:
Able to handle large amount of emails in a performance way. Accessibility support should be there, keyboard navigation.
# JavaScript + React/Angular Framework Round
In this interview round you can expect output based questions around the JavaScript fundamental topics, and questions around JS frameworks design patterns, differences between 2 patterns, Hooks, question around under the hood working of JavaScript as well as JS framework like react.
Primary objective of this interview round is to test your overall knowledge of JavaScript and JS framework fundamentals, and internal working
Evaluation Pointers
Evaluation of this round is based primarily on the basis of below pointers
- Ability to evaluate the right output and able to explain under the hood working.
- Ability to explain how the JS and JS framework fundamental concepts works like Closures, currying etc.
Essential topics
Even though this round requires a good knowledge about most of the frontend areas, but few topics are essential. Here is the list of essential topics for this interview.
- JavaScript Basics: Closures, "this" keyword, Currying, Hoisting, Prototypal Inheritance, Classes, Prototype chaining etc.
- Async JavaScript: Promises & its Methods, Async-Await, setInterval, settimeout etc.
- JavaScript Framework/React: JavaScript Design patterns like singleton, factory, hooks, pub-sub etc.
# Frontend System Design Round
This is a design round, and In this interview round you can expect questions around designing an application, a complex component or a part of the application.
Primary objective of this interview round is to evaluate your frontend system design skills to create a scalable and performant web application or component.
Evaluation Pointers
Evaluation of this round is based primarily on the basis of below pointers
- Ability to drive the design discussion by covering all the necessary questions, scoping etc.
- Ability to provide justifications and tradeoff to all the choices made during the system architecture and communication design.
- Knowledge about the design patterns available to solve the common frontend system design problems.
Essential topics
Even though this round requires a good knowledge about overall frontend system design aspects, but few topics are essential. Here is the list of essential topics for this interview.
- Virtualization/Windowing/Lazy Loading : To enable performance long list support.
- Performance Optimization Techniques: Asset Optimizations, Network Optimizations, Rendering optimizations.
- Common Frontend Architecture: Micro-frontend, Monorepos, Monolithic
- Communication techniques: REST Api, GraphQL, gRPC, tRPC
- Data Store Objects
# UI Tech Round
In this interview round you can expect questions around Frontend technologies which are primarily involved in making of scalable & performant enterprise web application.
Primary objective of this interview round is to evaluate your frontend technologies knowledge and its implementation to enhance web application experience.
Evaluation Pointers
Evaluation of this round is based primarily on the basis of below pointers
- Ability to showcase your in-depth knowledge about the UI technologies, which includes UI technologies related to browser, security, performance and accessibility etc.
- Knowledge about their use-case, pros-cons and general implementation in a web application.
Essential Topics
Here is the list of essential topics for this interview round.
- Browser : how browser works, rendering of a webpage, JS engine etc.
- Security: Knowledge about use-case and implementation of CORS, CSRF, CSP XSS etc.
- Accessibility: Principals, accessibility roles and state (aria-*) etc.
- Performance Improvement techniques: Techniques around asset, network and rendering optimizations.
- Authentication: Basic Auth, OAuth2.0, JWT token, OpenID connect etc
