In the past year, I have been combing the front-end technology based on the existing business and past projects, and finally summarized into a brain map (opened by computer, mobile phone will be garbled), temporarily containing 2199 nodes.
The summary focuses on the fundamental analysis of some technologies, and with a large number of links to annotate the relevant knowledge points. This paper is only a catalogue introduction of the technical system, and finally we need to see the map and corresponding links.
Does not contain applets.
basis
There are two kinds of computer foundation and front-end foundation, which is the key to build the whole technology system.
Computer Fundamentals
Computer composition is concerned with the representation and manipulation of data, as well as the instruction system.
Operating system principles focus on processes and threads.
Understand the basic compilation process, and understand how Babel compiles JS, TS and React, while prettier uses AST as an example.
Computer network is the most front-end subject, first of all, we should have a perceptual understanding of the stratified state of the computer network and the specific operation process, avoid rote memorization. The most important is HTTP protocol, including HTTP1.1,2.0 and 3.0, as well as related HTTPS, TLS and so on.
Data structures are native implementations of existing languages, direct use and secondary encapsulation of existing data types, depending on the problem to be solved. Data structures are based on arrays, which provide the apis needed for stacks and queues, and linked lists, which need to be implemented by themselves. A string is an array of characters. Tree is a linked list with many child nodes, because the tree can be generated recursively, so there are many recursive algorithms involved. The most common tree at work is the DOM tree. A graph is a tree with a ring and is rarely used. Hash tables can use Map and Object directly. The heap is logically based on a full binary tree and uses arrays for storage because heap sorting is better and more common.
The front-end based
The basis of the front end can be regarded as the broad HTML5, in addition to the corresponding specification itself, can also refer to the relevant section of MDN to supplement.
Ecma262, this is the basic js specification, common versions such as es6.
The HTML and DOM specifications, mostly at the WHATWG and partly at the W3C, dictate the use of JS for platforms such as HTML and browsers.
CSS standard, in w3c, because most students use shallow, so do not pay too much attention to.
Basic extension
The previous section was mostly within the specification, and since it was intended for implementers, such as v8 developers, we needed further extensions to make it easier to use.
Ts, because JS lacks a type system, it cannot statically type check, so we can use TS.
The syntax of CSS is very simple, and there is no modular, in order to make better use of CSS, there are a lot of solutions, including the need to further compile into CSS to use SASS and less, give CSS more powerful programming ability, using CSS-in-JS or CSS module, give us modular writing and so on.
Node.js is a host environment for JS to run. In addition to using traditional Web servers, the front end is mainly used for development environment related purposes, such as packaging.
Electron, a cross-platform application development program that combines browser and node.js features, has been developed in this way for applications like vscode and xunlei.
The JS framework, most commonly vue and React, is the most frequently encountered extension that uses declarative writing to synchronize state and UI, as well as state management, route management, SSR and other related libraries.
Tool chain
Compiler, Babel ecology is perfect, SWC is fast, we mainly use the former, we can use the latest version of JS thanks to it.
Version management tools, commonly used including Git and SVN, mainly git, git is a database, provides command line and GUI interaction.
Code specification tools: ESLint controls code quality, prettier standardizes code format, and Git hooks block code that isn’t qualified for code management.
Module packaging tools, as the name suggests, are designed for packaging. They have other functions besides packaging, such as HMR, Tree Shaking, and most commonly webPack. Rollup is often used by library developers, but vitejs is not a package tool. It uses esModule and ESBuild to provide a development environment for rollup.
Task builder tools traditionally include Grunt and gulp, but since we all have NPM installed, most of the operations are handed over to NPM script.
Automated tools, mainly used for deployment, commonly used such as Jenkins.
Unit tests, such as JEST.
Mock tools such as MockJS.
Monitoring tools such as Sentry.
other
These are some of the more systematic techniques, and there are a lot of points to note.
Web performance.
Web security, the front-end focus is XSS and CSRF.
Serverless, mainly used for fass and bass, such as writing some simple interfaces, is cheap and does not require additional operation and maintenance.
Programming paradigm, we are familiar with functional programming and object-oriented, functional programming focuses on the flow of data, the nature of oriented is used to design and expand their own data structure, focusing on data processing.
Browser principles, understanding the main host on which our code runs, can help us better understand the basics and improve performance.
Basic server side, familiar with some back-end language, have a better understanding of JS. Knowledge of Docker, Linux, Nginx, and general databases.
Afterword.
This article, including the brain map link provided at the beginning of this article, will be updated at any time, welcome to follow and exchange.