preface

I have never written an annual summary, because this year is a year of great change, so I need to have a summary ceremony. At the same time, I hope that there will be an annual review every year in the future, looking at the current road, but also looking back at the past shortcomings. After all, front-end life, vegetation a fall.

My annual summary is divided into the following modules (the article is long and you can read it on demand) :

  • technology
  • learning
  • The squalid
  • recruitment
  • The Denver nuggets

The “technology” module mainly explains my technological innovation and practice in the past year. The “Learning” module will explain some learning contents and front-end new cognition in 2019, and also explain self-learning methods, hoping to be helpful to students in school and those who just started front-end work (considering that many friends often ask how to learn front-end). “Recruitment” is the most emotional part of this year, I will focus on explaining my feelings of recruitment in Ali, hoping to inspire students who want to work in Ali.

I’m sorry to tell you that I am not patient enough in answering the questions because OF my busy work (there are too many people asking the same questions). In the following article, I will focus on the “learning” and “recruitment” modules for frequently asked questions.

technology

This year has seen the biggest growth in technology, and the fastest self-transformation. The following is a technical structure chart summarized by myself, and the part marked in red is the part that has been touched or in-depth this year:

For me, the key words of technology innovation this year were “UI framework/scaffolding” and “Low Code,” and the key word of technology practice was “desktop.”

UI frame/scaffolding design

The beginning of this year was mainly about refactoring the base component library and architecting the business component library. This was the happiest time for me, because there were always some tough problems to solve (often difficulties are opportunities for personal growth). The UI framework/scaffolding design process will be explained from the following four aspects:

  • UI framework refactoring premise
  • Framework refactoring of the base component library
  • Business component library framework design
  • UI scaffolding design

UI framework refactoring premise

The company’s existing basic component library 1.x was designed based on Element UI framework. During the development process, it was found that Element UI framework brought the following problems (compared with our company) :

  • UI source compiled Webpack configuration complex
  • The Webpack configuration demonstrated by the Demo is complex and not very user-friendly for UI developers
  • The online experience of the Demo was not friendly enough
  • Demo does not demonstrate CI automatic deployment capability
  • Scripts for UI frameworks are numerous (mostly due to the need to compile various output specifications and the ability to import on demand)

Note: If some of the UI framework capabilities (such as Utils, commonJS2 version components on demand, UMD version) are not needed by the company itself, then it’s perfectly possible to cut them down and simplify the Webpack configuration considerably (unless you want to open source in the future).

To solve the above problems, the company’s existing base component library 1.x version of the framework was refactored.

Framework refactoring of the base component library

Firstly, it focuses on the design of Element UI framework. Secondly, on this basis, it reconstructs the framework of component library and reconstructs the framework of 2.x version as shown in the figure below:

As you can see from the figure, the 2.x version of the UI component library features are as follows:

  • Using Vue CLI 3.x library construction ability, greatly simplifies the UI Webpack configuration (most of the configuration is maintained by Vue CLI official)
  • Vue CLI Plugin is used to design UI tool plug-ins, providing more versatility and flexibility of tools (Vue CLI 3. X marked in red are user-defined UI plug-ins)
  • Vuepress 1.x was used for Demo design, which greatly reduced the complexity of Webpack configuration in Demo. You can use Vue to design a variety of generic Demo view components and enjoy the new features (themes, plug-ins, etc.) that Vuepress 1.x brings.
  • The ability to build UI frameworks is stronger, such as browser compatibility handling
  • UI components are developed using Vue’s official recommended style guide as a standard (ESLint is used as a validation tool for standard execution)
  • The Webpack/Babel compiler can be flexibly upgraded following Vue CLI 3.x
  • Support for TypeScript (UI component declaration files)

Extra fun: This process encountered a lot of thieves pit, in-depth interpretation of some Vue CLI 3.x source, incidentally to Vue CLI 3.x put forward some issues. In addition, full access to Vuepress 0.x / 1.x is a very painful process (even the director has to read the Vuepress source code, you have no reason not to try).

Business component library framework design

General business component library is a component library derived from the basic component library to meet the demands of various BU common business scenarios. Each BU can create its own business component library, which may cause the following problems:

  • Component libraries cost money to build
  • Components vary in quality
  • Repeat the wheel and cannot be reused by other BU
  • No uniform specification constraints (UED, requirements, development, build, publish specifications, etc.)

