I am in front of Alibaba, how can I help you?

Posted May 27, 202017 min read

Introduction: Interpretation of Conscience:JD Analysis Atlas At the end of the class I interviewed, I will point out problems and give learning suggestions. Most classmates are not hard enough, not smart enough, but have not found the right method and have not hit the point. I summarized all the previous interview experience and common questions, wrote this article, I hope to give front-end students, whether or not to interview Ali's position, have a reference. At the same time, it is also a method of writing my own summary, hoping to help other technology-related students

image.png

Author | Shen Lijie(Panchong)
Produce | Alibaba New Retail Amoy Technology Department

who am I? Why write this article?

Okay, I admit, I may not find a way to recruit myself. However, after reading so many resumes and going through so many interviews, my biggest feeling is regret. Because there are many classmates, on the phone I heard the effort, the ability, and the passion, but I did n t hear the highlights and make me feel that I can continue to pass the next level.

At the end of the classmates I interviewed, I will point out problems and give learning suggestions. Most classmates are not hard enough, not smart enough, but have not found the right method and have not hit the point. I summarized all the previous interview experience and common questions, wrote this article, I hope to give front-end students, whether or not to interview Ali's position, have a reference. At the same time, it is also a method of writing my own summary, hoping to help other technology-related students.

The classmates we want

** JD**

Business background
One of the largest innovation projects in Taobao, the large team has a scale of 100 people, most of the projects are in the confidential stage, and the prospects are promising.

description of job

  1. Responsible for component library and business page development.
  2. Lead the team to complete the technical product realization.
  3. Responsible for large-scale multi-application architecture design.
  4. Use front-end technology and server to work together to complete team business goals.

Job Requirements
0. Master of graphics, webgl or proficient use of threejs framework, proficiency in canvas-related rendering and animation operations are preferred.

  1. Proficiency in JavaScript.
  2. Familiar with commonly used engineering tools, master modular ideas and technical implementation schemes.
  3. Proficient in React front-end framework and understand the underlying technology. Those who understand other frameworks such as vue and angular are preferred.
  4. Master the common tools of react ecology, redux/react-router and so on.
  5. Familiar with various Web front-end technologies, including HTML/XML/CSS, etc., have Ajax-based front-end application development experience.
  6. Have good coding habits, have continuous enthusiasm for front-end technology, optimistic and cheerful personality, strong logic, good at cooperating with people of all backgrounds.
  7. Experience in front-end development/NodeJS/service development on TS/mobile devices is preferred.

** Translate JD**

Why did you start this title? Because many people see job descriptions, they may be comparing one by one with the things they do, and checking the keywords. Many front-end students may start to retreat when they see the graphics in the first line of the job requirements. Or if you see a few keywords you know, you think it s okay. It s quite simple.

Is it really good to be discouraged in this way? Why does the job description look simple, but the interview is so difficult? Do you really understand this job description?
Now, let s stop for a while. Let s take a closer look at the above question.

What does it mean to read the job description? From my personal understanding, to understand the job description, it should be to understand what basic capabilities are required for this position and what challenges may be encountered. When we write our resume, "proficient in react" and "skilled use of react", I believe everyone will not write at will. Similarly, what is in the JD:mastery, proficiency, understanding, familiarity, is not written at random, which represents the team's ability requirements for new students.

When we think about writing our resume, we will ask ourselves this prefix. Because I am worried that once I have written proficiency, the interviewer's question will be more difficult, and I even think that only people with source code backwards can be called proficient. Of course, there will also be students who are very confident, and have done several projects with react, they wrote proficient react.

Both of these can be called mastery, and neither can they. Without objective criteria, how to measure? Where is the standard? So here, from the perspective of the Ari interviewer, I give the standards I think, as objective and quantifiable as possible. So, based on the above job standard, let me translate the job requirements:

First of all, after reviewing all the requirements, you will find that although this position mentions 3d related skills, most of them are application development related capabilities, so this position is not looking for professional 3d field students, but requires an engineering ability Strong, students who understand 3D.

  1. Master of graphics, webgl or proficient use of threejs framework, proficiency in canvas-related rendering and animation operations are preferred.

