The following is a JD that we are recruiting for our position as an example. Different business and project backgrounds may have different requirements for skills, so this JD is for reference only.

We want our classmates

JD

As one of the biggest innovation projects in Taobao, the team has a size of 100 people. Most of the projects are in the confidential stage and have great prospects. Responsible for component library and business page development. 2. Lead the team to achieve technical products. 3. Responsible for large-scale multi-application architecture design. 4. Use front-end technology to cooperate with the server to achieve team business goals. Graphics, WebGL or familiar with Threejs framework, canvas related rendering and animation operation is preferred. 1. Good command of JavaScript. 2. Familiar with common engineering tools, and master modularization ideas and technical implementation schemes. 3. Familiar with the React front-end framework and the underlying technology. Knowledge of vue and other frameworks such as Angular is a plus. 4. Familiar with common tools like Redux/React-Router, etc. 5. Familiar with various Web front-end technologies, including HTML/XML/CSS, and have experience in front-end application development based on Ajax. 6. Good coding habits, continuous enthusiasm for front-end technology, optimistic and cheerful personality, strong logic, good at cooperating with people from various backgrounds. 7. Experience in TS/ mobile front-end development /NodeJS/ server development is preferred.

Translate JD

Why the title? Because a lot of people look at the job description and probably compare it to what they’re doing, checking keywords. And many front end students see the first job requirements of graphics, may start to back off. Or when you see a few keywords and you know them, you think it’s ok. It’s pretty simple.

Is it really good to stop like that? Why is the job description so easy, but the interview so hard? Did you really read the job description?

Now, let’s pause for a moment and take a look at the above question. What do you mean by reading the job description? From my personal understanding, reading the job description should be to understand what basic skills are required and what challenges the position is likely to encounter. When we write our resumes, we should be “proficient in React” and “proficient in react”. We believe that people will not write at random. Similarly, the words in JD: mastery, proficiency, understanding and familiarity are not written randomly, which represent the ability requirements of the team for new students.

When we think back to writing our resumes, we ask ourselves this prefix. Because of the fear that once you write proficient, the interviewer’s questions will be more difficult, and even feel that only those who recite the source code backwards can be called proficient. Of course, some students are very confident. They have done several projects with React, and they write that they are proficient in React.

Both can be called mastery and neither can be. Without objective standards, how can we measure it? Where is the standard? So here, FROM the perspective of Ali interviewer, I give the criteria I think, as objective and quantifiable as possible. So, based on the above job criteria, LET me translate the job requirements:

First of all, after reviewing all the requirements, it will be found that although 3d related skills are mentioned in this position, most of them are related to application development. Therefore, this position is not looking for a 3d professional student, but a student with strong engineering ability and understanding of 3D.

Graphics, WebGL or familiar with Threejs framework, canvas related rendering and animation is preferred.

Junior:

• I have learned related knowledge of graphics, know the role of matrix and other mathematical principles in animation, know the most basic composition of 3D scenes, can build 3D scenes with Threejs, and know the relationship between WebGL and Threejs.
• I know what canvas is, and when it comes to rotations I can tell the CANVAS API.
• Know CSS animation, CSS animation properties know the keywords and usage (in other words, the phone interview will be on the spot to ask the mouth spray CSS animation, at least can say about it, rather than answer baidu will use).
• Know JS animation, can name 1~2 community JS animation library, know the advantages and disadvantages of JS animation and CSS animation and applicable scenarios.
• Know raf and other ways to get to 60fps.

Intermediate:

• If there are no threejs, you can wrap a simple Threejs yourself based on WebGL.
• When talking about principle, you can say quaternions, when talking about mouse operation, you can say throttling, when talking about performance, you can say restore, when talking about frames, you can say the difference between RAF and timeout, and their respective roles in optimization.
• Knows how to handle loading and rendering performance issues on the mobile end.
• Know how to combine native capabilities to optimize performance.
• Know how to troubleshoot performance problems. Good knowledge of Chrome animation, 3D, sensor debugging.

Senior:

• I have built a whole set of resource loading optimization schemes, and can explain the details of the whole scheme, including what function points need to be realized at the front end, client end and server end, which basic capabilities to rely on, and how to cooperate.
• Design and implement front-end animation engine, can understand the technical architecture of a complex interactive project, know which core modules are required, and how these modules fit together.
• Have a self-implemented animation related technical solution output that addresses clear business or technical difficulties. Encapsulating a library for fast business landing is not the technical solution here. If there is a similar community program, it must be able to explain the differences with competing products in principle, their advantages and disadvantages, and the reasons for the selection of technology.

Proficient in JavaScript.

Junior:

• You need to know all the concepts of JavaScript, and the contents of the JavaScript Language Essentials book need to have concepts, and you need to be able to blurt out what the core points are. Here are a few for reference:
• You know combinatorial parasitic inheritance, you know class inheritance.
• Know how to create class function + class.
• Know how closures are used in real-world scenarios, common pitfalls.
• Know what a module is and how to use it.
• Know what an Event loop is and can illustrate how an event loop affects the usual coding.
• Master basic data structures, such as stacks, stacks, and trees, and understand the role of these data structures in computer infrastructure.
• Know ES6 array related methods, such as forEach, Map, reduce.

Intermediate:

• Know the difference between class inheritance and combinatorial parasitic inheritance and can give examples.
• I know the principle of Event loop, macro and micro tasks, and can explain why to distinguish from each other from a personal understanding level. Know the difference between Node and browser implementations of loop.
• Can integrate concepts such as inheritance, scope, closure, and module, and illustrate how these concepts fit together with practical examples.
• Can blurt out the core ideas of more than two design patterns, and combine the JS language characteristics for example or the implementation of oral spray basis.
• Master some basic algorithm core ideas or simple algorithm problems, such as sorting, adding large numbers.

Familiar with common engineering tools, master modular ideas and technical implementation schemes.

Junior:

• Know webpack, rollup and the scenarios they apply to.
• Know the difference between WebPack V4 and V3.
• Blurt out the Basic WebPack configuration.
• Know the code structure and execution flow of webPack result, know what index.js, runtime.js do.
• Know what AMD, CMD, CommonJS, ES Module are respectively.
• Know all modularity standards that define how a module is written. Given 2 files, can spit out a piece of code to complete module packaging and execution of the core logic.

Intermediate:

• Know webpack link, know plugin life cycle, know how to write a plugin and loader.
• Know what common loader does, can explain a few words, such as babel-loader, vue-loader.
• Can talk about how to do webpack configuration in combination with performance optimization, can clearly explain what the core points are, and explain what problems to solve, what external dependencies are needed, such as CDN, access layer, etc.
• Understand the realization principle of asynchronous module loading, and be able to implement core logic by spouting code.

Senior:

• Ability to design or specify team development infrastructure. Specifically including but not limited to:
• Project scaffolding, and how to share in tool form.
• The team specified how ESLint should be designed and updated uniformly.
• Tool-based packaged publishing process, including local debugging, cloud build, online publishing system, one-click deployment capability. At the same time, the solution is not limited to front-end engineering, including related server infrastructure, such as CDN service construction, access layer cache design, domain name management and control, etc.
• Client caching and preloading solutions.

Familiar with React front-end framework, understand the underlying technology. Knowledge of vue and other frameworks such as Angular is a plus.

Junior:

• Know common optimizations in React, blurt out common life cycles, and know what they do.
• React can compare react and JS to control the native DOM, and can spit out a simplified version of React.
• Know the general implementation of diff algorithm.
• I have my own experience in using state and props, combined with the description of controlled components, Hoc and other features, I need to explain the application scenarios of various solutions.
• The same applies to the react or Angular substitution.

Intermediate:

• Can explain why Fiber is being implemented and the potential pitfalls.
• Be able to explain why a hook should be implemented.
• Explain why immutable is used, and why it is necessary to use it or not.
• Know react features that are not commonly used, such as context and portal.
• Explain the nature of the React like framework with your own understanding and how these frameworks can coexist.