Therefore, it is necessary to build a common business component library across BU, but at the same time, this business component library should meet the following features:

  • Based on the base component library
  • Unified maintenance personnel (basic component library core development team for overall maintenance)
  • Unified UED, requirements, development, build, and release specifications (independent responsibility of business team core developers, base component library core development team review)
  • The BU supports on-demand loading (more and more common service components are returned by each BU. Therefore, you do not want to import irrelevant service components). You can import on demand through CLI
  • The development and maintenance of each business component are independently carried out by the business team, which not only can quickly respond to bugs, but also will not affect other business components after construction and release. The whole component library can maintain flexibility and stability

Based on the above features, Lerna + Vue CLI 3.x + Webpack + Babel is used to design the framework of the business component library:

The business component library has the following features in addition to the base component library 2.x features:

  • Webpack configuration is simpler than the base component library (there is no need to unify the special Loader and Plugin Webpack configuration for all components), the ability of each component library to customize the Webpack configuration based on the common configuration (same with Babel)
  • Each business component has an independent development, build and release process under the constraints of Lerna’s uniform specification, which can quickly respond to bugs
  • In the skin,utils,i18nAnd so on naturally become the basic business components, which can be reused by various business components as well as services
  • Versions of all business components are constrained by the overall version of Lerna (does not run out of order with the response Bug fixes)
  • General business components can be compiled or not compiled (for engineering projects using Webpack, compilation is not recommended without special Loader in theory)
  • Does not provide full import capability, does not provideumdAbility to

Bonus note: This on-demand model is best suited to Vue CLI 3.x, for example, business project scaffolding is based on Vue CLI 3.x design, then naturally can be seamless.

UI scaffolding design

Since Vue CLI 3.x provides plug-in development, the framework design based on the business component library removes a set of UI scaffolding to quickly build a new component library. Based on the features of the business component library, the scaffold also has the following features:

  • One-click Build: Quickly build a new UI component library with a single command
  • Plug-in architecture: Custom plug-ins can be extended in addition to the UI plug-ins provided in scaffolding
  • Unified specifications: Unified development, testing, build, and release specifications can be formed under Lerna’s constraints
  • Responsive features: Component library versions can be iterated faster, without the need for an overall build, and can quickly respond to bugs

Of course, there are some flaws in the UI scaffolding design:

  • Increased business development costs (introduced on demand)
  • No UMD module (for Webpack project)
  • Business project based on Vue CLI 3.x (on this basis can be customized project engineering scaffolding)

The structure of the UI component library generated by the one-click command is roughly as follows:

.├ ── Flag Exercises # Workspaces │ │ ├─ Alert. Vue # Component source │ │ ├─ index.js # NPM import file │ │ ├─ Flag Exercises # Alert └ ─ ─ package. Json # NPM package description file │ ├ ─ ─ BTN # button to Webpack (build) │ │ ├ ─ ─ lib # target file │ │ │ └ ─ ─ lib.com mon. Js # NPM package entry documents │ │ ├ ─ ─ BTN. Vue # component source │ │ ├ ─ ─ index. The js # building entrance file │ │ ├ ─ ─ package. The json # NPM package description file (need development state of the vue cli) │ │ └ ─ ─ vue. Config. Js # build configuration file │ ├─ ├─ enjs # ├─ ├─ mixins # International API │ │ ├─ enjs # English │ │ ├─ ├─ enjs # Chinese │ │ ├─ Mixins # International API │ │ ├─ ├ ─ ─ the SRC # source │ │ ├ ─ ─ index. The js # NPM package entry documents │ │ └ ─ ─ package. The json # NPM package description file │ ├ ─ ─ the theme style # │ │ ├ ─ ─ lib # target file │ │ │ ├ ─ ─ # warning alert. The CSS style │ │ │ ├ ─ ─ BTN. CSS # button style │ │ │ ├ ─ ─ index. The CSS # overall style │ │ │ └ ─ ─ the select. The CSS style # selector │ │ ├ ─ ─ the SRC # source file │ │ │ ├ ─ ─ utils # general method and variable │ │ │ ├ ─ ─ alert. The less # warning style │ │ │ ├ ─ ─ BTN. Less # button style │ │ │ ├ ─ ─ but less overall style # │ │ │ └ ─ ─ Select. Less # selector style │ │ ├ ─ ─ gulpfile. Js # build configuration file │ │ └ ─ ─ package. The json # NPM package description file │ └ ─ ─ means utils # │ ├ ─ ─ lib # Object files (lodash can also be used here, ├─ SRC # ├─ SRC # ├─ ├─ download.config.js # ├─ ├─ public # ├─ SRC # ├─.browserslistrc # UI Framework Target browser Config ├─.cz-config.js # cZ Custom Submission Instructions Config ├─.gitignore # git Ignore Config ├─.lintStageDRC # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lantleclant.json # Lant.json ├── ├─ download.exe # ├─ download.exe # Download.exe # Download.exe # Download.exe # Download.exe # Download.exe # Download.exe # Download.exe # Download.exe # Download.exeCopy the code

