Self-checklist for a [qualified] front-end engineer

Front-end development is a very special industry, its history is actually not very long, but the complexity of the knowledge and the speed of technology iteration is not comparable to other technologies.

winter Mentioned in his Relearning the Front End course:

By now, front-end engineers have become one of the important positions in the R&D system. However, in contrast, I found that very few or almost no university computer science majors are willing to offer front-end courses, and even less systematic teaching programs have emerged. Most of the front-end engineers’ knowledge, in fact, comes from practice and work in the fragmented learning.

This is a very real status quo, in fact, many front-end developers are self-study or even switch over, front-end entry is simple to learn a few API after starting to do the project is also very simple, but this often becomes a bottleneck to limit their own development.

Just stay in the will use the stage is not enough, we also need to continue to explore and in-depth. Now there is no lack of learning tutorials on the market, technical articles, if blindly learning you will find that you have seen after the knowledge retention rate will be very low, and found that there is no understanding of the knowledge more and more, which will make people anxious.

In fact, in addition to a strong self-drive to persist in your studies, you need a very simple way to learn. That is: building your own knowledge system. It will help you learn more systematically, and at the same time you will always be able to know where you are lacking.

I will summarize all the knowledge I have been exposed to in my work and studies into my body of knowledge, which includes not only what I have already learned, but also a lot of what I haven’t had the time to learn.

It’s not just my body of knowledge, it’s a self-check list that I always remind myself of.

Below I will share my self-check list with you, you can follow the knowledge on the list to detect what deficiencies and enhancements you still have, I also recommend that you build your own knowledge system so that when working or studying or even interviewing, you can quickly locate the points in the list of knowledge, if you have any points that I did not categorize, feel free to let me know in the comment section.

I. JavaScript Basics

Front-end engineers eat guys, depth, breadth can not be as bad.

Variables and types

1. JavaScript specifies several language types.
2. JavaScript What is the underlying data structure of the object
3. Symbol type in the actual development of the application, can manually realize a simple Symbol
4. Specific form of storage of variables in memory in JavaScript
5. The built-in objects corresponding to basic types, and the boxing and unboxing operations between them
6. Understanding value types and reference types
7. Difference between null and undefined
8. can name at least three ways of determining JavaScript data types, and their advantages and disadvantages, how to accurately determine the type of array
9. Scenarios in which implicit type conversions may occur and the principles of conversion, how they should be avoided or skillfully applied
10. Reasons for loss of precision in decimals, JavaScript Maximum number of digits that can be stored, maximum safe number, JavaScript Ways to handle large numbers, ways to avoid loss of precision

Prototypes and prototype chains

1. Understand the prototype design pattern and the prototype rules in JavaScript
2. The underlying implementation principle of instanceof to manually implement a instanceof
4. Several ways to implement inheritance and their advantages and disadvantages
5. name at least one case where prototypical inheritance has been applied in an open source project (e.g. Node )
6. You can describe new the detailed process of an object, manually implementing a new operator
7. understand the underlying implementation principles of es6 class constructs as well as inheritance

Scopes and Closures

1. Understanding lexical scoping and dynamic scoping
2. understand the scope and scope chain of JavaScript
3. Understand the execution context stack of JavaScript , you can apply the stack information to quickly locate the problem
4. The rationale behind this and the values used in several different usage scenarios.
5. The principle of implementation and role of closures, you can list several practical applications of closures in development
6. understand the principles of stack overflow and memory leaks and how to prevent them
7. How to deal with asynchronous operation of the loop
8. Understand the practical problems solved by modularization, can list several modular solutions and understand the principles thereof

Implementation mechanisms

1. Why try put return inside finally will still be executed, and understand its internal mechanism.
2. JavaScript How asynchronous programming is implemented can be described in detail EventLoop Mechanisms
3. What are the macros and microtasks?
4. Can quickly analyze a complex asynchronous nested logic, and master analysis methods
5. Use Promise to implement serial
6. Differences between Node and the browser EventLoop
7. How to ensure that the page runs smoothly in the case of handling large amounts of data