primary:

  • I have studied graphics-related knowledge, know the role of matrix and other mathematical principles in animation, know the most basic composition of 3D scenes, can use threejs to build 3D scenes, and know the relationship between webgl and threejs.
  • Knowing what canvas is for, talking about the api of the canvas when it is rotated.
  • Know css animation, css animation properties know keywords and usage(in other words, the phone interview will ask questions on the spot to request oral spraying of css animation, at least it can be said to be approximate, rather than answer Baidu will use it).
  • Know js animation, can tell 1 ~ 2 community js animation library, know the advantages and disadvantages of js animation and css animation and applicable scenarios.
  • Know raf and other methods to achieve 60fps.

intermediate:

  • If you don't have threejs, you can also package a simple threejs based on webgl.
  • Talking about the principle can say quaternion, talking about mouse operation can mention throttling, talking about performance can mention restore, talk about the frame to say the difference between raf and timeout, and their respective role in optimization.
  • Know how to deal with loading issues and rendering performance issues on the mobile terminal.
  • Know how to optimize performance with native capabilities.
  • Know how to troubleshoot performance issues. Very familiar with chrome animation, 3D, and sensor debugging.

advanced:

  • Build a complete set of resource loading optimization programs, which can explain all the details of the overall program, including which function points, which basic capabilities are required to be implemented by the front end, client and server, and how to cooperate.
  • Designed and implemented a front-end animation engine that can explain the technical architecture of a complex interactive project, know which core modules are needed, and how these modules work together.
  • The output of animation-related technical solutions implemented by yourself, this set of technical solutions must solve clear business or technical difficulties. Encapsulating a library for rapid business landing is not a technical solution here. If there is a similar community plan, it must be able to explain in principle the difference between Bai and competing products, their respective advantages and disadvantages, and the reasons for technical selection.

1. Proficiency in JavaScript.

primary:

  • You need to understand various concepts of JavaScript. The contents of the book "The Essence of JavaScript Language" must have concepts, and these core points can be blurted out. Here are some references:
  • Know combination parasitic inheritance, know class inheritance.
  • Know how to create class function + class.
  • Know how closures are used in actual scenarios, common pits.
  • Know what the module is and how to use it.
  • Know what the event loop is, can give an example of how the event loop affects the usual encoding.
  • Master basic data structures, such as heaps, stacks, and trees, and understand the role of these data structures in the computer foundation.
  • Know ES6 array related methods, such as forEach, map, reduce.

intermediate:

  • Know the difference between class inheritance and combined parasitic inheritance, and give examples.
  • Know the principle of event loop, know the macro and micro tasks, and be able to tell why it should be distinguished from the level of personal understanding. Know the difference between node and browser when implementing loop.
  • Can integrate the concepts of inheritance, scope, closure, and module, and explain how these concepts are combined with practical examples.
  • The core idea of being able to blur out more than two design patterns, combined with examples of js language features or mouth spray based implementation.
  • Master some core ideas of basic algorithms or simple algorithm problems, such as sorting and addition of large numbers.

2. Familiar with commonly used engineering tools, master modular thinking and technical realization scheme.

primary:

  • Know webpack, rollup and their applicable scenarios.
  • Know the difference between webpack v4 and v3.
  • Blow-out webpack basic configuration.
  • Know the code structure and execution flow of webpack packaging results, know what index.js and runtime.js are for.
  • Know what amd, cmd, commonjs, es module are.
  • Know how all modular standards define how to write a module. Given 2 files, you can spray a piece of code to complete the core logic of module packaging and execution.

intermediate:

  • Know the webpack packaging link, know the plugin life cycle, and know how to write a plugin and loader.
  • Know what common loader has done, can explain in a few words, such as babel-loader, vue-loader.
  • Can combine performance optimization to talk about how to do webpack configuration, can clearly explain what the white core points are, and explain what problems are solved, what external dependencies are needed, such as CDN, access layer, etc.
  • Understand the implementation principle of asynchronous module loading, and realize the core logic by spraying code.

advanced:

  • Can design or specify the R & D infrastructure of the Bai team. This includes but is not limited to:
  • Project scaffolding and how to share it in the form of tools.
  • How to design the eslint specification and how to update it in a unified way.
  • Tooled packaging and release process, including local debugging, cloud construction, online release system, and one-click deployment capability. At the same time, the solution is not limited to the front-end engineering part, including related server-side infrastructure, such as CDN service construction, access layer caching solution design, domain name management and control, etc.
  • Client-side caching and preloading scheme.

3. Be proficient in React front-end framework and understand the underlying technology. Those who understand other frameworks such as vue and angular are preferred.