Extended friendship: I wrote a special article about UI scaffolding design, focusing on the design principle of Element UI framework and the overall framework design scheme of UI scaffolding. Interested students can check Vue CLI 3 for UI framework design combined with Lerna.

Low Code design

The low code solution was designed in the middle of the year and was primarily driven by business needs (note that technology is driven by business needs, don’t build wheels for nothing). Low code design goes through the following phases (the bold parts are implemented by other colleagues or in collaboration with other colleagues) :

  • Dynamic forms can be validated dynamically (dynamically render form items based on JSON information)
  • Dynamic forms can dynamically send requests (form items can dynamically send request rendering information)
  • Dynamic forms can be dynamically cascaded (dynamically render form items according to the changes of form items, etc.)
  • The Business Component library designs common page layout components based on THE UED specification
  • Ability to precipitate common page templates based on page layout components (UED specification and business feedback)
  • Build a service tool that enables one-click integration of common pages, dependencies, and menu processing into business engineering projects (based on common project scaffolding) to increase business development efficiency
  • Simple dynamic page rendering capabilities based on common page templates (render JSON is not formalized at this point)
  • JSON specification for dynamic rendering (similar to JSON Schema specification)
  • Make a view renderer that can dynamically render pages according to the canonical JSON Schema (including route jumps)

Bonus: At the time, the view renderer didn’t fully think through the logic design and data processing, and of course, the view drag engine needed to be designed later to achieve a visual, low-code design.

In addition to the low code design I participated in, I also deeply learned ali’s low code medium platform products. This experience is deep, and I will not repeat it here because there is no open source.

Desktop development

The desktop was introduced at the end of the year, and the development of the desktop mainly went through the following stages:

  • Understand the existing PC desktop development framework (popular science can be skipped)
  • Optimize the existing CEF development framework for PC desktop
  • Restrict APP development specifications

Existing PC desktop development framework

Personally, the development types of existing PC desktop are mainly divided into the following types:

Desktop client type metaphor features
Native development (C++, Objective-C, C#, Duilib) The car Good performance, small installation package, good XP compatibility, long development cycle, difficult to achieve rapid iteration, cross-platform development difficult
Pure Web development (Node.js, JavaScript) Electric cars Cross-platform, relatively poor performance, high memory footprint
Hybrid development (C++, JavaScript) Petrol-electric hybrid Large installation package, poor performance relative to Native, better than pure Web, complex interface and animation effects, cross-platform, can achieve rapid iteration, open source framework and fast upgrade

The desktop application development framework involving the Web front end is as follows (here is just a simple survey) :

Client development framework type features application
Nw.js Pure Web development High memory usage, XP support, low startup speed, and poor performance DingTalk, Mongo Management Studio, Soundnode
Electron Pure Web development It does not support XP (customized versions of lower versions are acceptable), supports Windows 7 at least (some 2B/2G), and is difficult to integrate with Native UI framework Atom, Visual Studio Code, Skype
Chromium Embedded Framework(CEF) Hybrid development Based on Google Chromium project open source (good compatibility), support XP system, convenient customization and integration of Native UI framework, memory consumption and other good performance DingTalk, Youdao, netease Cloud music, Github

The cost of developing pure Native applications is high, and this kind of development method is usually used for products with high performance requirements. In general, web-only development is cost-effective for most companies in terms of development cost, operating system compatibility, cross-platform capabilities, UI effectiveness, and product iteration speed. Of course, when considering the overall cost performance of products like DingTalk, Hybrid development is a very efficient migration scheme (it can not only improve the product performance, realize the UI Native of part of the high performance requirements, but also carry out the smooth migration of part of the application from Nw.js).

Optimize the EXISTING CEF development framework for PC desktop

The company’s existing desktop applications are designed using CEF multi-container isolation framework, and the general framework is shown as follows:

As you can see from the figure, each application can be understood as a separate SPA application through CEF multi-container isolation (multi-container isolation can be simply understood as a multi-page application). The problem with this framework is as follows:

  • Webpack multi-entry configuration complex (single project structure)
  • Development requires additional configuration (e.g. development startup application filtering, etc.)
  • Constrained by the overall framework, it is difficult for new applications to upgrade new language features (e.g. React)
  • More and more applications, more and more bloated projects, more and more difficult to maintain overall
  • The application does not have its own development specification, which is not conducive to collaborative maintenance
  • Overall builds are slow and prone to build instability (single application updates often require overall builds)

In order to solve the above problems, a new framework design was conceived for desktop development:

  • Webpack single entry configuration (each application generates a new project from the common scaffolding, the new application does not need additional Webpack multi-entry configuration)
  • Add scaffolding and standardize the application (scaffolding is made by colleagues)
  • New app can be upgraded with scaffolding language new features
  • Decouple public services, form independent maintenance system of NPM package, and form development documents to improve development experience (unfinished)
  • Decouple the business component library, form the independent maintenance system of NPM package, and form the development document to improve the development experience (unfinished)
  • The application can be built independently with fast construction speed, high stability in the construction of the whole application package, and local construction ability can be formed (local construction test can be carried out during the test)
  • One-click CLI integration of the entire application package (incomplete)

Note: There are many common services, including Native apis, Native storage, TypeScript common type definitions, and more.

Development specifications for constrained applications

Scaffolding only constrains the technology stack applied (including development, validation, build and test processes, etc.), but also constrains more detailed development specifications within the engineering project to facilitate collaboration and maintenance. Here are the following specification constraints for each application development (2 months of React development experience put forward the specification, please add more if it is not perfect) :

Note: If developed by React Hooks Redux, you can remove the application view/container. Application view/business is divided according to business module (can form a certain commonality is better). The application view/container has a one-to-one relationship with the application view/service. In addition to serving as a controller, the container can communicate with other service modules. The application view/layout can quickly adapt to the changing requirements of application views/service modules and form new layout capabilities. If you are developing with TypeScript, the application view hierarchy is recommended to be tiled. Otherwise, there is redundancy in the declarations passed across layers of Props. (Of course, TypeScript declarations should be inherited by the application view/container, which makes the declarations clearer when passing Props.)

Learning (for newcomers, big guy skip)

2019 learning

For me, the key words of this year’s learning practice are “Vue 2.x and Vue CLI 3.x source code interpretation”, “algorithm learning” and “Relearn React”. The key words of learning cognition are “Graphql & BFF”, “middle stage”, “micro front end” and “Serverless”.

The source code interpretation

Many people may have a misunderstanding of the source code interpretation, their perception is often like this:

  • The source code is so hard to read
  • Read the source code also nothing egg use
  • It doesn’t matter if I’m not a big man
  • Well, if it works, it doesn’t matter, unless you’re interviewing to build a rocket

But here’s what happens when they have a slightly intractable problem:

  • Why is this wrong
  • Why is my code written with performance problems
  • How should this function be done
  • Why can’t I write a decent UI component
  • Page reported a bunch of yellow true fragrance warning but can not read what operation is too show caused

Source code interpretation is of course designed to give you a better understanding of the framework you are using, so that you can quickly locate technical/business problems to solve them efficiently, quickly design feasible solutions to business problems, design common technical solutions, etc. However, source code solutions are often complex and difficult, and my general approach is as follows:

  • According to the error stack information source tracking, the formation of a single point of understanding the ability of the source code (do not always a mistake on the panic, can be based on the wrong stack information than others more than a few steps, calm down to see what is inside the flower). This builds the ability to interpret source code while solving technical or business problems, and often adds up. If the problem happens to be a source code Issue, you can also send an Issue or Pull Request to the official website to feed the framework
  • If you have extra time, look at the framework of the source code (i.e., the source code is made up of several modules) and try to understand the flow of the framework yourself
  • Split modules according to the framework (for example, from the perspective of Vue, including data hijacking, view parsing, Diff updates, etc.), try to understand the framework source code module by module (at this point you can debug the code manually or simulate how to do it yourself. Or if you really don’t know how to read it, try checking out some of the best source analysis blogs.)
  • Form an overall understanding of the framework source code (try writing a simplified framework if you can)

Friendly tips: Here attached is my Vue source code interpretation practice article based on Vue implementation of a simple MVVM and JQuery source analysis (JQuery) Source code analysis is my internship reference “sharp jQuery”/” jQuery Technical Insider “/” JavaScript Advanced Programming “/” JavaScript authority Guide “line by line of code debugging and annotation interpretation, adding a lot of understanding of the basic knowledge of JavaScript. At that time, there was a lot of time. It was a stupid, boring, inefficient thing that needed patience and persistence. It probably took several months.

Learning algorithm

Algorithmic learning came out of the interview. At that time, I was stuck on the ground by the algorithm in an excellent interview, so I decided to re-learn the algorithm. I-algorithms is a tutorial on how to use javascript Algorithms based on Javascript-Algorithm/CLRS. Of course, this part was put down halfway, because there was no time to…… after re-entry However, AFTER I adapt to the work in Ali, I will pick up this piece again. Interested students can check, the current learning content is as follows:

Chapter one: Algorithm basis

  • Insertion sort
  • Insert sort problem
  • Analysis of algorithm
  • Analyze the algorithm problem
  • Merge sort
  • Merge sort problem

Chapter two: The growth of functions

  • Gradual tag
  • Problem with progressive notation
  • Commonly used functions
  • Common functions

If you’re interested, you can check out i-Algorithms, which is the Github repository for learning Algorithms. You can also check out i-Algorithms, the documentation’s online learning address.

To regain the React

There is not much room for comment. I did React SSR during my internship in 2016 (I could not write a line of JQuery at that time). Since I was engaged in embedded development before, it was not difficult to transfer to React. I reviewed the official website and recalled React. Create React App (Vue CLI 3.x plugin)

  • Creating an application
  • Settings editor
  • Integrated development tool
  • The style is set
  • Component into
  • React Hook Redux with Rxjs, Immutabilit-Helper, and Middleware
  • React Debugging tool

Here’s what fell by the wayside

  • Routing solution (half done)
  • The React of grammar
  • React Static
  • React Next

Then, when I met some interviewees who changed from Vue to React or both, I would often ask them their opinions on the two frameworks. In fact, such questions often just want to hear their understanding. So for me, React versus Vue:

  • The difference between manual and automatic transmission in cars (manual is more dangerous to drive, automatic is more gas guzzler)
  • React does have more friendly TypeScript support than Vue (version 2.x)
  • React really tests the coding skills of developers
  • The React framework itself is actually cheaper to learn and the framework syntax is more stable (if you don’t count the surrounding ecosystem)

Note: For Vue developers who want to get a taste of React, check out my React-Tutorial Tutorial on the warehouse.

How did I learn the front end

In view of a lot of my digger friends are frequently asked how the front end should learn, I here will be additional learning front end methods listed, for digger friends reference. My learning methods can be roughly divided into the following processes:

  • books
  • notes
  • Documentation (English)
  • blog

Friendly hint: clumsy birds fly first.

books

If you want to systematically learn a major, you must settle down and spend time systematically learning any basic knowledge related to this major. Books are of course the best way. Here I list the books I have studied before, as shown in the picture below:

A word of warning: reading is time consuming, and if you’re feeling overwhelmed by it, I think watching a video is a good idea. If you settle down to reading, then read a few books that you lack. Of course, in addition to some technical books, we should also pay attention to reading books that can improve our thinking (xin Kui formed a good habit of reading literary works when I was young).

notes

A good memory is of course better than a bad pen. Some books become difficult to understand as you read, or forget as you read. The dumbest but most effective way to do this is to take notes while reading. The process of recording and practicing can help you understand the book on the one hand, on the other hand, of course, it can help you quickly recall the general content of the book later (especially useful before the interview), so as to get rid of the book and extract the essence. Here I will sort out my previous notes for your reference:

  • JQuery 2.0.3 Source Code Analysis Notes – reference “Sharp jQuery”/” jQuery Technical Insider “/” JavaScript Advanced Programming “/” JavaScript Authority guide”
  • ES6 Study Notes – See Introduction to ES6 Standards
  • Design Patterns – Refer to two JavaScript Design Patterns books
  • JS Classes and Inheritance – See Introduction to ES6 Standards/JavaScript Advanced Programming/The Definitive guide to JavaScript
  • How to make JS run better – see High Performance JavaScript
  • Introduction to Algorithms and javascript Implementation — Refer to “Introduction to Algorithms”/” javascript Description of Data Structures and Algorithms “/ javascript-Algorithms/CLRS –
  • Data Structures and Algorithms – See JavaScript Description of Data Structures and Algorithms
  • Definitive GUIDE to CSS – Refer to the Definitive Guide to CSS
  • CSS World – Refer to CSS World/The Definitive GUIDE to CSS
  • CSS Mastery – See CSS Mastery: Advanced WEB Tagging Solutions
  • HTTP Protocol Analysis – see Diagram HTTP
  • Regular Expressions – See Mastering Regular Expressions – [in progress]

The following are early notes (very Low Word document), but there are hundreds of pages of tens of thousands of words of the kind (now I look at myself quite admired), at that time I did not know the MD format:

  • Advanced JavaScript Programming – See Advanced JavaScript Programming
  • The JavaScript Authority Guide – See the JavaScript Authority Guide

Friendship Extension: Ziyi2 /awesome-front-end is a self-organized hodgepodge of notes, books, and blogs, along with bookmarks I’ve been saving for years (updated periodically).

Documentation (English)

The document section focuses on reading and writing skills:

Reading: The emphasis here is on developing your ability to read documents in English (try to read official documents unless you have difficulty understanding what the documents say). If you find it hard to read, there are some Chrome Translate plug-ins (such as Google Translate). It is usually necessary to read some official documents when researching some new technologies (most of these documents are in English, and English documents are generally updated faster than Chinese documents), so reading English documents is a very important ability. Writing: The ability to write documents is a very, very, very important ability that can significantly reduce design and communication costs (forgetting/repeating instructions, etc.). Of course, writing standards are also very important. You can refer to the official writing style of some open source works, as well as some specific writing standards (such as Ruan Yifeng’s Chinese technical document writing standards). Of course, it’s important to get in the habit of being up to date with your documentation. Otherwise, outdated content can lead to increased design and communication costs.

Friendship extension: If the company can use language, it is a good choice to recommend language as a technical documentation product. If you cannot use external products, you can set up a document preview site by yourself, for example, using VuePress/React Static.

blog

Writing technical blog is a real habit of this year, although I used to have a blog site www.ziyi2.cn, but in fact, more is to record some study notes or life. I started using Issue writing technology blog on Github this year (I used to think I had to have my own domain site and the website should be cool, but now I really think it should be easy to use and down-to-earth, no fancy stuff) :

The great thing about using Github to record your blog is that you can relate issues to three coti parties, you can relate issues to each other, and you can comment and close issues in real time. Of course there is more to the gameplay (such as generating static sites based on Issues, etc.), but for me that’s all I need.

Most of the posts in the screenshot above are all the blog posts I have produced this year (only one post was published on the company’s internal site after changing company in the second half of the year). If you are interested in some of these posts, please check out Ziyi2 Github Issues.

The squalid

job-hopping

Actually originally did not want to move this year, just think that next year will work for three years, three years of experience is better in work, and do you want to change the company closer to home, ali became a primary goal, of course), can try water first came out this year, and see if it is from the Internet company to Internet companies will be hard. The result accidentally on the surface, the final walk is also in a hurry. Of course, it’s nice to get two salary increases from the beginning of the year to the end of the year. Maybe we’ll never get such a big increase again.

