What-is-fe strives to be a perfect and systematic Web front-end knowledge system in China

preface

A long, long time ago, I wrote an article called “My Summary of the Web Front-end Knowledge System [Welcome to add]” (and it has been republished by many people, including those without my approval). It has been read and liked a lot.

Later, I wrote an article titled “Combing web Front-end Knowledge System” on MOOC, which was also reprinted by the operation staff on Zhihu and wechat public accounts, with a large reading volume.

The above content, all the flow is counted, estimated that the total PV must exceed 100W. It can be seen that people are interested in this topic, which is the mass base.

And this topic is lasting and effective, in another 10 years, the technology will be updated, the knowledge system is also needed.

Link to original textJuejin. Cn/post / 685512…, shall not be reproduced without permission!

The status quo

You may read the above two articles, or you may not. Because these are the contents that I summarized temporarily before, the time is short, so it cannot be guaranteed to be comprehensive. My latest knowledge system will take a long time to complete. You can read on below, or check it out first.

In addition to mine, there are other articles, diagrams, etc. written by others on the web front-end knowledge system. You can go to the Internet search “front-end knowledge system” or “front-end knowledge” and other topics, you will find a lot of content, but a lot of problems.

  • Content is out of date. The front end has evolved so fast in recent years that outdated and unupdated content can mislead readers. For example, some tools or specifications are no longer used, so there is no need to learn them.
  • The content is incomplete. For example, some focus only on JS, HTML and CSS, which obviously Narrows the scope of the front end.
  • Not systematic enough. For example, put algorithms and JS prototypes together.
  • Not unified enough. Whatever they could find, they all said differently and had no common character. Such an important content, I think it is necessary to unify, continue to improve step by step.

what-is-fe

Since there is no suitable content, I think I need to rearrange it.

Front-end development has not yet reached a completely stable stage. There are not many people who think about knowledge systems, and even fewer who can write about them, and none who can be called authoritative. I started thinking about it four years ago, and I think I have a bit of a say in the topic of “front-end knowledge systems.” In fact, I’ve been thinking about knowledge systems for years, thinking about how to do it better.

I’ve always wanted to build a normative brand of Web front-end knowledge. I have a lot of spare time these days, so I sorted out all the previous content and made a website prototype what-IS-FE.

So far, it’s quite empty, but I’m going to work my way up. Every time I add something, I write a blog and post it. You can also submit an issue or PR on Github if you feel that the knowledge system is incomplete or has errors.

Why do we need knowledge systems

Cao Le, a senior technical leader in the industry, wrote “How to become a Technical bull”. Down to the three essential steps to becoming a tech juggernaut:

  • Find the right knowledge system
  • Deliberately training
  • Timely feedback

In other words, to become a technology leader in any industry or field, one must understand the knowledge system of the industry.

Compared with other technology stacks, the front end gives people the feeling of “chaos”, and they need to learn everything. At this time, they need a knowledge system to organize and don’t let themselves continue to be chaotic. With the system, you will know what you are familiar with and what you are not familiar with, so that you can master everything. Without a system, you will feel that you have to learn this and that, and you need to master everything. It’s so chaotic that you can’t move…

A lot of people are creating anxiety, a lot of people are thinking other people are creating anxiety for them. But getting you to understand the body of knowledge is definitely not a way to create anxiety, but a way to avoid it.

My first experience of knowledge system

To tell a story of my own, I was brought into the knowledge system from the beginning.

This is also a long, long time ago, I just graduated 2 years ago, I went to study and got a PMP, a project management certificate. Because MY job at the time was to develop project management software for companies, similar to Microsoft’s Project, but on the web.

Before learning PMP, I always thought that project management was just a writing function, and we had already developed it. The user raised a few requirements, we do according to the meaning of the user is, will not go online to check, refer to a few other software — should still have a lot of enterprises, also do so.

However, after taking the PMP exam, I found that there was a whole set of knowledge system in project management, all of which were summarized by predecessors. It can solve 90% of the problems if it follows this system of knowledge. Before the user raised the question, are all in this knowledge system, there is the answer, we do not have to go to the Internet, and then to refer to the implementation of other software.

In the same way, I soon realized that learning programming is also about sorting out the knowledge system and breaking it one by one, focusing on the basics. So, I made very rapid technical progress during that period.

What should a body of knowledge look like

The new body of knowledge is not the better, nor is the more the better. Greedy for new, greedy for too much, has been the problem of most programmers. As far as I am concerned, the following two points are necessary.

comprehensive

The knowledge system must ensure that the knowledge point is comprehensive, there can be no omission. But comprehensiveness is not more the better, but less the better. Now is an era of knowledge explosion, irrelevant things as far as possible to eliminate, do not occupy our limited brain memory.

system

Knowledge point is a lot, but is not scattered, but structured, systematic.

It’s like a tree with thousands of leaves, but they’re all arranged in an orderly way across the branches, and the branches, the trunks, and the structural relationships. For another example, a school has 2W students, which must be divided into colleges, majors and classes in order to be managed, otherwise it will be a group of vagrants. For example, a book of hundreds of thousands of words, also need to be divided into chapters to organize.

