Tips on what Front-end developers should know how to successfully complete an interview for front-end developer from Coding compiler.
We have conducted many interviews with web developers and software developers seeking to get into Amazon or Yahoo for the position of Front-end developers. In this article, I give advice on what and how to prepare.
Interview is hard. Within 45 minutes, candidates have to show what they can do. As an interviewer, I can say that it is often difficult for me to determine if a candidate is suitable for such a short time, so sometimes we have to ask questions at our discretion.
Common Misconceptions
One of the most common mistakes among candidates is preparing for simple questions like “What is a block model?” Or “Explain what is the difference between == and === in JavaScript?”. Such questions do not tell the interviewer anything about the candidate; accordingly, there is no point in asking them.
Instead, be prepared for writing code. You may be asked to make a widget or test your knowledge of Lodash and Underscore.js. For example:
- Make the site layout Netflix;
- Add the ability to select a date, a shopping cart or a simple carousel;
- Write debounce function;
[Related Article: JavaScript Code Structure]
Speaking of libraries, a common mistake is to prepare for using popular interview frameworks. Many people think, why reinvent the wheel, if you can just use jQuery, React, Angular, etc., especially since during work they are most likely to come in handy? Technologies, frameworks and libraries are constantly being improved. Therefore, we are interested in those who have knowledge of the basic principles necessary for development.
Remember that in an interview your main task is to show what you are capable of, how you use programming in practice. If you do not have enough of it, you can try to explain in words how you understand the action of a particular function.
[Related Article: Use Strict in JavaScript]
Javascript
You need to know JS from cover to cover. The higher the position for which you are applying, the more profound knowledge is expected of you. Topics required to understand:
- Execution context;
- “Raising” of variables, scope of blocks, functional expressions;
- Data connection;
- Object prototypes, constructors, impurities;
- Composition of functions, higher order functions;
- Delegation, the emergence of events;
- Type conversion;
- Handling asynchronous calls using callbacks, promises, await, async;
- Declaration of function and functional expressions.
[Related Article: JavaScript Design Patterns Tutorial ]
Dom
It is important to understand how the navigation in the DOM is arranged. For example, many candidates who are fixated on jQuery or have only been writing React & Angular applications for a long time are not ready for such questions.
You should know and be able to use libraries without:
- Search for nodes with document.querySelector or document.getElementsByTagName;
- To bypass the elements of the tree with the help of Node.parentNode, Node.firstChild, Node.lastChild, Node.childNodes, Node.previousSibling and Node.nextSibling;
- Add, delete, copy and create nodes in the DOM tree. Know such operations as changing the content of a site, deleting or adding the name of a CSS class;
- Cache the nodes.
[Related Article: JavaScript Code Structure]
CSS
At a minimum, you should know how elements are presented on the page, how to point to them, using relative and absolute references, and also where it is better to use classes, and where is ID.
- Layout – how to arrange elements one after another, when to use two, and when three columns;
- Adaptive design, adapts to the size of the window;
- The specificity of the selectors;
- Correct naming.
[Related Article: Use Strict in JavaScript]
HTML
Make sure you see the differences between the HTML tags in order to use them more efficiently.
You will be expected to:
- Understanding semantic layout;
- Knowledge of tag attributes, for example, disabled, async, defer;
- Ability to declare doctype. Simple, but most people who don’t do HTML every day forget about it, as well as the fact that meta tags are also available for use.
[Related Article: JavaScript Design Patterns Tutorial ]
System design
For interviews, those who work with the backend are usually asked about MapReduce , designing key-value distributed repositories. In everyday work, the front-end programmer does not have to have a deep understanding of how large systems are designed, but one should not be surprised at questions about how popular applications work. Such questions are usually extensive, for example: “suggest a site design like Pinterest” or “tell me how you would design a cash system?”. Here are a few areas to think about:
- Rendering – on the client side, server and universal;
- Design development, especially by several development teams, implies that everyone must follow uniform standards for building components;
- State management – the choice between data streams in an arbitrary direction and bi-connected streams. You need to think about whether your design will follow a passive or reactive programming model, and how the components relate to each other (for example, Foo–> Bar or Foo -> Bar);
- Async stream – your components will probably interact in real time. The design you are designing should decide what to use: XHR or bidirectional calls. You may also be asked for support for legacy browsers;
- The concept of separation on Model-View-Controller (MVC), Model-View-ViewModel (MVVM) and Model-View-Presenter (MVP);
- Support for various devices – whether solutions for desktop browsers, mobile and hybrid applications are made in the same style or they will be different to emphasize the differences. If, for example, you build a site like Pinterest, you will probably use three columns for the full version of the site and only one for mobile devices. How will your design realize this?
[Related Article: JavaScript Data Visualization Libraries
Web testing
The interviewer will probably want to see not only your code or design, but also how they affect performance. Previously, it was enough to place CSS at the top of the document, and JS scripts at the bottom, but technologies are developing rapidly and it is important to be able to adjust.
- Understanding the critical rendering path;
- Image optimization;
- Lazy vs preloading resources;
- Simplify and reduce drawing areas;
- Ability to use GPU.
[Related Article: JavaScript Animation Libraries ]
Data structures and algorithms
This is a bit of a controversial point, but having a basic idea of the complexity (or time) of calculations like O (N), O (N * log N) will not hurt you. One-page sites are gaining popularity at the moment, so memory management is also your task. For example, if you are asked to build a client-server spell checker, knowing typical data structures and algorithms will greatly simplify your task.
I’m not saying that you need to have a university degree in computer science, but the industry is moving away from building simple web pages. Online resources for basic knowledge already exists quite a lot.
[Related Article: JavaScript Guide]
General web knowledge
In general questions about web technologies and paradigms, you will expect wide knowledge:
- HTTP requests – GET, POST along with Cache-Control, ETag, Status Codes, and Transfer-Encoding;
- REST vs RPC;
- Security — when to apply JSONP, CORs, and iFrame policies.
[Related Article: 12 JavaScript Tricks For Novice Programmers ]
Conclusion
To become a developer, it takes a lot of knowledge. But everything is real, you just need to be ready to learn and fill your hand.In addition to the questions listed above, you will be asked about past projects, difficulties with working on them and how you dealt with these difficulties.