PPT

In the past, those who wrote codes were not as good as those who wrote PPT did not have much physical sense, because the former company did not need to do any PPT, and the only PPT I did was not to report to the superiors, but to share technology with other BU, even if it was for promotion. After coming to Ali, I found that writing a GOOD PPT does require technical content, and of course, speaking PPT requires more technical content (how to maximize your work results within a limited time).

movement

In the first half of this year, from April to August, if there is no rain, I insist on running to the company from where I live every day. However, after I came to Ali, I broke the habit of working and rest for two years and could no longer get up at 7:30 or arrive at the company to study an extra hour (all the time for studying was squeezed out). I hope that the follow-up can slowly adjust back!

recruitment

After coming to Ali, many places are still very different from the original company. For example, more freedom (no need to clock in and out, if you work late, you can come to the company…… at noon the next day) , more busy (various commenting, weeks, two weeks, and months, etc.), more independent, many business people to rush but nobody tube, you need to pay for your business, is a “bottom-up” mode rather than a top-down model), the more the surface (interagency collaboration, mobile office, technical training, cultural training, etc.). I feel good because I’m not just writing code. On top of that, my colleagues are amazing, and if you have a problem that you can’t solve, you almost always have a solution in your head.

Said so much of course, I hope everyone can apply, because there is a real shortage of people. Of course, in order to make you more familiar with our recruitment process, I will briefly talk about my feelings as an interviewer from the following three aspects:

  • The resume assessment
  • The interview process
  • The follow-up process

