A front-end self-cultivation

Mark to:http://kb.cnblogs.com/page/545784/

The topic that we share today is the front-end self-growth, which is a topic of growth.

A lot of people have this feeling: listen to a lot of technical circles to share, some have depth, some of the guidance, in layman's, but, a few years down, in the end what use, which is really helpful to themselves? But somewhat blurred.

2015 I shared a lot of content on different occasions: there are mobile performance, adaptable, Web vs Native, there are hybrid, but in fact I have always been more worried, really have depth of the content, in fact, for the relatively small groups, such as hybrid, in fact, it is in most companies , it can only be used off-the-shelf.

So this time I try to share a topic that I think can help with all the front ends, about the growth of the front end, and if there are dozens of people in the audience who get BAT's offer or a promotion, I think I've made a success.

The front end is actually a particularly bitter occupation, because the front-end technology has been revolutionary particularly fast, new technologies and techniques are constantly being invented. I had a friend before, and he speaks of his knowledge of himself is the front end, familiar with the front end, proficient in the front end, familiar with the front end. Why, he said when he felt that the front end of all things feel all-knowing, omnipotent, suddenly saw a piece of code, he completely incomprehensible, so the whole world collapsed, and never dare to say that they will be the front.

I told him, here, what is missing is a right way, what do you think is the standard of omniscient and omnipotent, a problem that has not been solved for a long time at work? He said it was true. I asked him again, did you learn the front end of the system? He thought about it, and he didn't learn it, so he didn't take this class at college. Indeed, so far, there is no university to teach the front-end, but some training courses, will talk about Web development Three musketeers.

What I am talking about here, I hope to bring you, is how to learn the front-end, to achieve their own growth.

On the growth, first I have to send a disclaimer, not I told the content of my lack of confidence, but growth is their own business, English has a sentence, in the foreign work of people will often hear, called:

You are the owner of your career.

You are the responsible person for your career development. The subtext is that you (not your boss, not your parents, nor your girlfriend) are the responsible person for your career development.

This sentence I heard at the beginning of my career, has been guiding my career development, even in my team, training team, but also the center of the guiding ideology, before I took the team of students, they have a lot of people also in the team, in fact they also in practice this sentence, so I here, also put this sentence, Share this truth with everyone.

We talk about the front-end growth, I think, mainly in two aspects, part is "ability", part is "knowledge". My personal point of view, capacity accounted for 80%, knowledge accounted for 20%.

From this figure, we can see, in fact, we think that the change fast things, the latest out of the Angular, React, ES2015, in fact, are in the knowledge, knowledge is divided into two parts, part I call it standard, it is relatively stable, very few will appear a standard overturned things. Another part is the technology, such as JQuery, React these frameworks, such as MVC, FLUX these architectures, these things are led by various companies, change very fast, you see Grunt development not long, Gulp to challenge him, and then have browserify, Webpack these things.

And I think the ability to focus is very stable, I think the ability is three pieces: programming ability, architectural ability, engineering ability.

Programming Ability , is the ability to solve problems with code, the more you have the ability to program, you can solve the more complex problems, subdivision and debugging, algorithm, data structure, OS principles and other support, you can solve all kinds of trouble problems.

Architectural Ability , is to solve the problem of code size, when a system is complex enough, you will write each piece, can solve every problem, not only you can handle the entire system, which requires architectural capabilities, architectural capabilities include a number of awareness, such as decoupling, interface isolation, but also the understanding of the business to establish an abstract model, There are also some common patterns, such as classic MVC, design level, object oriented, design pattern and so on.

The final engineering ability , is to solve the problem of collaboration, when the system is larger, light on a person, there is no way to complete, how to ensure that a few experts can cooperate well with each other? How to ensure that the lowest level of people in the project is not dragged down? This engineering construction, often across multiple business, to report the relationship on the team to do. Including front-end decoupling, modularity, quality assurance, code style, and more.

Actually not ugly out, these three items, in fact, there are sequential, low-grade, small team, programming ability to deal with a, the more senior front end, the larger the company and the team, the more the need for the back of the skills, but here I want to emphasize a bit, in fact, senior front-end, large team, the demand for capacity, The ability to program can become worse.

There will always be some voices in the community, the ability to engineering, the ability to hold a resistance to the structure of the attitude, feel more virtual, feel no need. In fact, for some people in the post, is also true, after all, the company, the state of the team may not be used, but in terms of personal growth, is wrong.

Let's talk about the study of knowledge in detail.

To knowledge, I have always had a point of view, called Ningquewulan, this picture written a good front-end want $ right and wrong, yes, in fact, a lot of people, he learned things when they like to pick, pick a simple learning, the most "easy to read", in this mentality, there is no trace of the possibility of learning,

So my goal of knowledge learning, understanding as a bright spot, an accurate, two Yue comprehensive. If you can do these two points, when you are in the business to make technical decisions, you face the interviewer technical issues, confidence and you only see the fur is completely different.

How do you do these two points? I think there must be a lot of ways, and my answer, I want to share here, is to "build their own knowledge system."

How to build your own knowledge system? My personal summary of experience is the following several steps:

The first step is to find clues.

