A front-end self-cultivation and self-cultivation

A front-end self-cultivation and self-cultivation

Today, we will share with you the theme of front-end self-growth. This is a topic about growth.

Many people have this feeling: I have heard a lot of technical circles share some of them, some of them are deep, some are cool, and some are easy to understand. However, in the past few years, what have I used, which ones are actually helpful to you? Rather, it is vague.

In 2015, I shared a lot of content on different occasions: Mobile performance, adaptation, Web vs Native, and hybrid, but I have been worried about it all the time, the real deep content is actually oriented to small groups. For example, Hybrid can only be used in most companies.

So this time I tried to share a topic that I thought could help all the front-end users. If we talk about the growth of the front-end, dozens of people in the audience can get the BAT offer, or raise a salary for a promotion, so I think I have succeeded.

The front-end is actually a very hard job, because the front-end technology has been revolutionizing very fast, and new technologies and techniques are constantly being invented. Previously, I had a friend who told me that he knew the front-end, familiar with the front-end, proficient in the front-end, familiar with the front-end, and not familiar with the front-end. Why? He said that when he felt that he knew everything at the front-end and was omnipotent, he suddenly saw a piece of code that he could not understand, and the whole world collapsed, I never dared to say that I would have a front-end.

I told him that what is missing here is a correct method. What do you think is an all-encompassing and omnipotent standard? Is it a problem that cannot be solved for a long time at work? He said that's true. I asked him again, have you systematically studied the front-end? He thought about it, but he did not take this course. So far, no university has taught the front-end, but some training courses will talk about web development.

What I want to talk about here is how to learn the front-end and achieve your own growth.

First of all, I have to issue a disclaimer about growth. It's not that I have no confidence in what I'm talking about, but that growth is my own business, people who work in foreign companies often hear the following:

You are the owner of your career.

You are the person in charge of your career development. In this example, you (not your boss, not your mom and dad, or your girlfriend) are the owner of your career development.

I have heard of this sentence at the beginning of my career. It has always guided my career development. Even when I bring my team and train my team, it is also a central guiding ideology, many of my team members are also bringing the team. In fact, they are also practicing this sentence, so here I am, I also share this sentence with you.

Let's talk about front-end growth,In my opinion, there are two main aspects: "ability" and "knowledge". In my personal opinion, my abilities account for 80%, and my knowledge accounts for 20%.

From this figure, we can see that we think that the latest Angular, React, and ES2015 are all in the knowledge, and the knowledge is divided into two parts, I call it a standard in some cases. It is relatively stable, and there will be very few things about the standard being overturned. The other part is technology, such as jQuery and React frameworks, such as MVC and FLUX architectures. These things are dominated by various companies and changes are fast, it's not long before Grunt's development. Gulp is here to challenge him, and then there are browserify and webpack.

In my opinion, the key capabilities are very stable. I think there are three major capabilities: programming, architecture, and engineering.

Programming capabilityThat is, the ability to use code to solve problems. The stronger your programming capability, the more complex the problem can be solved. The subdivision is supported by debugging, algorithms, data structures, and operating system principles, you can solve all kinds of troubles.

Architecture capability, Is to solve the problem of code size. When a system is complex enough, you can write every piece of code to solve every problem. It does not mean that you can solve the whole system. This requires architecture capabilities, the architecture capability includes some awareness, such as decoupling and interface isolation. It also involves understanding the business to establish abstract models. There are also some common models, such as classic MVC and the design level, object-oriented and design patterns.

LastEngineering Capability, Is to solve the problem of collaboration, when the system is larger, relying on one person alone, there is no way to complete, how to ensure that a few masters can cooperate with each other well? How can we ensure that the worst-performing people in the project do not lag behind? This engineering construction often spans multiple businesses and is done by teams in the reporting relationship. Including front-end decoupling, modularization, quality assurance, and code style.

In fact, it is not difficult to see. These three items are actually ordered. The lower the level, the smaller the team, and the programming ability, the more senior the front-end, the larger the company and the team, the more I need the skills to be followed, the more I want to emphasize here, in fact, Senior front-end, large teams, and capacity needs are both required-not to say that senior front-end, programming capabilities can be deteriorated.

There will always be some voices in the community, and there is a sense of resistance to engineering capabilities and architecture capabilities. I think it is relatively empty and I don't think it is necessary. In fact, it is true that some people are in positions. After all, the status of the company and team may not be used, but from the perspective of personal growth, it is a big mistake.

Next, let's talk about the learning of knowledge.

I have always had a point of view on knowledge. I think this picture shows a good front-end to tell right and wrong, there is no possibility of learning well in this kind of mentality,

Therefore, I understand the goal of learning knowledge as a bright spot, namely, accuracy and comprehensiveness. If you were able to make these two points when you learned a part of your knowledge, when you are making technical decisions in your business and when you are facing technical questions from the interviewer, confidence is totally different from what you have seen.

How can we achieve these two points? I think there must be many ways, and my answer here is to share "build your own knowledge system ".

How can we establish our own knowledge system? My personal experience is as follows:

Step 1: search for clues.