The resume assessment

Evaluating the resume is the first step in the hiring process. If the resume is not evaluated properly, there will be no subsequent interview. Many of my diggers will ask me to help check whether the resume is reasonable (often these diggers are not confident about themselves), in fact, the resume is mostly determined by your study and work experience, there is no reasonable or unreasonable statement, only the right or not suitable for the position. Of course, I will do the first screening for many resumes (this is not the way I think resumes should be evaluated) :

  • At least 3 years working experience
  • The technology stack conforms to the BU service scenario
  • The technology stack is rich and deep
  • Technological innovation/Pratt & Whitney capability
  • The business is complex and demonstrates responsibility/initiative
  • Ability to lead a team
  • Open Source Project Experience

The evaluation of the above is my side as the interviewer, this is a very real problem, some measures are afraid of the cause of many dug friend adverse reactions, not listed one), because it is hard to choose from a pile of resumes to precise out an appropriate resume (in fact, most resumes are the same, because everyone in the form of writing a resume really) about, So you have to have a basic set of assessment methods. Of course, if the above information is not screened, I will conduct secondary screening from the following information:

  • 2 years working experience in technical stack depth
  • Technology benefits
  • Business shows initiative/thinking
  • Experience in business performance optimization

There are also some hard filters:

  • Frequent job changes (will be positioned as having no business/skill base)
  • A sloppy resume (poorly typesetted/typos)
  • Professional skills are all basic skills (good at DIV + CSS layout, good at HTML/CSS/JAVASCRIPT, knowledge of closures/prototype chains /…)