You need to understand a knowledge, such as I want to learn the API of the Web platform, of course, you can find a book to see what others have written, but I do not like to do so.

I am in college, learning the front-end things, in order to find an ID and name of the difference, had to borrow more than 10 books, compared to see, at that time, is really no one told me, what book is better. So I summarize good knowledge to others, the first reaction is to question, do not believe.

So I recommend, find some more accurate, you can be sure that it is really enough comprehensive information as a clue. For the Web platform API, I use reflection:

The list of attributes given in the browser is not deceptive, and with this as a clue, I am confident.

It is also possible to make more suitable data, as well as some appendices to the standard documentation, and a structure definition in the source code.

The second step is to establish a connection.

For example, look at the following DOM properties:

Here, the left column is the operation of Node, the right column is the operation Element, it has a certain correspondence.

In general, the way we look at correspondence is based on the following factors:

• Beauty
• Completeness of
• Manipulating the same set of data

In particular, the operation of the same set of data, is the core object-oriented concept, for the front end, a little different is that all the API, the root is window, so, in fact, most of the API can be based on the object-oriented data and operation of the idea of division.

The third step is the classification.

Here I give a practical example of my API classification for zepto (Mobile Lite jquery)

After the establishment of the link, we based on the relationship between the classification, we can get a map, in this diagram, you can very clearly know, what knowledge, is very important, which, in fact, can be substituted for each other.

And once you have something you haven't seen before, you can quickly understand it by putting it in the map, or find some good alternatives.

For example interview, if the interviewer asked you how bind and unbind use, you do not, at this time, if you have this picture in your heart, you will not have a face, you can say, although I do not know bind and unbind, but I know live and die Ah, I know on and off Ah.

In this picture, we can see that the contents of collection, mostly useless, and node operation, it is certainly useful.

　　The fourth step is to trace the trace.

When I have a conception of the whole of a knowledge system, I make up two words, and then I need to confirm its accuracy. A lot of knowledge, in the community, there will be a lot of controversy, who should believe, this is a problem. And my answer is to go back and find the initial discussion and definition.

There is a real case, that is, the concept of closure, many of us have been wrong to understand, the concept of closure and scope to confuse, that the closure is the function of the execution environment context, but there is a called hax (many people should know him, haha), he questioned this question, The closure is considered a function. So I went to verify the concept of closures.

As we all know, the wiki is not accurate, but there is a paragraph, the basic will not be too problematic, is history. Is closure the historical part of this entry:

From this history, I found a name, Peter J Landin, he is the author, then, I went to see what he said, so I went to Google Academic Search, find his article

Sure enough, so we look at the original file.

This definition, which corresponds to our closure in JS today, is slightly different, but it undoubtedly contains two parts: the environment part and the control (code) part, so in fact, the closure is the function that corresponds to JS, and before, the general view is that the closure contains only the environment.

So this retrospective process can help us really understand the right and wrong.

In addition to the combination of wiki-google academic search, there are a number of mailing lists and GitHub submission histories that are well suited to verifying the history of some concepts and techniques.

Finally, I speak of this process of building knowledge system, is to constantly accept new knowledge, challenge, question the original system, overthrow re-reconstruction, every cycle, your knowledge system has become more solid, more powerful.

Part of the share below is about capacity development.

Capacity-building is actually very important, but in fact, there are few things to say about it. Only two points: teaching materials, training.

Knowledge learning, I am advocating the establishment of their own system, do not believe the book, but the ability to train, my views on the contrary, I think the system of ability, it is difficult to build their own, the need for teaching materials to guide. This is determined by the complexity and pace of change.

To cultivate the ability, we need to find classical textbooks to learn, like the introduction of algorithms, the C + + programming language These classics, decades are not outdated.

Notice I used the textbook instead of the book.

The biggest difference between textbooks and books is that there are no exercises.

In my opinion, the content of the book can be difficult to read two books a week, but the textbook must not be, the textbook must take a few months, while reading and doing exercises.

So I talked about training.

In fact, there is a fact that, after work, only a few people can still do training, such as my own programming ability, I consciously work 7, 8 years, almost no progress.

Training should be systematic (need teaching material), active, these two characteristics indispensable, some people will feel, I really work very hard, every day to overtime, but in fact, any passive pain, can not bring progress, your pain is likely to bring more income to the boss.

If you're in trouble, you can choose to train yourself to improve yourself, but for most people, you might be more likely to choose a workaround: Get into a habit and make your work more challenging.

This thing actually has a lot of theories, the more famous is the psychological comfort area, the study area and the panic area that Noel Tichy put forward. Choose a job that is challenging for you and solve the problem squarely.

The technology circle is a joke, saying a person, working for three years, but only a year of experience, because the next two years are repeating the first year of work.

So what we have to do is never repeat the work, when you feel the job now, more and more comfortable, more and more lack of risk, it should arouse vigilance.

Although training is a very difficult thing, in fact, we do not have to worry too much, although all the "10,000-hour training" of the speech, now the major companies of the recruitment threshold, in my opinion should be stuck in the hundreds of-hour training level. So I want to say, 10,000 hours too long, seize. Hope to see everyone become a better front-end, to do better themselves.

These are all the things I share.

A front-end self-cultivation