If you want to know something, for example, if you want to learn Web platform APIs, You can first find a book to see what others have written, but I don't like it.

In my college, I used to borrow more than a dozen books to find a difference between id and name. At that time, no one told me, which book is better. Therefore, the first reaction to my knowledge summarized by others is to question or not believe it.

So I recommend you find some accurate information, and you can confirm that it is really comprehensive enough information as a clue. For Web platform APIs, I use reflection:

The attribute list provided by the browser will not lie. I am confident that this item will be used as a clue.

It may also be suitable for some materials, as well as the appendix of some standard documents, and the structure definition in the source code.

Step 2: establish a contact.

For example, let's look at the following DOM attributes:

Here, the column on the left is for Node operations, and the column on the right is for Element operations, which has a certain relationship.

In general, we can find the corresponding relationship based on the following:

• Aesthetic
• Completeness
• Operate on the same group of data

Specifically, operating on the same group of data is the core concept of object-oriented. For the front-end, it is a bit different that all the APIs and the root are windows. Therefore, most of the APIs are actually, it can be divided based on object-oriented data and operation perspectives.

The third step is classification.

Here is an actual example of zepto (simplified mobile jQuery) API classification.

After establishing a connection, we can classify it based on the connection between knowledge, and we can get a graph. In this graph, you can clearly know what the knowledge is, which of the following can be replaced by each other.

Once you have something you have never seen before, you can quickly understand it by putting it in the graph, or find some good alternatives.

For example, if the interviewer asks you how to use bind and unbind during the interview, you won't be able to. At this time, if you have this picture in your mind, you won't be confused. You can say, although I don't know bind and unbind, I know live and die, and I know on and off.

In this example, we can see that most of the items in the collection are useless, and node operations are certainly useful.

　　Step 4: trace the source.

When I had a full picture of a knowledge system, I had to confirm its accuracy. There is a lot of knowledge, and there will be a lot of controversy in the Community. Who should I trust? This is a problem. My answer is to trace the source and find its initial discussion and definition.

There is a real case, that is, the concept of closure. Many of us once understood it as wrong. We confuse the concepts of closure and scope and think that closure is the context of the execution environment of the function, but there is a hax (many people should know him, haha), and he raises a question about this and thinks that the closure is a function. So I will verify the concept of closure.

As we all know, wiki is actually not accurate, but there is a piece of it, it is basically not too problematic, It is history. Is the historical part of the closure entry:

From this history, I found a name, Peter J Landin, who was the author. So I went to see what he said, so I went to google academic search, find his article

So we found the original file.

This definition corresponds to the closure in JS today, which is slightly different, but it undoubtedly contains two parts: environment and control (CODE, closures correspond to JS functions. Previously, the general idea was that closures only contain the environment.

Therefore, this tracing process can help us identify right and wrong.

In addition to the wiki-google academic search combination, there are some email lists and github submission history, which are also very suitable for verifying the historical concepts and technologies.

Finally, I am talking about the process of building a knowledge system, which is to constantly accept new knowledge, challenge and question the original system, overturn and re-build, and every cycle, your knowledge system has become stronger and stronger.

The following section describes how to develop capabilities.

In fact, Capability cultivation is very important, but in fact, there is little content. There are only two points: teaching materials and training.

I advocate building my own system for knowledge learning. I don't believe in books, but my opinion on ability cultivation is the opposite. I think the system of ability is, it is difficult to establish it on your own and requires guidance from teaching materials. This is determined by the complexity and change speed of the two.

If you want to cultivate your abilities, you need to find The classic textbooks to learn, such as The introduction to algorithms and The C ++ Programming Language, which have never been outdated for decades.

Note that I use teaching materials instead of books.

The biggest difference between teaching materials and books is whether there are exercises.

In my opinion, it may take a week to read two difficult books, but the teaching materials cannot be used. It may take several months to read and exercise.

So we talked about training.

In fact, there is a fact that after my work, only a few people can still perform training, such as my own programming skills. I have been working for seven or eight years and have hardly made any progress.

Training should be systematic (requires teaching materials) and active. These two features are indispensable. Some people may think that I have to work hard and work overtime every day, but in fact, no passive pain can bring progress, but your pain may bring more income to the boss.

If you are faced with difficulties, you can choose system training to improve yourself, but for most people, you may be more willing to choose a work und: develop habits and make your work more challenging.

There are actually a lot of theories about this. The famous ones are the psychological comfort zone, learning zone, and panic zone proposed by Noel Tichy. Select a challenging job for yourself and solve the problem positively.

A joke is popular in the technical circle. It is about a person who has been working for three years, but has only one year of experience, because he has been repeating his first year of work in the next two years.

So what we need to do is never repeat work. When you feel that your work is getting more comfortable and less risky, you should be vigilant.

Although training is a very difficult task, you don't have to worry too much. Although "10 thousand-hour training" remarks are everywhere, the recruitment thresholds of major companies are now, in my opinion, we should all be stuck in training for several hundred hours. So I would like to say that 10 thousand hours is too long to compete for the evening. We hope you can become a better front-end and be yourself better.

The above is all the content I shared.

QQ Group for front-end learning and communication: 328058344