Friendship extension: be sure to watch professional skills, write the interviewer a look of avoid by all means is not interested in skills (written you will feel a lot of basic skills, the more the better, but everyone, even a little an in-depth inquiry you will wonder if he was really, it is better to don’t write), a lot of information you can indirectly revealed in the project experience. If you want to know more about how to write a resume, you can check out my other article interview sharing: Two years of work experience successful interview ali P6 Summary/resume.

The interview process

At present, the interview environment in China is really bad. I remember that someone commented in a community that if the author of Redux came to interview with a third-tier or fourth-tier company in China, he might not be able to pass the interview. Here I would like to talk about my opinion about the interview. I would like to say that the interview is not to embarrass you, nor to show how awesome the interviewer is, but to explore your ability and potential. Of course, every interviewer’s interview style is not the same, everyone do not ask me whether the next side will ask XXX questions, the next side will have online written test and so on, I am not the next interviewer. Interview styles must be different for every person, BU, company, country, planet, and galaxy. . In a word, be yourself, be irreplaceable, don’t make yourself too passive, well prepared for whatever may happen.

Since I just entered the company, I will generally undertake one side of the interviewer, then my interview style is like this:

  • Prepare 8 interview questions based on your resume in advance.
  • 8 questions involve at least CSS/JavaScript/business
  • Vertical will ask some relatively in-depth basic technical knowledge
  • Vertical may ask some macro level of technical knowledge (according to the satisfaction of the interviewee’s answer to consider whether to ask)
  • The horizontal focus is on business thinking
  • Interviewers are not likely to ask additional questions if they have questions (depending on the duration of the interview)
  • If the answer is ok, I will give a written test at the end (although I personally hate writing test).

Tip: I like to do in-depth interviews based on your resume, but it’s really more about breadth, not just what you already have in your resume.