Senior:

• Ability to design framework independent technical architecture. Including but not limited to:
• Explain how to solve possible conflicts based on actual cases.
• It can explain the logic of architecture hierarchy, the core modules of each layer, and the problems to be solved by the core modules. It is better to be able to give examples of pits or elegant treatment schemes based on actual scenarios.

Familiar with common tools like Redux/React-Router, etc.

Junior:

• Know about react-Router, redux, redux-thunk, react-redux, IMMUTABLE, ANTD, or equivalent community component libraries.
• Know what vue and Angular family buckets are.
• Learn how to use the React plugin.
• Know the react-router v3/ V4 difference.
• Know antD componentized design idea.
• Know what thunk does and how it works.

Intermediate:

• Read the whole family bucket source code, do not require every line to see, but know the core implementation principle and the underlying dependency. Can spit out a few lines of key code to achieve the corresponding class library standards.
• Can thoroughly explain Redux from a data-driven perspective, and can spit out how to combine native JS with Redux.
• Talk about the similarities and differences between Vue and React with redux, Vuex, MOBx and other data streams.

Senior:

• Have experience in building complex applications based on family buckets, such as the recently popular micro front end and the integration of these libraries, what should be paid attention to, what will be the pit, how to solve

Familiar with various Web front-end technologies, including HTML/XML/CSS, have experience in front-end application development based on Ajax.

Junior:

• HTML aspects include but are not limited to: semantic tags, history API, storage, Ajax2.0, etc.
• CSS aspects include but are not limited to: document flow, redraw rearrangement, Flex, BFC, IFC, before/ After, animation, KeyFrame, draw triangle, priority matrix, etc.
• Know AXIOS or equivalent network request library, know axios core functionality.
• Be able to use XHR, know the relevant technology and the underlying technology of network request, including but not limited to: Content-Type, the role of different types; Restful design concept; Cors processing scheme, and browser and server execution process; Mouth spray file upload implementation;
• Know how to complete the login module, including but not limited to: how to implement the login form; Cookie login state maintenance scheme; Token Base login mode scheme; The session concept;

Intermediate:

• The HTML aspect can describe the implementation of common class libraries in conjunction with various browser apis.
• The CSS aspect is able to combine concepts and explain the principles of hacks or optimizations on the web.
• Can explain the overall architecture and process of the front and back end of the interface request, including: business code, browser principle, HTTP protocol, server access layer, RPC service call, load balancing.
• Know websocket usage, including but not limited to: authentication, room allocation, heartbeat mechanism, reconnection scheme, etc.
• Know the PC and mobile terminal login state maintenance scheme, know the token base login state implementation details, know the server session control implementation, the keyword: refresh token.
• Know oAUTH2.0 lightweight and complete implementation principle.
• I know how mobile terminal API requests and sockets are sent through Native, how to interact with Native data, and the implementation principle of IOS and Android JsBridge.

Senior:

• Know mobile webView and basic abilities, including but not limited to: differences between UIWebView and WKWebView on iOS; Webview resource loading optimization scheme; Webview pool management scheme; Native routes.
• The login abstraction layer can provide a complete technical architecture design of the front-end and back-end user system to meet the unified user system with multiple business forms. Consider scenarios such as cross-domain, multi-organizational, cross-terminal, and user-mode opening.
• Mock schemes, the ability to design mock data schemes to meet the needs of various scenarios, and at the same time to express the understanding of the separation of the front and back ends. Consider the versatility of mock schemes, scenario coverage, and code or engineering intrusion.
• Buried point scheme, can explain the front-end buried point scheme technology to realize the bottom, and the principle of technology selection. Able to design data acquisition and analysis schemes based on buried points, including: bucket strategy, sampling rate, timing, data warehouse, data cleaning, etc.

Good coding habits, continuous enthusiasm for front-end technology, optimistic personality, strong logic, good at working with people from various backgrounds.

Junior:

• Know ESLint and how to use it with projects.
• Understand the important front-end update events in the past three years.
• During the interview, I can give a general thinking path from the logical analysis to the questions I can’t answer.
• Know several popular domestic and foreign front-end technology websites and can give some examples of where the core points in the interview process are seen.

Senior:

• Implement ESLint within the team and provide engineered solutions.
• The interview process is clear, with the interviewer giving key words and being able to respond quickly to relevant technical points, but avoid going on and on about a lot of inessential stuff. For example, during my interview, the teacher asked me a layout method of left picture and right text. I replied that I had summarized seven schemes, among which BFC, float and flex were the most useful. Then I sprayed the key CSS port, and the CSS was finished.

Experience in TS/ mobile front-end development /NodeJS/ server development is preferred.

• According to the depth of understanding, it is divided into early/medium/advanced.
• Know what TS is, why TS is used, and have practical experience in TS engineering.
• Know the common problems of mobile front-end, including but not limited to: REM + 1PX solution; Preloading; Jsbridge principle, etc.
• Can say the general server technology, including but not limited to: Docker; K8s; RPC principle; Middle background architecture layer; Cache processing; Distributed; Responsive programming, etc.

Is JD’s requirement difficult?

First of all, thank you for seeing this, if you are watching carefully, then I am even more moved. And you have proved your ability to learn and patience. Here’s a question you probably already have the answer to: Why is an interview so hard when the job description looks easy? However, some students may ridicule: I have written so much, I know some Ali P6, P7 is not all ah, big factories are screws, I would like to ask during the interview, the actual work is not if else, let alone I can not meet these scenes, how could I know.

Here, I want to make it very serious:

1. The front end of Taobao I know and the P6 students in my team can do all the above elementary level, intermediate level covers at least 60% and advanced level covers at least 20%. P6+ students, intermediate coverage more than 80%, advanced coverage more than 50%; P7 Students advanced coverage of more than 80%.
2. At the front end of our team, each person is responsible for multiple complex business projects (objective data: integrated business system involving multiple user roles with at least 20+ server interfaces, more than 5 router configurations), as well as some common capabilities, such as component library, etc. There is no single person with one line of business who is only responsible for the maintenance of a few components of the screw. I don’t know why the saying that big companies are screws has been used in Internet companies. My personal feeling is that if my work at Ali is a screw, then my previous jobs may be just threads. On the other hand, if you want to be promoted, it’s just your job to maintain these business systems, so provide some higher-level thinking and technical output when you get promoted.
3. Flowers and cow dung if else. Var temp = ”; var temp = ”; For () {temp += ‘XXX’}. In addition, if you don’t know how it works, then a technology product like WebPack, a star, will never be available to you. Calm down and think about it. Is webpack just an if else? Yes, not all of it.

Smart you should see that the above JD translation of primary, intermediate and advanced, corresponding to WHAT I think, Ali P6 / P6 +/ P7 competency standards, but also a knowledge map.

The primary requirements are more practical application and basic principles, the intermediate requirements are based on the extension of principles and the application of complex technical architecture, and the advanced requirements are the ability of cross-stack, cross-terminal and multi-field combination to produce comprehensive solutions.

What’s more, our requirements for technology can be combined with actual business scenarios or help improve work efficiency. Empty talk and awkward thinking, or just baidu to the article, not through internalization, then the interview process will be instantly exposed.

Sometimes I will typing the interview directly in boss direct hire, sometimes I will hear the interview process, the phone came from the keyboard percussion voice, and even sometimes I will take the initiative to let the interview students to Baidu, or hang up the phone to think about it, after 15 minutes to chat again.

I dare to interview like this, because I know, I want the answer you can not find out, I am looking at what you really understand. Searchable, I don’t care, I also want you to search, to better show your comprehensive ability.

I believe that everyone can grow up quickly, but everyone lacks different things. Some people are less down to earth, some people are less the opportunity to look far, more people may just not find the right way.

I hope this article will help those of you working on the front end, and that it will be one of the guiding lights. But I also know that everyone is different.

Also welcome to pay attention to our tao system technology official zhihu number, I will share more tips and methods for the growth of the front-end field.

Let’s go.