primary:

  • Know the common optimization scheme of react, blur out the common life cycle, and know what they do.
  • Know the general idea of react, can compare the difference between react and js to control the native dom, and can spray a simplified version of react.
  • Know the general realization of diff algorithm.
  • Have your own experience of state and props, combined with the description of controlled components, hoc and other characteristics, you need to explain the applicable scenarios of various programs.
  • Replacing the above points with vue or angular is also applicable.

intermediate:

  • Can explain why Bai wants to realize fiber, and the pit that may bring.
  • Can explain why to realize the hook.
  • Can explain why I want to use immutable, and use or not to consider.
  • Know the features of react that are not commonly used, such as context and portal.
  • Can use his own understanding to explain the nature of the white react like framework and how Bai can make these frameworks coexist.

advanced:

  • Able to design framework-independent technical architecture. including but not limited to:
  • Explain how to solve the possible conflicts, which need to be combined with actual cases.
  • Can explain the hierarchical logic of the architecture, the core modules of each layer, and the problems to be solved by the core modules. It is better to give some examples of pits or elegant processing schemes in combination with the actual scene.

4. Master the common tools of react ecology, redux/react-router, etc.

primary:

  • Know react-router, redux, redux-thunk, react-redux, immutable, antd or community component library of the same level.
  • Know what are the corresponding family buckets of vue and angular.
  • Know what browser-related plugins are and how to use them.
  • Know the difference between react-router v3/v4.
  • Know antd component design ideas.
  • Know why thunk is used and how to achieve it.

intermediate:

  • I have seen the source code of the whole family bucket, I don't need to read every line, but I know the core implementation principles and the underlying dependencies. A few lines of key code can be sprayed to achieve the corresponding class library.
  • A thorough explanation from the data-driven perspective of white redux, how to do oral js and redux combination.
  • Can combine redux, vuex, mobx and other data streams to talk about their similarities and differences to vue and react.

advanced:

  • Experience in building complex applications based on the whole family bucket, such as what to pay attention to when the recently popular micro front end is combined with these class libraries, what pits are there, and how to solve them

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

primary:

  • HTML includes but is not limited to:semantic tags, history api, storage, ajax2.0, etc.
  • CSS includes but is not limited to:document flow, redraw rearrangement, flex, BFC, IFC, before/after, animation, keyframe, triangle drawing, priority matrix, etc.
  • Know axios or the same level network request library, know the core function of axios.
  • Ability to use oral XHR, know the related technologies and underlying technology of network requests, including but not limited to:content-type, the role of different types; restful design concept; cors processing scheme, and execution process of browser and server; oral spray files Upload implementation
  • Know how to complete the login module, including but not limited to:how to implement the login form; cookie login state maintenance program; token base login state program; session concept;

intermediate:

  • HTML can be combined with various browser APIs to describe the implementation of commonly used libraries.
  • The css aspect can combine various concepts to explain the principles of those hacking schemes or optimization schemes on the white net.
  • Can explain the overall architecture and process of the front and back end of the white interface request, including:business code, browser principle, http protocol, server access layer, rpc service call, load balancing.
  • Know the usage of websocket, including but not limited to:authentication, room allocation, heartbeat mechanism, reconnection scheme, etc.
  • Know PC terminal and mobile terminal login state maintenance scheme, know the implementation details of token base login state, know the server session control implementation, keyword:refresh token.
  • Know the light weight and complete realization principle of oauth2.0.
  • Know how mobile API requests and sockets are sent through native, how to interact with native data, and how to implement iOS and Android jsbridge.

advanced:

  • Know mobile webview and basic capabilities, including but not limited to:iOS uiwebview and wkwebview differences; webview resource loading optimization scheme; webview pool management scheme; native routing, etc.
  • Log in to the abstraction layer, which can provide a complete front-end and back-end overall technical architecture design for the user system, to meet the unification of multi-service user systems. Consider scenarios such as cross-domain name, multi-organizational structure, cross-end, and user mode opening.
  • Mock solution, able to design mock data solutions that meet the needs of various scenarios, and at the same time can speak the understanding of the separation of front and back ends. Consider the generality of the mock solution, the coverage of the scene, and the degree of code or engineering intrusion.
  • Burial point scheme, can explain the bottom implementation of white front-end buried point scheme technology and the principle of technology selection. Able to design data collection and analysis schemes based on buried points, keywords include:bucketing strategy, sampling rate, timeliness, data warehouse, data cleaning, etc.

6. Good coding habits, continuous passion for front-end technology, optimistic and cheerful personality, strong logic, good at cooperating with people of all backgrounds.