Here are some tips for the interview process:

  • Keep your mind calm and assume that it’s normal for you not to answer the first question. The interviewer won’t PASS you just because you don’t know the first question
  • Do not guess the question, often the interviewer for you to dig a pit is to hope you jump into the fire, be sure to answer do not know
  • Don’t talk too much about anything that’s not relevant to the question at hand, and just answer as many questions as you can
  • If you don’t understand the question, try asking the interviewer if you want to ask about XXX
  • Be sure to refine some of these questions in advance (such as scope chains, inheritance and prototype chains, which I almost never ask)
  • If the interviewer is asking you about a technology that you have used in some situations or seen used in others, explain it in context of those situations (let the interviewer know that you not only understand it, but that you can use it well)
  • If it is Vue technology stack hope can in-depth understanding of the source code
  • One of the most important questions to prepare before the interview is what you think you are good at (because it’s possible that the interviewer was overwhelmed by the interview and is trying to dig deeper into you, which is often a lifesaver)
  • Be sincere and don’t cut corners
  • Be humble when interviewing
  • Don’t be long-winded, don’t be long-winded, don’t be long-winded (This is one of the most frequently asked questions I get in interviews, and people are terrified that they won’t think they can answer anything. But if the interviewer interrupts your conversation, this question is more serious than if you don’t know, because the interviewer didn’t get the answer he was looking for and has exhausted his patience.)

For me, the factors that affect the interview are generally as follows:

  • You can answer more than half of the interview questions, two or three of them as expected, and one of them really stands out
  • You were able to answer most of the questions with some information, although not quite as expected
  • Your answer was very efficient
  • Your answer makes me feel that you are very active
  • Your answer makes me feel bad about yourself, but you can tell me why
  • Your answer makes me feel comfortable (what do you mean comfortable, don’t ask why, I will not analyze myself, like looking for a girlfriend)
  • The pen test is just a simple reference, it is not the decisive factor that influences you too much
  • You are really good at some technical aspects that I am not good at, but you are really not good at my side of the answer, I will pass on to the next side to continue to dig

The follow-up process

If you pass one, then there’s basically a base round, a Leader round, a big Leader round, and an HR round. So overall, it should be about five.

The Denver nuggets

I’m a lazy socialite who joined the Nuggets in January hoping to stay up to date with the community and not be swept away by interview messages. But after joining the Nuggets, I found that my original intention gradually changed, and the Nuggets had some unexpected effects on me (both in life and work) :

  • Read popular articles frequently
  • Will often brush hot boiling point, and see interesting or closely related information will take the initiative to occupy the pit
  • I often search popular science articles
  • Collect articles and organize them

Bonus: You might brush the boiling point first thing in the morning, or you might just get out of bed. The first thing you do on the toilet is brush the boiling point, or brush the headlines. While traveling on the subway, it could be reading popular articles or listening to music. I’m sure you brush the boiling point for lunch. Before you go to bed at night, it could be boiling point, it could be Tiktok, it could be Moments.

Therefore, after holding back for a long time and gathering up courage, I published my first technical article Vue CLI 3 for UI framework design in combination with Lerna, which gained some praise, but was not as good as EXPECTED. However, all things are difficult before they begin. As long as you insist, you can slowly bring more benefits to your articles.

This year, I have sent 4 technical articles and 1 interview article in Nuggets, among which I think the best article to write is based on Vue to achieve a simple MVVM with the least number of likes. On the contrary, I don’t have so much attention to the interview article interview sharing: two years of work experience successful interview ali P6 summary but high number of likes. From this we can guess that we may not like both wordy and mental consumption of the article, we like both concise and popular science and do not consume patience of the article (a little story feeling).

I personally like to write long, long-winded articles with no (1), (2), (3) points (the kind that really requires patience), and in fact I always want to be careful and specific about what I know, even if it could be more concise. Of course, writing any article should be careful and responsible for the reading time of readers (I will revise and revise and revise and revise until I am satisfied).

In the Denver nuggets in the first year of harvest a lot of fans, there are a lot of digging friends add me communication, but perhaps my ability of communication and social skills really lacking, in some cases because the job is busy, or be the same problem can lead to problems, I don’t have the patience to answer to dig the friends hope in this long and boring article bring some some harvest.

Additional links

Here I recommend reading the previous article (the first 2 practical type, the latter 3 should be helpful for the interview, especially the latter 3 must read oh) :

  • Vue CLI 3 combines Lerna to design UI framework
  • Git commit specification
  • Do you really understand$nextTick 么
  • Based on Vue to achieve a simple MVVM
  • Interview sharing: two years of work experience successful interview Ali P6 summary