And this is very important, because otherwise we’re not going to be able to remember all these things if they’re all scattered. Only with proper organization can we understand and master.

How to sort out a knowledge system

It’s really hard to cover everything in the front end and be systematic, structured and not cluttered. So I spent a lot of energy looking up materials, thinking and summarizing, and then sorting out the knowledge system.

PS: I compiled this knowledge system, the target is senior front-end engineer, that is, at least can reach the basic level of a big factory front-end engineer. So there’s a lot to think about, and there’s a lot of basic knowledge.

The first step is to determine the scope

When it comes to the front end, there’s a lot going on right now, and the range is getting bigger. But when you start to build a body of knowledge, set the scope a little bit smaller and take your time. Therefore, the current knowledge system is only narrow front-end, that is, the development of web pages. But it’s also very informative.

Think of the front end, many people may subconsciously say, first to learn HTML CSS and JS, and then the popular Vue React, blah blah blah.

One of the things that’s missing here is that as a front-end programmer, you have to be a programmer first. So you have to have programming knowledge about programmers, that is, those basic computer courses in college. It is not required to be as proficient as preparing for the postgraduate entrance exam, but at least to have a general understanding.

Web pages also involve communication with the server, which requires knowledge of HTTP, which is also quite a bit.

When writing code, you may use various tool flows, i.e. knowledge of the development environment, as well.

After the code is written and tested, the online operation is up and running. At this time, there may be performance problems, security risks, and the need to detect statistics, etc., which must be understood.

And then systematize it

If only consider the scope, encounter what new content pile in, in fact, what difficulty. But the result is a mess, like the many bookmarks in your browser, that doesn’t help. For example, the former is like a country with a population of 100 million without organization and management, while the latter is like a country with a population of 100 million with a national head and divided into provincial and urban levels for management.

Body of knowledge, separately. One is knowledge, the other is system (that is, structure). With system and structure, it is easy to understand and remember. With the system and institutionalization, it is easy to expand and renew again.

How to systemize not only depends on your understanding of the industry, but also tests your ability to summarize. The way I divide it, let’s go straight to the details of the body of knowledge. At the beginning, I was idealistic, but in the end, I found there were a lot of trade-offs, and I couldn’t make it as perfect as I imagined.

For example, the first level of “network requests” should also be in “Syntax & Specifications,” but this section is too large and important to separate out. Another example is the first level of “common tools,” which, if carefully searched and accumulated, would be numerous, but which have to be minimized in order to reduce the amount of information available (which is already large).

In short, there is no standard or right or wrong way to systematize. If you have any good suggestions, please give them to me.

Out of scope

When we talk about the “big front end”, there are many other things that will be expanded and updated later depending on the priority.

  • Cross end (RN, Weex)
  • Hybrid (Ionic Cordova)
  • Small program
  • PWA
  • electron
  • nodejs

Some more abstract, more advanced content than knowledge point, also temporarily not in the scope. We will continue to supplement it as needed.

  • infrastructure
  • Architectural design (e.g., the micro front end that’s hot right now)

Some knowledge that is not commonly used for the time being is not included

  • Shadow DOM
  • Web Component

How to learn the front-end knowledge body

Just to be clear, this is god’s view of all dimensions, no details. That is, it will improve your vision, help you find the right direction, and even the way of thinking. But it’s not going to help you solve your immediate problem right away. But it will affect the rest of your career. It is “tao” not “shu”.

See so much, don’t be anxious, don’t be angry to learn, but the requirements are known. How you perceive something (vision, perception) determines how high you will go. If you think that the front end is only JS, HTML, and CSS, then you can’t break through that boundary.

Don’t blindly learn. It depends on your positioning, career development and market needs. Don’t expend limited energy on infinite expansion of knowledge, put what you have learned to use. “The world is broad, the world is not profound” — someone commented on Wang Yin.

If you want to continue learning and gradually master, you need to have some soft skills beyond the knowledge point, such as:

  • search
    • caniuse
    • Think no
    • stackoverflow
  • Read the documentation
  • English
  • Writing (common blogging site)
  • To summarize (abstract)
  • Amateur charging awareness
  • Try to be open source

About the knowledge blind spot

Be sure to allow yourself to have knowledge blind spots, even a lot of them. However, incorporate these blind spots into your system. That is, you can use it and not know the details, but you have to know what it’s called and what it does.

Each of us is limited in energy and work experience, you can not understand both proficient and comprehensive, all knowledge blind area is very normal.

For example, I have never actually used canvas or SVG, and I don’t know some of their details. But they are in my knowledge system, I know they are web pages do graphics, if one day to use, I at least know these technical solutions, but also can quickly check to learn a study, do some basic work.

The last

Scientific learning thinking, there must be a system of thinking. If you don’t understand this, just trust me.

To learn about the front-end knowledge system, welcome to see more what-IS-FE.