primary:

  • Know eslint and how to use it with engineering.
  • Understand the more important update events of the front end in the past 3 years.
  • If you encounter unanswerable questions during the interview, you can give a rough path of thinking from a logical analysis.
  • Know several popular domestic and foreign front-end technology websites, and at the same time can cite a few of the core points in the interview process are seen from.

advanced:

  • Promote eslint within the team and give engineering solutions.
  • The interview process has a clear idea. The interviewer gives keywords, which can quickly reflect the relevant technical points, but also to avoid talking and talking about a bunch of irrelevant things. For example, when the Pythagorean teacher interviewed me at that time, I was asked about a layout method on the left and the right. My answer was:I have summarized 7 kinds of solutions myself, of which the more convenient ones are based on BFC and float And three kinds of flex. After spraying the key css, the css was finished.

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

  • Divided into beginner/intermediate/advanced according to the depth of understanding.
  • Know what TS is, why use TS, and have TS engineering practical experience.
  • Know the common problems of the mobile front end, including but not limited to:rem + 1px solution; preloading; jsbridge principle, etc.
  • Can tell the approximate server technology, including but not limited to:docker; k8s; rpc principle; middle and back office architecture layering; cache processing; distributed; responsive programming, etc.

** Is JD's request difficult?**

First of all, thank you for seeing this. If you look carefully, then I am even more moved. And you have proven your learning ability and patience with practical actions. There is a question in the JD translation that is so large above, everyone should have the answer:why the job description looks simple, but the interview is so difficult? However, some classmates may ridicule:I have written so much, and some of the Ali P6 and P7 I know are not urban. The big factories are all screws, so I asked them during the interview. The actual work is not if else, let alone me. How can I know if I can't meet these scenes.
Here, I want to make a serious statement:

The Taobao front-end I know and the P6 classmates of my team can do it at the beginning, at least 60%at the intermediate level, and 20%at the advanced level; P6 + classmates, at least 80%at the intermediate level, and at least 50%at the advanced level; Advanced coverage is over 80%.

At the front end of our team, everyone is responsible for multiple complex business projects(objective data:at least 20+ server interface, more than 5 router configurations, comprehensive business systems involving multiple user roles), and some general capabilities, Such as component library. There is no one person who only takes one line of business and is only responsible for the screw-type work of maintaining certain components. I do n t know why the comments that big factories are all screws are reused in Internet companies. My personal feeling is that if my job at Ali is a screw, then my previous jobs may be barely threaded. In addition, if you want to be promoted, it is only your job to maintain these business systems. Please provide some higher-level thinking and technical output when you are promoted.

If else also divides flowers and cow dung. Some people write \ []. Reduce, and some people write var temp = ''; for() {temp + = 'xxx'}. In addition, if you don't know the principle, then a bright star-like technology product like webpack will never be with you. Calm down and think about it, is webpack just an if else? Yes, not all.

Smart, you should see that the elementary, intermediate and advanced levels in the JD translation above correspond to what I think, Ali s p6/p6 +/p7 ability standards are also a knowledge graph. The primary requirements are more biased towards practical applications and basic principles. The intermediate requirements are based on the expansion of principles and the application of complex technical architectures. The advanced requirements are the ability to produce comprehensive solutions across multiple stacks, multiple terminals, and multiple fields. Moreover, our technical requirements can be combined with actual business scenarios, or can help improve work efficiency. Empty talk and embarrassment, or just articles from Baidu, without internalization, then the interview process will be instantly disassembled.

Sometimes I will directly type the interview on the boss appointment, sometimes I will hear the sound of keyboard knocking on the phone during the interview, and sometimes I will take the interviewee to Baidu or hang up the phone. Think about it and talk again after 15 minutes. I dare to do this interview because I know that you cannot find the answer I want. I see what you really understand. What I can search, I do n t care, and I hope you check it to show you the comprehensive ability.

Way to break the game

Well, if you see here, and did not dissuade you, then let's light the dawn of hope. Here is a sentence from Ali to give you some comfort:not difficult, what do you want?

At the beginning I mentioned that after interviewing so many classmates, my biggest feeling is regret, because many classmates are almost a little bit in my opinion. Here I cite two more typical problems.

** What are the highlights?**

I believe this is a doubt in the minds of many students, and in fact, I see that many interview records below the resume will write:lack of highlights, don't consider it for now. If you read the above carefully and still have this doubt here, then I think you need to calm down and feel it.