Syntax and API

1. Understand the relationship between ECMAScript and JavaScript
2. Proficiency in the use of grammatical specifications provided by es5 and es6 .
3. Proficiency in global objects (e.g., Date , Math ), global functions (e.g., decodeURI , isNaN ), and global properties (e.g., Infinity , undefined ) provided by JavaScript .
4. Skillfully apply higher-order functions such as map , reduce and filter to solve problems.
5. setInterval Points to note, implemented using settimeout setInterval
6. JavaScript provides regular expressions API , which can be used to solve common problems (mailbox checking, URL parsing, de-duplication, etc.)
7. JavaScript Exception Handling Approach, Harmonized Exception Handling Scheme

II. HTML and CSS

HTML

1. Understand HTML from a normative perspective and use labels from a categorical and semantic perspective
2. Default styles of commonly used page tags, self-contained attributes, differences between different browsers, ways to deal with browser compatibility issues
3. The purpose of using and configuring the meta-information class tags ( head , title , meta ).
4. HTML5 Offline Caching Principles
5. You can use Canvas API , SVG and so on to draw high-performance animation.

CSS

1. CSS box model, differences in different browsers
2. CSS All selectors and their priority, usage scenarios, which can be inherited, how to apply at rules
3. CSS What are pseudo-classes and pseudo-elements, their differences and their practical applications?
4. HTML Typographic rules for document flow, CSS Rules for several types of positioning, positioning references, impact on document flow, how to choose the best positioning method, the principle of Sprite implementation
5. Horizontal and vertical centering solutions, you can achieve 6 more than one and compare their advantages and disadvantages
6. BFC Implementation rationale, problems that can be solved, how to create BFC
7. CSS function can be used to reuse the code, to achieve special effects
8. The similarities and differences between PostCSS , Sass , and Less , as well as the configurations for their use, and at least one of them.
9. CSS modularization scheme, how to configure on-demand loading, how to prevent CSS blocking rendering
10. Skillfully use CSS to realize common animations, such as gradient, movement, rotation, scaling, etc.
11. CSS Browser compatibility is written to understand the compatibility of different API under different browsers
12. Master a complete set of responsive layout program

1. Handwritten picture waterfall effect
2. Use CSS to draw geometric shapes (circles, triangles, sectors, rhombuses, etc.)
3. Use pure CSS to realize curved movements (Bezier curves)
4. to realize the common layout (three columns, the Holy Grail, double wings, ceiling), but to name a variety of ways and understand their advantages and disadvantages

III. Computer fundamentals

On the principle of compilation, do not need to understand very deeply, but the most basic principles and concepts must be understood, which is very important for learning a programming language!

Compilation Principles

1. understand what code really is and how computers convert code into a target program that can be run
2. regular expression matching principle and performance optimization
3. How to parse JavaScript code into an abstract syntax tree ( AST )
4. base64 coding principles
5. Calculation of the interconversion of the several alphabets, how they are represented and converted in JavaScript

network protocol

1. understand what a protocol is, understand TCP/IP the components of the network protocol family, and the role each layer plays in an application program
2. Detailed principles of three handshakes and four waves, why use this mechanism
3. what protocols are reliable, TCP what means are available to ensure reliable delivery
4. The role of DNS , the detailed process of parsing at DNS , and the optimization principle at DNS .
5. Role and rationale of CDN
6. HTTP specific components of the request and response messages, to be able to understand the meaning of common request headers, how there are several types of requests and what the differences are
7. HTTP the specific meaning of all status codes, see the abnormal status code can quickly locate the problem
8. Changes brought about by HTTP1.1 , HTTP2.0
9. HTTPS encryption principle, how to turn on HTTPS , how to hijack HTTPS request
10. Understand the underlying principles of the WebSocket protocol and the difference between HTTP and .

design pattern

1. Skillful use of common front-end design patterns to write code, such as singleton pattern, decorator pattern, proxy pattern, etc.
2. The similarities and differences between the publish-subscribe pattern and the observer pattern, as well as practical applications
3. can name several design patterns in the development of practical applications, understanding of the framework source code on the application of design patterns

