Who am I? Why write this article?

I am taobao technology department of an ordinary front-end technology experts, the flower rock chong. Every year, I wanted to recruit several students for the team, but after several years of efforts, no one was recruited. Am I reading too few resumes? No, just the internal resume system. I’ve seen at least a thousand resumes. Am I being too strict? Maybe so, but only one of the students I rejected in the phone interview went on to work in another department some time later.

Okay, I admit, I may have been a little out of my depth in recruiting myself. However, after reading so many resumes and going through so many interviews, my biggest feeling is regret. Because there are a lot of students, ON the other end of the phone I heard the effort, the ability, the passion, but did not hear the highlight, and let me feel, can continue to go through the next level of ability.

At the end of each interview, I pointed out the problem and gave study advice. Most students are not not hard enough, not smart enough, but did not find the right method, did not hit the point. I have summarized all the previous interview experience, as well as the common questions, and write this article, hoping to provide a reference for the front-end students, whether they come to interview Ali’s position or not. At the same time, it is also a way to write down my own summary, hoping to help other technology-related students.

We want our classmates

JD

Business background

Taobao internal one of the largest innovation projects, the large team has a size of 100 people, most of the projects are in the confidential stage, promising

The job description

1. 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.

Job requirements

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 operation 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.
1. Good command of 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.
2. Familiar with common engineering tools, and master modularization 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.
3. Familiar with the React front-end framework and 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.
4. 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
5. Familiar with various Web front-end technologies, including HTML/XML/CSS, and 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.
6. Good coding habits, continuous enthusiasm for front-end technology, optimistic and cheerful personality, strong logic, good at cooperating 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.
7. 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.

The way to break a game

Well, if this doesn’t dissuade you, let’s have a ray of hope. It is not difficult. Why do you need it?

At the beginning, I mentioned that after interviewing so many students, my biggest feeling was regretful, because many students were just a little bit short in my opinion. They had enough personal ability, but maybe they just didn’t find the feeling. Here ARE two typical problems.

What are the highlights?

I believe this is the question in the minds of many students, and in fact, I have seen many resumes under the interview notes will say: lack of highlights, not considered. If you read the above carefully and still have this question, then I think you need to calm down and feel it again.

I’m not going to be explicit about the highlights here, but let me give you an example to make it more relevant:

A: Responsible for the front-end work of the company, using Webpack to package the code and release it online. Optimizes overall performance with webPack configuration and speeds up packaging with Happypack.

B: Build the internal cloud construction system and produce general command line instruction tools; Platform publishing, environment switching and fast rollback capabilities to ensure online environment stability; At the same time, the r&d process is quantified and controlled, and the r&d efficiency report is produced weekly.

If you’re an interviewer looking at a project description in a sea of resumes, what catches your eye? Is webpack, happypack keyword? Or does one sentence remind you of the complexity of the matter, and the tremendous value that this system brings?

What if there’s no scene?

This is a problem that many students often encounter. There are so many technical points listed above, and I’m in an environment where I’m the only one on the front end, and I even have to write a little on the server side, how can I have the energy to do something that is used by such a large team?

First of all, time depends on your own reasonable planning. My wife and I take care of our children by ourselves. We have two children, and we get off work at 9 o ‘clock on average every day. I go home every day to pick up toys, and my children may need to play with me if they sleep late.

After the time problem is eliminated, I suggest three stages:

  1. The stage within 3 years after graduation: don’t worry, you have many choices, you can check the above primary points, to see whether you have done it, not to learn, primary technical points do not depend on the size of the team, one person can do the best. If you are in an environment where there are already two people, you can pay attention to the intermediate and advanced points at the same time. Do not think that there are few people and do it freely. There will be solid harvest in the process.

  2. Within 5 years of graduation: Regardless of the size of your environment team, start focusing on intermediate and advanced competencies. Do fewer people eliminate the need for R&D? My first post on segmentFault, how to do one-click deployment with Travis and Github, was before I went to Taobao and my team didn’t use this capability. It was for my own personal project. The whole process also involves all aspects of r&d effectiveness.

  3. Within 8 years of graduation: Start looking at advanced relevant technical program outputs. I take component dynamics as an example. In my early years, I maintained the whole transaction link H5 page of mobile Taobao, and the UI part of all pages was finely grained compontized and removed, and the page structure was delivered through configuration. Even if you maintain a page alone, do your best to think of good technical solutions. The advantage brought by this highly dynamic design is that pd can deal with 80% of the requirements by itself on November 11 every year, and the rest of the requirements transferred to me to be developed are all new interactions or components with insufficient abstraction before. Therefore, three members of my team maintained all H5 pages, including the homepage of mobile shopping, product details and forward and reverse trading link, and also made extra efforts to support the conference page. Better technical thinking and design will certainly bring you more possibilities, and the elegance of the system will depend not on the stack of business code, but on how you, as the core of the technology, think.

How can I help you

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 AT the same time, I also know that everyone is different, so I leave my contact information here, and those who need it can add wechat: Vianvio and note: front-end fellow traveler. I can give you a mock interview and give you some ideas and suggestions that I think are appropriate for your development, and of course I can help you push it inward.

If you find our team attractive to you, or if you find the requirements in JD are simple, please send your resume to [email protected]

Maybe some people will feel strange, the contact information is written at the end, how many more people can see, here I quote Ma Papa and The Easy Boy’s interpretation of Ali’s values, to explain: our values are to help us find the same way of people.

Thank you for accompanying me to the end of this article, if you think this article has helped you a lot, please buy me a cup of coffee ~