I will not make a clear statement about the highlights here. I will give an example to make you feel more:

A:Responsible for the company's front-end work, use webpack to package the code and publish it online. Use webpack configuration to optimize the overall performance, and use happypack to speed up the packaging.
B:Build an internal cloud building system and produce general command line command tools; platformize release, environment switching and rapid rollback capabilities to ensure the stability of the online environment; at the same time quantify and control the R & D process and produce R & D performance weekly report.

If you are an interviewer and see a project description in the sea of resumes, what attracts your attention most? Is it the keyword of webpack, happypack? Or does it remind you of the complexity of this matter and the great value this system brings?

** What if there is no scene?**

This is also a problem often encountered by many students. The above examples illustrate so many technical points, and in the environment I am in, I have only one front end, and I have to write a little even on the server side. How can I have the energy to engage in such things used by large-scale teams?
First of all, time is planned by yourself. My wife and I bring our own children. We have two babies, and we get off work at an average of 9 o'clock every day. I go home every day to pack up toys. The children may need to play with them when they go to bed late. 2 ps4 games.

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

Stage within 3 years of graduation:Do n t worry, you have a lot of choices. You can check the above elementary points to see if you have done it. If you do n t do it, go study. The elementary technical points do not depend on the team size. One People can do the ultimate. If you are in an environment where there are already 2 people, you can pay attention to the intermediate and advanced levels at the same time. Do n t think that if there are few people, do n t try it and let it go.

Stage within 5 years of graduation:Regardless of the size of your environmental team, please start to focus on intermediate and advanced related abilities. Is there no need for R & D to improve efficiency if there are few people? The first article I posted on segmentFault was how to use travis and github for one-click deployment. At that time, I did n t go to Taobao, nor did my team use this ability. This article is my own personal project Used. The entire process also involves all aspects of R & D effectiveness.

Stage within 8 years of graduation:please start to focus on the output of advanced related technical solutions. I take component dynamics as an example. In my early years, I maintained the entire transaction link H5 page of mobile Taobao. The ui part of all pages was extracted by fine-grained componentization, and the page structure was distributed through configuration. Even if a person maintains a page, they must do their best to think about good technical solutions. The benefit of this highly dynamic design is that on Double Eleven each year, 80%of the needs are handed over to pd to handle it. The remaining needs are transferred to my needs for development, which are new interactions, or before Insufficient abstract components. So the team I was in at the time, 3 people were maintaining all H5 pages including the home page of Taotao, product details, and forward and reverse transaction links, and at the same time, they had extra energy to support the conference page. Better technical thinking and design will definitely bring you more possibilities, and the elegance of the system must not depend on the stacking of business code, but how you think as the core of the technology.

How can i help you

I believe that everyone can grow fast, but everyone is different. Some people are less down-to-earth, some people are less likely to climb high, and more people may just not find the right path.
I hope this article can help people who are working in the front-end field, and I hope this article will become one of the guiding lights. But at the same time, I also know that everyone is different, so I leave the contact information here, the students who need can add WeChat:vianvio(Add note:front-end fellow travellers)

I can do mock interviews for you, and at the same time give me the development ideas and suggestions that I think are suitable for you.

In addition, at present, we have set up a mock interview group, there are regular activities, you can refer to: https://github.com/vianvio/FE-Companions Welcome to Interested students come to participate.

Introduce my team

I am in the ihome business of Alibaba Taobao Technology Department. At present, ihome is deeply cultivating the home furnishing industry, and vertically into the industry, hoping to bring some innovation to the industry. The products and business forms currently available to the public are:Lieping App, Juzhi Life Stores in Qingdao and Ningbo. We also have more interesting, challenging and business beyond your imagination.
If you are willing to come and believe with us, please send your resume and we will see it together!
Please send front-end resume to: yefei.niuyf@alibaba-inc.com or lijie.slj@alibaba-inc.com
Students who are mainly in the 3d direction, please send your resume to: jiangcheng.wxd@alibaba-inc.com
Please send your java resume to: xiaoxian.zzy@taobao.com or wuxin.sn@taobao.com
Please send your resume to: fangying.fy@alibaba-inc.com
Some people may find it strange that the contact information is written at the end, how many people can see it, here I quote the interpretation of Ali s values by Teacher Ma and Xiaoyaozi to explain:our values are to help us find the same path people. We look forward to joining people with lofty ideals!