IV. Data structures and algorithms

Most front-ends I know are somewhat lacking or even resistant to this part of knowledge, but it’s essential if breaking through to higher ceilings, and from my own experience – very useful!

JavaScript coding skills

1. A variety of ways to achieve array weight removal, flattening, comparing advantages and disadvantages
2. A variety of ways to achieve deep copy, compare the advantages and disadvantages of
3. handwriting function Collierization tool function, and understand its application scenarios and advantages
4. Handwriting anti-shake and throttling tool functions, and understand their internal principles and application scenarios
5. Implement a sleep function

Manual realization of front end wheels

1. Manual realization call、apply、bind
2. Manual realization of Promise that conforms to the Promise/A+ specification, manual realization of the async await
3. handwrite a EventEmitter to realize the event publish, subscribe
4. Can name two solutions to achieve two-way binding, can be realized manually
5. Handwritten JSON.stringify , JSON.parse
6. Handwrite a template engine and be able to explain its principles
7. Handwriting , other effects

data structure

1. understand the characteristics of common data structures and their advantages and disadvantages when used in different scenarios
2. Understand the storage principles , and skillfully apply them to solve problems.
3. understand the basic structure and characteristics of and can apply it to solve problems
4. Understand the basic structure and usage scenarios of .

1. Can calculate the time complexity and space complexity of an algorithm, and can estimate the time consumption and memory consumption of business logic code
2. Understand the implementation principles, application scenarios, advantages and disadvantages of at least five sorting algorithms, and can quickly state the time and space complexity.
3. Understand the advantages and disadvantages of recursion and loops, application scenarios, and can be skillfully applied in development.
4. etc. can be applied to solve complex problems.
5. Algorithmic solutions for front-end processing of massive data

V. Operating environment

We need to sort out the relationship between language and environment:

ECMAScript Describes the syntax and basic object specification of the JavaScript language

The browser serves as a kind of runtime environment for JavaScript , providing it with: the document object model ( DOM ), which describes the methods and interfaces for processing the content of web pages, and the browser object model ( BOM ), which describes the methods and interfaces for interacting with the browser.

Node is also a kind of runtime environment for JavaScript , providing it with the ability to manipulate I/O , the network, and so on. API

Browser API

1. Browsers provide W3C compliant DOM operations API , browser differences, compatibility
2. The browser object model provided by the browser ( BOM ) provides all the global API , browser differences, compatibility
3. Large number of DOM operations, performance optimization of large amounts of data (merge operations, Diff , requestAnimationFrame , etc.)
4. Browser mass data storage, operation performance optimization
5. DOM Specific implementation mechanism of event flow, differences between different browsers, event proxies
6. front-end initiation of network requests in several ways and its underlying implementation, can be handwritten native ajax , fetch , can be skilled in the use of third-party libraries
7. Browser homology policy, how to avoid homology policy, the similarities and differences of several ways and how to choose the type of
8. Several storage mechanisms provided by the browser, advantages and disadvantages, the right choice in development
9. Browser cross-tab communication

Browser Principles

1. JavaScript engine used by each browser and their similarities and differences, how to differentiate in the code
2. request data to the end of the request with the server to carry out a number of interactions
3. Can describe in detail the process of the browser from the input URL to the page display in detail
4. The principle of browser parsing HTML code, and the process of building DOM tree
5. How browsers parse CSS rules and apply them to the DOM tree
6. How the browser draws the parsed DOM tree with the style
7. Browser operation mechanism, how to configure the resource asynchronous synchronous loading
8. The underlying principles of browser reflow and redraw, the causes, and how to effectively avoid them
9. Browser’s garbage collection mechanism, how to avoid memory leaks
10. Caching schemes used by browsers, how to choose and control the appropriate caching scheme

Node

1. Understand the role of Node in the application, you can use Node to build the front-end running environment, use Node to manipulate the file, manipulate the database and so on.
2. Knowledge of a Node development framework, such as Express , Express and the difference between Koa .
3. Proficiently use API provided by Node , such as Path , Http , Child Process , etc. and understand its realization principle.
4. Node ‘s underlying operational principles, similarities and differences with browsers.
5. Node Principles of implementation of event-driven, non-blocking mechanisms

