Shulou(Shulou.com)06/03 Report--

This article introduces you how to deal with the difficulty of project experience in the web development interview, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Speaking of interviews,

When it comes to school recruitment interviews, people always feel flustered. Maybe it's lack of self-confidence, maybe it's because I feel so much and I'm not ready. It doesn't matter, now that you have sent your resume and passed the screening, don't be timid. First of all, it is important to know that the interviewer wants to recruit you, just want to know more about your specific situation. Since the interviewer is willing to take the time to talk to you, then prove that you still have the strength and the bright spot to be favored, so what is there to feel guilty about? just face it bravely and confidently.

STAR rule

You need to describe your work experience or personal experience during both the resume writing and the interview process. Good interviewers often use STAR rules to establish personal events, so that the interviewer can better judge your personal abilities and potential based on your past experience.

Review the four elements of the STAR rule:

Situation: under what circumstances did it happen, and based on what background

Task: how do you define your mission

Action: in view of this situation, what kind of action have you adopted and what specific work have you done?

Result: how did it turn out, what value did it bring, what you learned and what new experiences you learned in the process.

Often most of the students directly introduce what they have done and the process of realization as soon as they come up, the organization is also relatively clear, and the content is also quite technical. But many students easily overlook the background and results of Situation and Result. Or it's easy to panic when the interviewer knows more about the details of the inquiry. These reasons are often due to the lack of a clear context of their own experience before the interview and the lack of a comprehensive and in-depth summary.

For example, some students mentioned the implementation of a Webpack plug-in XXX in the course of the XXX project. The plug-in function is XXXX and is open source on Github. The whole implementation process and ideas are relatively clear, and the interviewer listens with interest, even recalling the youthful days of working overtime on Webpack plug-ins one night when he was young.

Even so, the interviewer also wanted to know the background of the project at the time, what caused you to think of doing the Webpack plug-in instead of other tools, and what value the plug-in brought to the project (build performance or something else? ). The background and results are a very important part of the interviewer, and you must come up with enough reason and value to convince the interviewer, otherwise although you put enough energy into this project, you will not add points to your interview evaluation in the end. this is a great pity.

At this time, some students will also think: * * my project is only a personal / school training project, I do not think it is very eye-catching value for the results of the project. * * at this time, you might as well talk about what you have learned in the project, such as in this example of the Webpack plug-in:

Compiler and Compilation and their differences

How does Webpack realize the relationship between plug-ins and ensure their order?

When developing a plug-in, you need to make a next decision based on whether the current configuration uses some other plug-in, and how to determine which plug-ins are currently used by Webpack

I draw lessons from the ideas of other plug-ins in the process of developing plug-ins, and my understanding of the source code of this plug-in

Wait, wait.

Most of the above will be encountered in the actual development of Webpack plug-ins, these problems can also be used as Result if you have records and summaries.

Restore the interview scene

In the following scenario, the author restores the interview process of the project, and uses the STAR rule to briefly introduce the process of working as a browser API compatibility checker (it is also very important to describe something clearly in the interview by dictation, so there is no picture below).

Interviewer:

I saw in your resume that you have implemented a tool to check the API compatibility of browsers. Could you introduce it?

I:

(Situation) well, the situation at that time was actually an online user's public opinion feedback that the page was blank / could not be opened. Through the investigation of the JSError log, I found that recently there were a large number of logs similar to IntersectionObserver is not defined, and at the same time, it was almost consistent with my last release of the module exposure timeline, so I quickly located that the compatibility problem was not taken into account when using the browser IntersectionObserver API to do DOM exposure at that time.

Interviewer:

Has the problem been solved?

I:

Yes, after locating the problem at that time, the problem was quickly solved by adding polyfill. * * (Task) * * later I thought about it myself. In fact, with the update of the operating system and browsers, more and more new features of JS/ browsers began to be supported. While bringing convenience to the front-end development, it will also bring some inevitable compatibility problems. The neglect of compatible code (polyfill) can easily lead to unpredictable problems. However, relying solely on developers to manually check compatibility issues is not the most elegant solution, after all, manual work will inevitably be omitted. So I wondered if it would be possible to develop a tool that integrates existing compatibility checking rules to automate this process.

Interviewer:

Yes, let's introduce the specific process in detail.

I:

(Action) well, after the idea came into being, I went to learn about the commonly used front-end compatibility checking sites: Caniuse and MDN, which I used more often. Later, it was found that the inspection data of the two websites actually maintained a static inspection rule (caniuse-db and mdn-browser-compat-data) on Github, which were JSON files with specific structure. Although the two documents described the browser support in different ways, they could already meet the basic requirements of obtaining compatibility data. The next step is to analyze the code and compare it with these rules. This process requires syntactic logic analysis of the code, so I came up with the idea of using Babel to convert the code into an AST syntax tree for specific traversal. At the same time, I sort out the regular ways to call API and I find that there are no more than a few, such as: NewExpression (construction expression) and CallExpression (calling expression). When all this information is clear, I think this matter is technically feasible.

Interviewer:

Well, have you encountered any problems in this implementation process? How did you solve it?

I:

(Action) Yes, I just mentioned the static JSON data maintained by Caniuse and MDN. In the process of implementation, I unify the format of the two data in order to complement each other and facilitate subsequent check and comparison. In fact, nearly 9w pieces of data are obtained in the end, and it will affect the efficiency if you compare them directly, so at that time, you can configure the browser scope for the specified target check, such as iOS Safari 9 or above, through this layer to filter the data with no compatibility problems in this range, so as to reduce the comparison and improve efficiency, and also provide developers with flexible configuration capabilities. The second problem is also the performance optimization of checking, which is to check whether the identifier is actually referenced by isReferencedIdentifier.

Finally, there is the management and control of this tool and how to connect to the release process. Since the company's release process is built in the cloud, I verify the tool before release, and send the check results to the message notification and email system. * * (Result) * * helps others to get the browser API compatibility check report of the project code before release, so as to avoid the recurrence of such problems. This experience helped me deepen my understanding of Babel and AST.

Interviewer:

Do you know the process of Babel parse AST?

I:

There are two stages in the process of parsing into AST: lexical analysis and grammatical analysis.

Lexical analysis phase: the code in the form of a string is converted into a tokens stream, which is similar to a node in AST

Syntax analysis stage: transform a token flow into the form of AST, and at the same time transform the information in the token into the representation structure of AST.

Interviewer:

Can you elaborate on the AST traversal process mentioned in your project?

I:

When dealing with a node, Babel acquires node information in the form of visitors and carries out related operations. This is done through the Visitor object, which defines access functions for various nodes, so that different processing can be done for different nodes. For example, in the process of the project, I mainly deal with NewExpression and CallExpression, and judge and filter the node and the parent and child nodes of the node through path parameters, balabala.

Summarize the "routine" of the interviewer.

The questions asked during the interview are basically divided into two types: concrete questions and open-ended questions.

Concrete problems will basically refer to work experience according to STAR rules, mainly to understand the basic literacy, technical depth and potential.

Open questions are basically to examine the ability of thinking divergence, to examine the depth and breadth of a certain field, and basically to ask with technical questions, or with the content of the work.

For example: n ways to implement a certain technology? The implementation principle of a certain technology? What are the advantages and disadvantages compared with what? What do you think about this technology?

The interviewer's "response" should answer the actual situation, and when preparing in advance, be more divergent, think more and sum up more. This piece can be prepared by yourself to add items.

The problem of divergence mainly depends on the accumulation of oneself at ordinary times. First of all, the basic knowledge should be solid and keep abreast of the latest technological developments at the same time. In the face of this kind of question, you must not stray from the question without answering the question.

On how to deal with the difficulty of web development interview project experience is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.