A front-end self-cultivation

Hope that many years later to see the teachings of the predecessors, can be closer and the distance between the predecessors---to struggle in the front of the road of their own

① reprinted from http://kb.cnblogs.com/page/545784/

②http://kb.cnblogs.com/page/549049/

③http://www.cnblogs.com/hustskyking/p/learning-recent-years.html

① a front-end self-cultivation

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 letter to a beginner's front-end engineer

Hello everyone:

At the invitation of Bobo, write down my thoughts on this topic. Since last year many friends let me help introduce front-end engineers, most of the busy did not help, the reason is really can not find people. That's what I was analyzing with them: The past clients were browser, so Html/css/javascript was the only choice, and now mobile first, so a lot of front-end developers were native developed and diverted, And originally wanted to do front-end engineers reserve Power fresh students also choose to learn native development, leading to the front-end people shortage. As the situation changes, H5 (HTML5 's popular nickname) represents a huge commercial value in the spread, whether it is the entrepreneurial team or the giant who naturally values this low-cost, high-yielding thing. It seems that the front-end development of the spring came again, but the situation is the shortage of reserve personnel, want to turn the front-end development will find your circle is still more chaotic than before, in addition to the standard is still lagging behind, a variety of frameworks, tools emerge, not a year or two, the past seems to be able to mix jquery, the threshold is No way to start a team to recruit excellent front-end engineers can only rely on feelings and burn money, the Giants need to re-nurture a good technical culture to attract talent, especially willing to spend money and time in front-end technology training, accumulation and innovation. Some people say that the web is dead, and now the man who says it can die. In the front-end technology reserves to increase investment, for a long period of time is very worthwhile.

Back to the topic, the title is actually wrong sentences "beginner front-end engineer". Front-end engineer is the title of the post, how to use learning it. I want will wrong to talk about career issues. Front-end Community three categories of people: Front-end engineers, front-end developers, "ensemble". First of all to clarify the front-end engineer is a kind of occupation, is full-time for the company's business to provide front-end development services. Front-end developers have a broader sense of what is being developed with front-end technology, but here I want to refer narrowly to the front-end open source community contributors and free front-end developers. "Ensemble" refers to developers who are originally in other languages because they love the people who often participate in community interaction and contribute to open source projects. The main difference between the front-end engineer and the latter is--the professional, the latter two mainly focus on and solve common problems (improve the productivity of front-end development, promote the implementation and development of standards), and the front-end engineer's function is to solve the company's product development in the front-end engineering problems (engineering and technology are different concepts, Before I shared a topic about what is front-end engineering, here). After a clear definition, I began to talk about the experience I had done for so many years as front-end engineers.

"He's the best front-end engineer I've ever seen," a former colleague of mine who rated me a few years ago, and I will refrain from adding "one" in the back. If he's talking about "the best front-end developer," I would never accept that. My github is so deserted, it has no outstanding talent in programming, and has not contributed to any influential open source projects. But I feel that I am a very good front-end engineer, I participate in product development efficiency is very high, very sensitive to the development of technology, rarely go, how much also a bit forward-looking. In front of the line, the technical or human problems to see the more accurate. In common: the pursuit of better and more effective solution to practical problems at work. I will not blindly pursue the "most popular" technology, and will not impose it on the product, unless I feel it is really suitable for this project, practical solution-oriented. Just to the watercress, I asked myself: watercress product front-end of the biggest problem is what? Not a unified UI, not a new framework, but to build a full infrastructure, change the way to develop the original centralized business code to completely decouple is the crux of the problem. There are technical problems and cross-role cooperation issues, so we can not isolate the front-end team, engage in cooperation and do not engage in confrontation. At that time, the General tools group assembled a variety of senior engineers from various backgrounds, discussed the program together, and the results played an important role in supporting the rapid development of the company's business. Do these things to endure obscurity, often jump out of their own comfort zone, to another unfamiliar area to be small white, the purpose is only one-effective to solve the problem in the product. For individuals, this is often done to gain more and deeper experience and knowledge, so I am also bored. People who do not understand may feel that this person is not a good thing, other people's view is not important, the harvest to real valuable things is the hard truth. New people should not value fame, pretending to be unhealthy. Immerse yourself in every project (don't. Pick. Live), to do specific problems specific analysis, not mechanically, independent thinking, open-minded communication is bound to grow up quickly. Do not take the pursuit of "perfect" when the pretence, do not want to do the technical content of the matter, so simply don't do the front end.

Embracing change is the value that I was instilled in when I was working in a former company. For the students who just embarked on the front-end engineer post, we should slowly get accustomed to the rapid change of front-end technology and embrace it. To stay hungry, stay foolish. There is also the focus, in the direction of the difficult to spend more time to learn the deeper the better, not entangled, clinging to those volatile things. Always remain curious about new technologies.