VI. Frameworks and libraries

Wheels come and go, it’s only right to understand them in principle

TypeScript

1. Understand object-oriented concepts such as , and the implementation of object-oriented concepts at TypeScript .
2. Understand the benefits of using TypeScript and master the basic syntax of TypeScript .
3. TypeScript Rule Detection Principles
4. You can use TypeScript for development in frameworks such as React and Vue .

React

1. Differences between React and vue options and advantages and disadvantages, core architecture
2. The implementation mechanism of setState in React , how to manage status effectively
3. The underlying implementation mechanism for events at React
4. Virtual React Internal implementation of the DOM and Diff algorithms
5. Fiber of React works, what problem it solves
6. Underlying implementation of React Router and Vue Router , dynamic loading implementation
7. Skilled in applying React API , life cycle, etc., and can apply HOC , render props , Hooks and other advanced usage to solve problems.
8. Based on the features and principles of React , you can manually implement a simple React

Vue

1. Proficiency in the use of Vue API , life cycle, hook functions
2. MVVM framework design concept
3. Vue Principles of two-way binding implementation, Diff Internal implementation of the algorithm
4. Event mechanism at Vue
5. Mechanism for converting from template to the real DOM .

multiterminal development

1. the principle and advantages and disadvantages of single-page applications ( SPA ), to master a rapid development SPA program
2. Understand the principles and usage of Viewport , em , rem , the difference between resolution, px , ppi , dpi , dp and its practical application.
3. Mobile page adaptation solutions, different models adaptation program
4.Master a JavaScript mobile client development technology, such as React Native : can build React Native development environment, skillful development, can understand the operation principle of React Native , different end adaptation
5. Master a JavaScript PC client development technology, such as Electron : can set up Electron development environment, skillful development, can understand the operation principle of Electron .
6. master a small program development framework or native small program development
7. Understand the internal implementation principles of multi-terminal frameworks, and understand the use of at least one multi-terminal framework

Data flow management

1. master React and Vue traditional cross-component communication schemes, comparing the similarities and differences in the adoption of data flow management frameworks
2.Proficiency in using Redux to manage data flow, and understand its implementation principles, middleware implementation principles
3. Proficiency in using Mobx to manage data streams, and understanding of its implementation principles and advantages over Redux .
4. Proficient in using Vuex to manage data flow and understand its implementation principles
5. The similarities and differences, advantages and disadvantages of the above data flow schemes, and the selection of technologies in different cases.

1. Master at least one UI component framework, such as antd design , and understand its design concepts, underlying implementation.
2. master a charting framework, such as Echart , understand its design concept, the underlying implementation, can realize their own charts
3. Master a GIS development framework, such as Baidu Maps. API
4. Master a visual development framework, such as Three.js , D3
5. tool function libraries, such as lodash , underscore , moment , etc., to understand the use of tool classes or tool function specific implementation principles

Development and debugging

1. Proficiency in the use of debugging tools provided by the browser
2. Skilled use of a proxy tool to realize the request proxy, packet capture, such as charls
3. can use Android , IOS simulator for debugging, and master a real machine debugging program
4. Understand the use of framework debugging tools such as Vue and React .

VII. Front-end engineering

Front-end engineering: engineering methods and tools to improve development productivity and reduce maintenance difficulties

Project construction

1. Understand the principle of npm and yarn dependency package management, and the difference between the two.
2. You can use npm to run customized scripts
3. understand the role of tools such as Babel , ESLint , webpack in the project
4. ESLint Rule Detection Principles, Common ESLint Configurations
5. Babel core principles, you can write your own Babel plugin
6. You can configure a front-end code compatibility scheme, such as Polyfill
7. Webpack compilation principle, build process, hot update principle, the difference between chunk , bundle and module and their applications.
8. Can skillfully configure the existing loaders and plugins to solve problems, can write their own loaders and plugins

