Front end learning roadmap home page
Video version of this article
Hello, I’m, freelance after consulting a lot of classmates I learn programming the confusion on the road, most of them are approach is discursive, so I will clean up their own knowledge system, and make it acceptable to PR, mind maps help you study combing the correct route, reduce programming way of confusion, first introduced the characteristics and using method of the map,
Road map features
The document is built based on Vuepress2, the route map is not static, the map is drawn using fabric.js, and the content of the route can be enriched at any time through PR, automatically deployed through Github Actions, you can visit the Github address in the upper right corner of the home page, or access the modification link at the bottom of each page. Feel free to build this knowledge graph through PR
Programming is a very interesting skill, but many students fail to learn it for the following reasons
One is you in the induction phase too attention to detail, like riding a bicycle is a programming skills, if we just started when I was learning to ride a bike to buy a thick the cycling authoritative guide eating at home, even if you have perseverance, read books and don’t ride a bike, the first thing we need to do is get a bike, master what is the handlebar and pedal, ride a few rounds went up first, This is the best way to get started on cycling. Programming is the same. You need to practice as soon as possible and learn through practice
Introduction of actual combat
HTML is our skeleton in the front end of the world, carrying the display content of the web page, CSS modify HTML style, let the page become beautiful, is to learn the front end of the first to master skills, our purpose of this stage, is to master the way of common layout, and finally can imitate the layout of a website home page even if qualified
HTML+CSS
Javascript
In actual combat
After having the HTML + CSS + Javascript foundation, common page layout and interaction we can achieve, this is the actual combat link after learning the martial arts move, from the development of efficient development environment, to understand the development tools in the actual development, finally to the realization of specific requirements, and even quarrel with the product manager are all need to learn
The interview
The second is the introduction to you later, may be the boss of pua constantly do repetitive work, became the API engineers, lead to many years no growth, especially many students are not trained, haven’t been through a system of computer knowledge by training training, this time we need to learn need to know the solution of a consortium, and catch up with the computer by training, knowledge, If I write a programmer’s fairy novel in the future, the basic knowledge of algorithms, data structures and operating systems are internal forces, and dachang’s solutions are genius skills. These are all necessary for upgrading. We need to learn Typescript, unit testing, component libraries, etc
Practical advanced
Vue or React
Typescript
Typescript brings a type system to Javascript, with smarter hints and a silky development experience. Javascript allows variables to be assigned to any type of value, which makes code more difficult to maintain in larger systems. Typescript is a bit like the Trisomaran, where the type of each variable, The parameter structure of each function is visible to the outside world and is a necessary technique for building large projects and frameworks
Node.js
The birth of Node.js gives the front-end the ability to invade the back end, which is also a sign of the front-end prosperity. Now the front-end is paid so high that it can make trouble with automation tools, develop the Web back end, and build gay businesses based on the back-end capabilities brought by Node. Now the front-end has become inseparable from Node, NPM, Vite, Webpack and Babel are all based on Node, and other programmers have mixed reviews of Node, but don’t delay us from learning Node to raise our salaries
No Node before the front end, as the site is responsible for the decoration, the end cover after good high-rise buildings, we are in charge of the internal hard outfit soft outfit, to improve the user experience, and learned to drive the backend Node like decorating excavator, in addition to transportation speed faster, decorating materials we drivers can also be used to cover the front decorating a building, Although high-rise buildings still need to be done at the back end, but the scene of four or five stories of small buildings and villas (start-up companies), the front end itself from building to decoration, which is the reason for the high wages in the front end these years
Node is not difficult, the syntax is Javascript, the difficulty lies in that we do not have back-end thinking and do not understand the operating system, Node is implemented in the operating system, the file system, network protocol, database and other concepts pure front-end understanding is not much, business needs from the implementation of layout to automation, file read and write, database read and write, etc. Let’s change our mindset and embrace Node
engineering
The whole process from the beginning of writing the first line of code to the launch of the project can be understood as the scope of engineering. The purpose of engineering is to develop the code efficiently. As long as it can improve the development efficiency and project quality, it is good brothers
The first is project initialization, each project has a lot of configuration, Babel, TS, ESLint, JEST, and various internal specifications, it’s really easy to configure each project, make several different templates, the team make a command line like giAO, and when we do giAO init, we choose the technology stack, And go to the corresponding address to the template down on the line, out of the box, carry the bag, VUE-CLI, UMI are very good scaffolding
The next step is the actual code development and tuning. This step is mainly to develop services and tuning. For example, dev-Server can show the code locally, HMR hot update can automatically update the page after writing the code without refreshing, data Mock and proxy can help us debug the back-end interface
In the development process, in order to improve the maintainability of the code, it is necessary to do testing and security, team specification monitoring, unit testing, security are checked in this step, and finally build, WebPack Rollup is an excellent builder, Sass Less is a good CSS builder
In order to keep the environment of the online server consistent, we need Docker. In complex applications, K8S may be needed. After the online application, it is necessary to monitor the online application status to ensure the stability of the service
With the engineering system, the front-end migrant workers are equivalent to the excavator, efficient work necessary
The project architecture
Many students will be asked in the interview: What projects have you done? This may seem like a simple question, but it stumps a lot of candidates, because interviewers don’t want to hear a rundown of your project, they want to hear the highlights. It’s a lot like a blind date. When a woman you’re attracted to asks you about your hobbies, you rack your brains to highlight your strengths and shine. However, if you want to answer this question well, you need to do a lot of extra work on a daily basis.
Fortunately, in the field of front-end, the solutions used by large and small companies are similar. They all use Vue/React. The threshold of the front-end is not as high as that of the back-end
Performance optimization
Algorithms and data structures
Method and the data structure is the process the basic rule of the world, the front-end daily work actually use less than algorithm, algorithm of the internal forces of the world, belongs to the programmer from the utilitarian point of view, even for a big interview, you also need to learn the knowledge of data structures and algorithms, and the algorithm will also help us write better code, and help us deal with more complex scenarios
Front-end framework of development and change in recent years, many architectural changes is the algorithms and data structures, the React of the Fiber core logic in order to solve the problem of tree structure Diff may cause caton, the tree is being converted into a linked list, there are many similar scenes, and you read the Vue, the React when framework source code, There will also be a lot of implementation logic for the algorithm
We learn algorithms from the perspective of engineering implementation, this part of knowledge is difficult to be outdated, the fourth edition of an algorithm is your best algorithm textbook, Leetcode brush 200 questions is the best quantitative index to learn algorithms
Network protocol
Network protocol is before computer chat conversations, tools, like we have to be both learned mandarin people chat, network protocols are layered, we visited a browser page, DNS protocol takes care of the house number to find the domain name address, IP is responsible for find the machine according to the house number, TCP is responsible for the integrity of the data and orderly, HTTP is the protocol of the front-end application layer, responsible for caching and so on
Many students asked me whether I need to learn Rust or not. My unified response was that I should learn Vue, React and algorithm well when my monthly salary was less than 40K. I sorted out hot technologies that novices did not need to follow, so that I could follow them later when my salary was higher
Fourth, it is lonely to study alone and it is difficult to stick to it. We provide Gthub Discussions community where you can ask questions, find teammates, record your study and leave your own journey
Soft skills
The fifth is that you have mastered the skills of giant, don’t worry about work, but will be abducted by technology, and technology into what, always feel to want to know about cycling this entry is very simple, but want to ride to the Olympic Games, and talent and hard work can be, we as a people with expertise, as long as trying to build the country is well done, Career planning is also diverse, we need to pay attention to the training of soft skills at this time ah, negotiation, communication, speech, operation, product, sales are worth learning skills
The so-called soft skills are compared with the hard skills of the code, the reality is far more complex than the code, we have to master the survival skills beyond the code, no coal miners by digging coal and quickly become the coal boss.
First of all, don’t think of code as the only skill a programmer needs to learn. Some skills only need to be learned in a week, but there is a huge difference between being trained and not being trained. Riding a bike is a skill you will never master without learning, but it will take you less than a week to learn
First of all, in the programmer’s profession, we need to maintain the ability to continue learning, learning this ability itself requires training, skill entry to become a master, deliberate practice is + Feynman learning method is the best way to learn, reading, communication and so on is an independent learning skills
Second in addition to technology, we are going to learn workplace to fish in troubled waters or dances with wolves, how to use work faster, how to communicate and leadership, how to communicate across departments, how to find a tutor for advice in the workplace, how do you talk to HR about job-hopping money, in addition to how to work remotely and freelance work, etc., are the necessary professional skills
Technical management is also a career path programmer is very good, how to from the technical transformation of management is also a good topic, we are going to jump out of her from the Angle of the code, to try to lead the whole team to win, as strong-arm reaction yun-long li, marksmanship and art of using saber is not independent regiment best, but can lead the whole independent regiment widely spread-and deeply felt to win, That’s the kind of skill we need to learn, how to plan, how to communicate, how to respond, etc.
Finally, work is for life. We should not neglect the beauty of life, especially the connection with family, for the growth of work
In addition to technical architect road, can turn technical management, also can go to order, to find the IT education, to do open source are good route, career not only growth, although now the domestic Internet environment there are 35 crisis, people constantly seeking advancement to get rid of the anxiety, but I believe one day domestic also can write code for a lifetime, Writing code to generate user value is a great thing in itself
This map each series will be divided into several parts, an introduction to part of the goal is to make the actual product, solution, advanced’s aim is to research companies expand horizons, general skills are all programmers need to master the skills, soft skills, algorithm, data structure, etc., some knowledge I will recommend the high quality of column, I will also offer some paid courses to help you improve your learning efficiency. My main task in the future is to continuously record videos and write tutorials at B station to gradually improve the website, which is also the output of my own technical system
The path to programming is fun, and I hope you find your own path to sustainable career growth
Finally, a long picture. Welcome star