1. Tools are the most variable, with tools ranging from libraries, frameworks to build tools, editors, and more. My attitude to the tool is practical and hate. For the new people to experience as many tools as possible, from the design of the tool can also learn a lot of knowledge, but to sober realize that will use a lot of tools is not the core of the development ability of engineers, is not the core competitiveness of individuals.
2. The changes in the front-end technology itself are evolving, unlike tools that completely discard into new. For example, spending more time learning CSS2.1 is not wasted, and studying some of the basic features of JavaScript will not be easily obsolete. Then there are predictive learning techniques that actively embrace new standards in the project, such as ES6. Fortunately, there are a number of tools that allow us to apply new standards in product development ahead of time.
3. There is no outdated problem of development ideas, these need to be in the long-term development practice of continuous summary, reflection, such as the separation of concern is proposed in the 70 's, derived from it a lot of development ideas, it will never be outdated. These seemingly "empty" things are very useful in navigating complex projects.

I think the front-end engineer is the most and most need of the "artisan spirit" in all the engineers ' roles. The basic responsibility of the front-end engineer is to restore the design, turning a dead design lying on the design into a living design that can be used. The so-called "craftsman spirit" is embodied in this "living" word. Visual aspect, whether an animation process is smooth, an interactive action all the state is done in place, the adaptation is flexible enough. In terms of code, whether a piece of generic code is general enough, code redundancy is minimal, performance is fast enough, and so on. The simple implementation is the minimum requirement, the rest of the product manager, the project manager will not ask, that is good front-end engineers to play the space. The development of the front-end engineer is a process of cultivation, the beginning of cultivation is to learn those books can learn the programming knowledge. In the quality of front-end engineers, I think the ability to apply is the most important. This kind of application ability can be regarded as a product molding ability, the premise must have product thinking and design thinking, can find and make up for the product, design blank and unreasonable link, can control the complexity of the code very well, high efficiency high quality complete development demand. Upgrading this ability, on paper, can only be done in a variety of projects, as doctors continue to accumulate clinical experience. If the company project can not be satisfied, you find the project to do. When I first graduated, I took a lot of reverse telecommuting, usually this kind of project play a big space.

Each development team has its own set of rules: Code specifications, codes review, Git or SVN usage, the development process, and so on, first play by the rules, and then think about how to contribute. Team consciousness is a kind of professional attitude. Working in a good team will be fun, and the team will promote the individual to grow faster. But a good team is also built on all individuals. Do not complain that the team is not good enough, with a more open mind to share and exchange, slowly a good atmosphere will be formed.

Finally say the front-end engineer attitude problem. The front-end technology is developing quickly, so we should not be complacent because we should study constantly. Before answering a question in the know, I wrote: "Programmers are apt to revel in their own code and even have some kind of narcissism." I have also had this time, I even think that not enough narcissism is not a good programmer, the artist is not not narcissistic. But if you jump out of your own world, what is the value of what you write and the product is successful? What can affect, one or two colleagues, a team, the whole industry? With the big God in mind? This time will be calm, the original is only more than the previous self-improvement. ”

The front does not say to become a good front-end engineers specifically should learn what technology, will be some disappointment? Because the specific technology will change, the constant is those traits and concepts. I hope my share will inspire and help the new front-end engineers.

-kejun

③ about my three years of technological growth.

a solid foundation

I remember before the first interview, I worked very hard to know the front-end related technical points column, wrote several pages of the key words, and then for each keyword system to consolidate learning, solve the problem in mind and learning new questions, and then confidently participate in Sina and NetEase interview. At that time, an estimated two companies in front-end engineering has been a bit of a hint, but may think that the school students have no actual combat experience, the main question is the front-end basic problems, closures, regular, DOM model, the Event model, and so on, nothing special in-depth topic. Of course, I did not have a lot of project-related content in my resume at that time, and I guess I couldn't talk to the interviewer.

For the beginning of the front-end students, the interviewer is focused on their ability to learn, development potential, but also appropriate to see the programming ability to pass, the basic knowledge of the javascript/css/html is not firmly held firm. If you are selected by the interviewer, it means that you have a strong overall quality and are a qualified front-end starter. General key college students learning ability are also good, several computer related disciplines of the University of Lavender plus appropriate extracurricular exercises, programming ability is also acceptable, so the company likes to recruit key universities, especially the students of science and engineering. I see a lot of students, before graduation 35 months before beginning to understand and learn the front-end, single-ended smoothly into BAT.

I belong to the above the wave of people, but not before graduation cramming, but earlier contact with the front end, read a lot of books, into the front-end community, and in the school's technical team to exercise the basic skills. I am very fortunate that I will devote so much time to the study of the basic knowledge in the university, because after graduating I found that I have not so much time and patience to learn these slightly boring knowledge. Are you still able to stick to the Rhino book after you've worked? It is estimated that most people do not have the patience, even if some knowledge you have forgotten, only willing to use the Rhino book as a reference. I chewed the book four or five times before I graduated, and now I don't need it.

University read a lot of books, watercress on the record of college reading books, from every book to absorb a bit of knowledge, so the total knowledge reserves is sufficient to meet the interview and general needs. Not modestly, I know the front-end hard knowledge more comprehensive, which has laid a solid foundation for my follow-up improvement.

A solid foundation