nginx

1. Characteristics and examples of forward and reverse proxies
2. A simple nginx server can be built manually,
3. Skillfully apply the commonly used nginx built-in variables, and master the writing of commonly used matching rules
4. You can use nginx to implement request filtering, configure gzip , load balancing, etc., and can explain its internal principle.

Speed up development

1. Proficiency in the use of an interface management, interface mock tool, such as the yapi
2. Master an efficient log burying program, can quickly use log query tool to locate online problems.
3. Understand the TDD and BDD patterns and use at least one front-end unit testing framework.

version control

1. Understand the core principle of Git , its workflow, and the difference between SVN and .
2. Proficiency in the use of conventional Git commands, git rebase , git stash and other advanced commands.
3. Can quickly solve ,and other complex issues

continuous integration

1. understand the significance of CI/CD technology and be proficient in the use of at least one CI/CD tool such as Jenkins
2. Can alone complete the architectural design, technology selection, environment setup, the whole process of development, deployment of a complete set of development processes (including Web applications, mobile client applications, PC client applications, small programs, H5 , etc.)

viii. projects and operations

back-end skill

1. Understand how the back-end is developed, its role in the application, and use at least one back-end language
2. grasp how the data is ultimately stored in the database on the ground, can see and understand the table structure design, the association between the table, at least one kind of database will be used

performance optimization

1. Understand front-end performance metrics, performance monitoring points, master a front-end performance monitoring program
2. Understand the common Web , App performance optimization solutions
3. SEO Ranking rules, SEO Optimization schemes, front-end and back-end separation of the SEO
4. SSR Implementation options, their advantages and disadvantages, and their performance optimization.
5. Performance Optimization Program at Webpack
6. Canvas Performance Optimization Program
7. Performance optimization schemes for the use of frameworks such as React , Vue , etc.

Front-end security

1. XSS principle, classification, specific cases of attacks, how the front-end defense
2. CSRF principle of the attack, specific cases, how the front-end defense
3. HTTP Principles of hijacking, page hijacking, defensive measures

Business related

1.Can understand the overall business form, business objectives, business structure of the developed project, and can quickly locate online business problems.
2. Understand the overall technical architecture of the project, be able to quickly read the development plan according to new requirements, and be able to quickly locate and solve online technical problems based on business alarms, online logs, etc.
3. Can put their ideas or new technologies into practice in the business on the ground, try to have a certain irreplaceability in the team

IX. Learning Enhancement

1. Have your own technical blog, or have your own column on some blogging platforms
2. Regularly summarize your knowledge and continuously improve your knowledge system.
3. Try to convert their knowledge into real outputs, not just at the level of written understanding, but more importantly, practical applications
4. Stick to the code that outputs 自己 and don’t blindly dive into the corporate industry

X. Beyond technology

This part is probably more important than the nine above combined!

1. Understand the terminology of Internet personnel: CEO , CTO , COO , CFO , PM , QA , UI , FE , DEV , DBA , OPS , etc.
2. Understand Internet industry terms: B2B , B2C , C2C , O2O , etc.
3. Mastering the Internet industry communication, Q&A, and learning of
4. Have some "PPT" ability
5. Have a certain degree of financial awareness, at least understand the savings, money funds, insurance, index funds, stocks and other basic financial knowledge
6. Acquire methods to maintain health in the face of heavy workload and long-term computer radiation, and establish a correct knowledge system for health maintenance

XI. Recommendations for resources

Having a body of knowledge makes it easy to categorize a technical article when reading it, which is what I’ve always done.

It has been proven that when reading an article or book, purposeful and categorized reading has a much higher retention rate than just “looking around”.

Every time I read a good article or book, I bookmark and categorize it into my body of knowledge.

Here are some articles, blogs or book tutorials, etc. that I think are pretty good to share, not a lot of resources, but they’re all good.

Learning a knowledge, it is best to read the official documents first, all the API roughly skimmed over, and then continue to see the advanced knowledge summarized by the big boys, what is carried over, what is dry, at a glance.