I remember before the first interview, I worked very hard to know the front-end related technical points column, wrote several pages of the key words, and then for each keyword system to consolidate learning, solve the problem in mind and learning new questions, and then confidently participate in Sina and NetEase interview. At that time, an estimated two companies in front-end engineering has been a bit of a hint, but may think that the school students have no actual combat experience, the main question is the front-end basic problems, closures, regular, DOM model, the Event model, and so on, nothing special in-depth topic. Of course, I did not have a lot of project-related content in my resume at that time, and I guess I couldn't talk to the interviewer.

For the beginning of the front-end students, the interviewer is focused on their ability to learn, development potential, but also appropriate to see the programming ability to pass, the basic knowledge of the javascript/css/html is not firmly held firm. If you are selected by the interviewer, it means that you have a strong overall quality and are a qualified front-end starter. General key college students learning ability are also good, several computer related disciplines of the University of Lavender plus appropriate extracurricular exercises, programming ability is also acceptable, so the company likes to recruit key universities, especially the students of science and engineering. I see a lot of students, before graduation 35 months before beginning to understand and learn the front-end, single-ended smoothly into BAT.

I belong to the above the wave of people, but not before graduation cramming, but earlier contact with the front end, read a lot of books, into the front-end community, and in the school's technical team to exercise the basic skills. I am very fortunate that I will devote so much time to the study of the basic knowledge in the university, because after graduating I found that I have not so much time and patience to learn these slightly boring knowledge. Are you still able to stick to the Rhino book after you've worked? It is estimated that most people do not have the patience, even if some knowledge you have forgotten, only willing to use the Rhino book as a reference. I chewed the book four or five times before I graduated, and now I don't need it.

University read a lot of books, watercress on the record of college reading books, from every book to absorb a bit of knowledge, so the total knowledge reserves is sufficient to meet the interview and general needs. Not modestly, I know the front-end hard knowledge more comprehensive, which has laid a solid foundation for my follow-up improvement.

Knowledge system and Capacity ladder

But, after graduating from work, only then found that I learned that something far from enough. In fact, the internship before graduation has been deeply understood.

Why do companies expect students to intern? The company has its own set of processes and technology system, this set of things are suitable for the company's business, facilitate the cooperation between the various types of operations, and each company's that set is not the same. Just graduated students most skilled is the use of the API, and enter a new environment, will find that the previous familiar with the set is not good, there are many software environment need to build, many framework libraries need to be familiar with a lot of development process, on-line process, business process and so on, These things will make a confident newcomer become without any superiority. Plus there are several minor bugs to fix in the assigned business, and you'll almost never have your own time, and learning becomes a luxury thing. This is also to the students still in school a warning, if you want to go technical this road, the basic skills must be solid, otherwise you will work for the first year is quite arduous.

Baidu internship that a few months to my change is very big, the ivory tower outside the three months of hard work, personal experience and do not say that the technical understanding has been greatly improved. Of course, this is thanks to the company. In the company it is easy to know which technologies are needed by the company and which skills must be mastered in the business. Slowly, the technology has a certain ability to identify, once placed in the heart of the technical keywords are single-threaded, compatibility, bubble capture, event agent, and so on, and now become a component, debug mode, automated testing, front-end integration environment and so on, is completely two knowledge dimension classification.

Companies have different levels of people, they do things are also some differences, from these differences can also be able to understand, compared with this group of people, what are the highlights and shortcomings, if there is a need to improve the need to do something. The bigger the company, the more obvious the grading of people's ability, and the easier it is for individuals to find their own position. Knowing where your level is and knowing where the next level is, we only need to work hard.

Business and new technologies

I never worry about the community coming out with a few new technical terms, because I've arranged seats for these words in my mind. such as grunt, Gulp, webpack and other nouns out of time, I am not busy to study, the brain has a general system diagram, first put them into the brain named "Engineering-Packaging class", first saved up, until the time needed to learn. In fact, it was only three or four months before I went to study and use them.

But before I put it into my brain, I'll start with a quick look at these tools: what can it do? Which scenarios can be used? How about it? Where is the community? How does the component library search? What are the differences between the three? Then look at the basic API, which doesn't take much time, but it's a great help to me in-depth understanding of them. I have always recognized this phrase: "Know where to learn from the knowledge, you have learned the half of this knowledge."

So I'm not worried about the new technology, I'm not busy learning it, because even if I learned it, my team would not use it, even in the business is not used at all. To classify new knowledge and to understand the whole picture, let's put it on the detail section. Don't move on. Source Analysis, React's diff algorithm, Vue's MVVM, this kind of thing laborious, actually slightly imagine know is a what, the middle detail realization and realization principle is not unimportant, but temporarily not important. You can wait until you are idle or anticipate the need in your business, and it's not too late to dig deeper.

In most cases, technology is changing as demand changes, where does the demand come from? It comes from your team and your business, of course. Follow the business, your direction is not wrong!

Summary

It can be said that no one system to learn the front end, the university does not have this course, the company does not have this course. The word "front end" appears when Ajax is popular, it is vibrant, and its development is extremely rapid. To be on the road of technology long-term, first of all to lay a solid foundation, and then ability and time gradually.

A front-end self-cultivation