Today, I want to share with you the theme of front-end self-growth, which is a topic about growth.
Many people have such a feeling: listen to a lot of technical circles to share, some depth, some good at giving guidance, simple, but, a few years down, in the end which use, which is really helpful to yourself? It’s a little fuzzy.
I shared a lot in 2016 on different occasions: There are mobile terminal performance, adaptation, Web vs Native, and hybrid. But IN fact, I always worry that the real in-depth content is targeted at a relatively small group, such as hybrid. In fact, most companies can only use it ready-made.
So THIS time I try to share a topic that I think can help all the front end, about the growth of the front end. If dozens of people in the audience get the offer of BAT or get promoted or paid, THEN I think I have achieved success.
In fact, the front end is a particularly helpless and painful occupation, because the front end technology has been particularly fast revolution, new technology, new skills are constantly invented. Before, I had a friend who said that his perception of himself was that he understood the front end, was familiar with the front end, was proficient in the front end, was familiar with the front end, did not understand the front end. Why? He said that when he thought he knew everything about the front-end, he saw a piece of code, he couldn’t understand it at all, and the world fell apart, and he never said he knew the front-end again.
I said to him, here, the lack is a correct method, you think the omniscient, omnipotent standard is what, is the work for a long time encountered can not solve the problem? He said it was true. So I asked him, did you learn the front end systematically? He thought about it and said, “I haven’t learned it. It’s not a course in college.” Indeed, so far, no university has taught the front end, but there are some training courses on the web development triad.
What I’m talking about here, I hope to bring you, is how to learn the front end, to achieve their own growth.
First of all, I have to issue a disclaimer about growth. It’s not that I have no confidence in what I say, but growth is my own business.
You are the owner of your career.
You are responsible for your career development. The subtext is that you (not your boss, your parents, or your girlfriend) are responsible for your career.
This sentence at the beginning of my career, I heard that, has been guiding my career development, even in my team, training team, also is the center of the guiding ideology, before I took the team’s classmate, they have a lot of people also in the team, they are actually practice this sentence, so I’m here, also share this sentence, the reason to give you.
When we talk about front-end growth, I think there are two main aspects, one is “capability” and the other is “knowledge”. In my personal opinion, ability is 80% and knowledge is 20%.
From this graph, you can see that things that we think change quickly, such as Angular, React and ES2015, are actually in knowledge. Knowledge is divided into two parts, which I call standards, which are relatively stable and rarely overturn a standard. The other part is technology, frameworks like jQ and React, architectures like MVC and FLUX, which are dominated by various companies. They are changing very quickly. You can see that Grunt was not long in development when Gulp challenged Grunt, then Browserify and Webpack.
And the ability that I think is the most important, is very stable, I think the ability is three big blocks: programming ability, architecture ability, engineering ability.
Programming ability is the ability to solve problems with code. The better your programming ability is, the more complex problems you can solve. Segmentation is supported by debugging, algorithms, data structures, OS principles, etc., so you can solve all kinds of troublesome problems.
Architecture ability, is the problem of the code size, complicated enough when a system, can you write in each piece, can solve every problem, you can get the whole system, which requires architecture, architecture ability contains some consciousness, decoupling, interfaces, such as isolation, also contain business to establish abstract model, there are some common patterns, such as the classic MVC, There is also the design aspect, object orientation, design patterns and so on.
Finally, engineering ability is to solve the problem of collaboration. When the system scale is larger, it cannot be completed by one person alone. How to ensure that several masters can cooperate well with each other? How do you make sure the worst person on the project doesn’t drag you down? This engineering construction, often across multiple businesses, to report on the relationship of the team as a unit to do. This includes front-end and back-end decoupling, modularity, quality assurance, code style, and so on.
Not ugly, actually, these three, in fact, there is a sequence of, low level, small group, a programming ability to cope with, the more senior front-end, the bigger the company and the team, the more need to the back of the skills, but here I want to emphasize that actually senior front-end, big teams, the demand for capacity, is both – not to say that even senior front-end, programming ability will become worse.
There are always some voices in the community, who hold a kind of resistance attitude towards engineering ability and architectural ability, and feel that it is empty and not needed. In fact, for some people’s positions, it is true, after all, the state of the company and the team may not be necessary, but from the perspective of personal growth, it is a big mistake.
Now let’s talk about the learning of knowledge.
On knowledge, I have always had a point of view, which is called “Ningqingwuren”. There is a sentence written on this picture that distinguishes the right and wrong talents from the wrong ones. Yes, in fact, many people like to choose simple things when learning things, and choose the most “profound and simple” books.
Therefore, I understand the goal of knowledge learning as a bright spot, one day accurate, two days comprehensive. If you can do these two things, it will make a difference when you make technical decisions in your business, and when you face an interviewer’s technical questions with confidence.
How do you do both? I think there are many ways, and my answer, which I’m going to share here, is “build your own knowledge system.”
How do you build your knowledge? My personal experience is the following steps:
Step one, look for clues.
If you want to know something, for example, I want to learn the API of the Web platform, you can certainly pick up a book and see what other people have written, but I don’t like to do that.
In my university, in order to find the difference between ID and name, I used to borrow dozens of books and compare them. At that time, no one really told me what books were good. Therefore, my first reaction to others’ summing up of good knowledge is to question and disbelieve.
So I would recommend looking for something that is accurate, that you can be sure is really comprehensive enough as a clue. For Web platform apis, I use reflection:
This list of properties that comes out of the browser is not deceptive, and with this as a clue, I’m pretty confident.
There are also some appendices to the standard documentation, and structure definitions in the source code.
The second step is to make connections.
For example, look at the following DOM attributes:
Here, the left column operates on Node and the right column operates on Element, and there is a certain correlation.
Generally speaking, the way we find the corresponding relationship is based on the following:
Aesthetic feeling
completeness
Operate on the same set of data
In particular, operating on the same set of data is the core concept of object orientation, and a little bit different from the front end is that all apis, at their root, are Windows, so in fact, most apis can be divided according to the object-oriented view of data and operations.
The third step is classification.
Here’s a more practical example. Here’s my taxonomy of Zepto apis
And once you have those connections, you sort them out, and you get a map, and you get a very clear picture of what’s really important and what’s really interchangeable.
And when there’s something you haven’t seen before, you can quickly understand it by putting it on the map, or come up with some good alternatives.
For example, in an interview, if the interviewer asks you how to use bind and unbind and you don’t know how to use them, if you have this picture in your mind, you won’t be confused. You can say, I don’t know bind and unbind, but I know live and die, and I know on and off.
In this figure, we can see that most of the things in the collection are useless, while the node operations are definitely useful.
The fourth step is to go back to the source.
When I have an idea of what a whole body of knowledge is, I need to make sure it’s accurate. A lot of knowledge, there’s a lot of controversy in the community about who to trust. That’s a problem. My answer is to go back to its origins, to its original discussion and definition.
Have a real case, this concept is closure, once we understand a lot of people are wrong, the closure and the concept of the scope to confused, think closure is a function of the execution environment context, but there is one called hax (many people should know him, haha), he was questioned about this, think closure is function. So I checked out the concept of closures.
We all know that wikis are inaccurate, but there’s one section of the wiki that’s probably not too problematic: history. Here’s the history of closure:
And from this history, I found a name, Peter J Landin, who came up with it, so I went to see what he actually said, so I went to Google Academic, and I found his article, right
Sure enough, we found it, so we looked at the original document
This definition, which corresponds to closures in JS today, is slightly different, but it certainly contains two parts: the environment part and the control part. So, in essence, a closure is the function corresponding to JS, whereas previously, the common view was that closures only contain the environment.
So this process of tracing back helps us really figure out what’s right and what’s wrong.
In addition to the wiki-Google Academic search combination, mailing lists and Github submission histories are also great for checking out the history of concepts and technologies.
And finally, the process of building a knowledge system that I’m talking about is constantly accepting new knowledge, challenging and questioning old systems, overturning and rebuilding them, and each time you cycle, your knowledge system becomes stronger and stronger.
The following part is about ability building.
In fact, ability training is very important, but actually speaking, the content is very little. There are only two things: textbooks and training.
As for knowledge learning, I advocate setting up our own system rather than trusting books, but for ability cultivation, I hold the opposite view. In my opinion, it is difficult to set up a system of ability by ourselves, and textbooks are needed to guide it. This is due to their complexity and speed of change.
If you want to cultivate your ability, you need to find classic textbooks to learn, such as introduction to algorithms and The C++ Programming Language, which have not been out of date for decades.
Notice I’m using a textbook here, not a book.
The biggest difference between textbooks and books is that there are no exercises.
In my opinion, the most difficult books can be read twice a week, but not textbooks, which must take months of reading while doing exercises.
So we talked about training.
In fact, there is a fact that very few people are still able to train after working. For example, I have been working on my own programming skills for 7 or 8 years without making any progress.
The training should be systematic (textbooks are needed) and active, which are indispensable. Some people may think, I really work very hard and have to work overtime every day, but in fact, any passive pain can not bring progress to people, but your pain may bring more income to the boss.
If you’re faced with a difficult situation, you can choose systematic training to improve yourself, but for most people, you might prefer a workaround: creating habits that make work more challenging.
There are many theories about this, notably Noel Tichy’s psychological comfort zone, learning zone and panic zone. Choose a job that challenges you and tackle it head on.
There’s a joke going around in tech circles about a guy who works for three years, but has only one year’s experience because the next two years repeat the first year’s work.
So what we have to do is never to repeat the work, and when you feel that your job is getting more and more comfortable, less and less risky, you should be on alert.
Although training is a very difficult thing, in fact, we do not need to worry too much. Despite the talk of “10,000 hours of training” everywhere, the recruitment threshold of major companies should be stuck at the level of hundreds of hours of training in my opinion. So I say, 10,000 hours is too long. Seize the day. Hope to see you become a better front end, do better themselves.
That’s all I have to share.
– – the Q&A – –
Q: Ms. Winter, you mentioned building a knowledge system. I think the first difficulty many people encounter at the very beginning is how to build a knowledge system. They don’t know what should be in the tree. Can you give me some advice on where to start? Winter: Find clues first. The first clue is to help you find the basis of your knowledge system.
Q: Front-end technology to achieve senior engineer, then go up how to develop, what professional skills should be mastered? Winter: For senior engineers in general companies, I think the programming ability is better, the architecture ability is a little, and the engineering ability may be just started or not, which is the standard. In the future, we should focus on developing the latter two abilities.
Q: Is it the key to knowledge and technology when we encounter a problem by learning from the point and the pasta? Winter: Yes, but the key points are two points. One is that the points should be sufficient (what I call clues), and the other is that the learning should be accurate, which is the process of tracing back to the source I introduced.
Q: With so much front-end technology coming out these days, how do you decide it’s worth learning or paying attention to? Winter: It’s very simple. I judge by my knowledge system. I also have a system for the whole front end.
Q: Where does Ms. Winter begin to cultivate the ability of front-end algorithm? Winter: Any algorithm textbook exercises, do it once, you will definitely become a community champion, algorithm expert, must be much better than me, at least the introduction to algorithm exercises, I did not do down.
Q: What do you think of native versus framework learning? Winter: Both native and frameworks need to be studied. Native is a must, but at least at the current level of native, any larger team will need a framework, either build it yourself or use someone else’s, again depending on your body of knowledge.
Q: Mr. Han, do you have any experience in team leadership to share? Winter: The topic of leading people is a little big, and IN fact, I am not an expert at this point. My personal style is more focused on the growth of people themselves, so the development of the people I led in wirelessness is good, but the results obtained by the whole team are not good.
Q: What do I need to learn and improve in developing front-end architecture capabilities? Winter: again, go to the classic textbook, object-oriented analysis and design, and the last chapter of the TC++PL.
Q: Ms. Winter, how do you quickly master a new front-end technology? React and its related redux and ReactNative, as well as Webpack and other related tools, seem to have a lot of knowledge. How can I master it as quickly as possible? Winter: I think is not large, these things are actually Native to play the rest of the ten years ago, for instance the MVVM, is about 7 years Microsoft architects out, you will suddenly feel large amount of information, knowledge system appeared before you must be a bigger gap, just share didn’t say this problem, sometimes, you give yourself to stick a label, such as I’m just a front end, But knowledge is not an island, and other fields are sure to infiltrate, so take this opportunity to see how UI architecture has changed over the past decade and you’ll be able to predict the future.
Q: yesterday I saw the news that web development will no longer rely heavily on JS, any language can be used to develop web, and the performance is higher than JS, what do you think of this? Will JS be dead in a few years? Winter: This I agree, but I think may be slower than you might think, and JS won’t decline, purely from the perspective of the programming language JS is rough, but for now, the development of JS TC39 for the work of the form to be far more advanced than any other language, so it will rule the web for a long time, may also be sinking in the future, It is also possible that JS will become a completely different language than it is today. Of course, the future is hard to predict.
Q: People like me who used to move from Android to the front end. I started with ja directly. Then write the company’s cross-platform framework. And then build on JS, expand on things like Node, and then look at the front end. Learn CSS, etc. But now there will be a bottleneck, that is, knowledge is more extensive, but not fine. I have written Unity games and front-end skills. I can write my own framework. However, I have a fatal weakness in algorithm. Do not know should break through from that aspect! (At present, I am ready to break through CSS first, and then accumulate algorithms, I do not know how to do so? Winter: Actually, I think you can’t run either way, so don’t worry too much. People have limited energy and time, do what you think you should do best, don’t make excuses for yourself, saying that there is no need to learn.
Q: What do you think of the big front end, full stack engineer today? Winter: This is the inevitable result. The purpose of division of labor is to make you specialize in the front end, not to make you not to end the end.
Q: With so much complexity and rapid change in the industry’s front-end technology, at what stage does it become easy to simplify and stabilize? What are the characteristics of this stage? Winter: Should be with a few years ago now, I think the front end of the native is similar, so the development of the native can predict the future of the front-end, move before it is equivalent to the wave, is the development of the underlying API, API about, estimation is the development experience of the competition, wait to appear development experience, can a stable, But at the current speed of industry development, it is estimated that a new wave will start again…
Q: I have been working on the browser side for a long time, but recently I have been working on the server side through NodeJS. I feel that I have encountered a lot of difficulties in doing this. How do I improve my system? Winter: This question is a little difficult, because I have no experience in the server side. It seems that there is no systematic information about the server side technology, and it is all in the hands of major companies. Therefore, I think it might be more reliable to learn their server side technology in a big company. Even as a front end, I personally find the service side of Ali very rewarding.
Q: If your current job is cutting pictures and working overtime with no time to study, should you consider changing your job? Winter: To be honest, I have never met anyone who is so busy that they have no time to study. There is usually some time for fun and fishing, and even during the 996 period, there are still many opportunities for self-improvement. Assuming it’s true to this extent, my answer must be to leave as soon as possible, not to mention growing, the body can not stand ah. Of course, hard degree and salary are in direct proportion to the general, affirmation should sacrifice some of income, but I personally is impossible to choose beyond their ability so much post.
Q: The front end is getting wider and wider. Do you still need to be omniscient? Or do you focus on developing in a certain direction? Winter: It can’t be omnipotent, even those C’s in the 1980s… You still have to specialize in a few technologies and mix them up to make business sense.
Q: ask the teacher, for a novice front-end should be how to face thousands of front-end world, it is easy to become confused in more choices! Be focused or be well-rounded? Winter: I think so. If you have feelings, you should specialize. If you want to make money and gain social recognition, you should combine several skills, but it is impossible to be comprehensive…
Q: Ms. Winter, I feel that the ceiling of the front end is not too high, and it is difficult to catch up with the back end in the front end of ordinary companies. Facing this situation, should I learn some knowledge of Java or Node to touch the back end, or deepen the knowledge of the front end and join a big company? Winter: Salaries are determined by people, so when you move to another job, you will be in the reverse grade according to your salary, not in the reverse grade… It’s an industry rule.
Q: does the teacher recommend reading the source code of the framework? Look at the source code what good method is usually easy to see dizziness? Winter: I don’t read the framework source code because I don’t think they’re written well.
Q: If you are not familiar with the backend, you should be familiar with Java PHP Node. Winter: Choose whatever your company uses, or you’ll cry, believe me.
Question: Mr. @Winter, how can I improve my engineering and architecture abilities without a tutor or the company’s size? How can I improve these two abilities by self-study? Winter: As I share, I still have to find teaching materials. If I don’t study systematically, both my teacher and my company are nothing.
Q: Quick question, now that the front-end architecture has moved from MVC and MVP to MVVM, how will it evolve in the future? What are the weaknesses of the MVVM architecture? Winter: I can’t answer this question. The creators of these architectures are all epoch-making masters. I think I can only learn from them, and I may not be the next master. MVVM is by far the most perfect architecture I’ve ever seen, and I can only see it from a usage standpoint. The biggest problem with it is that it is difficult for the entire team to understand and implement it.
Q: What are the general channels for going back to the source of technology as you mentioned earlier? Winter: Look at my share. It says, first go to Wiki to find the history, and then Google the original paper. Mailing lists, code submission records, all good stuff.
Q: how to treat the current stage impetuous front-end environment? Winter: In every era, people feel impetuous, because in fact, there are many great and low-key technical solution creators who are working hard and refuse to speak out.
Q: Ms. Winter, under the circumstance that front-end development is now extremely dependent on framework, is it still necessary to start learning from the most basic JS methods and browser interfaces? In terms of the use of jQuery, it can be said that many JS native things are subverted, learning native usage may be not conducive to learning jQuery and other frameworks. Winter: Well, I think it’s nonsense. Does JR dare to talk about subverting the original? And when you really do more senior, you will find that the so-called API style of this thing, there is no workload and practical significance, native is indeed cumbersome, can not go well, but in my opinion, it is a little better than JQ. As to say that after learning the original is not conducive to learning JQ, that shows that did not really learn to understand.
Q: Is it just a feeling that there are a lot of people rushing into the front end, people doing things or a few? Winter: Choose to actually do something…
Q: A few days ago, I saw that H5OS has been deployed in the market, and there is also the emergence of Chinese forces. What is your opinion on the mobile phone system deployed by H5 in the future? Can it really compete with Android? Will the language development of Google’s Sky have an impact on the front-end technology? Winter: Forget it. It’s not like there isn’t an H5 on Android. The OS competition is proprietary technology.
Q: For mobile developers, especially many domestic browsers, how can compatibility tests be carried out efficiently? What API strategies can be adopted to avoid some pitfalls? Winter: Well, it’s quite complicated. Our practice is that the test should be divided into two stages: developing and debugging models (about three or five types) and releasing models (more than 30 types), and then calculate an icanuse list according to caniuse data, and the architecture team will decide which ones can be pollyfilled.
Q: Ms. Winter, for many enterprise front-end frameworks, the old frameworks will soon become the burden of future reconstruction. How to keep the advanced nature of enterprise front-end frameworks and adapt to the future development? Why did Tmall adopt React? Instead of improving on the original framework? This kind of wholesale replacement in the enterprise is costly. Winter: In fact, it is a false proposition to maintain the advanced nature of the framework. Enterprises have no need of this, and only weigh the advantages and disadvantages to choose the framework. I know something about Tmall. This is basically a technical debt that has to be paid. The previous MUI based on Kissy was too heavy, and the cost of modifying it was more than pulling it down and starting from scratch.
Q: mobile terminal M page development, there is a scientific and reasonable front-end architecture, particularly high engineering website recommended? Winter: Well, mobile taobao should be better, but there are still many old pages and pages of other BU, so I can’t do anything about this.
Q: @winter I most want to front-end technology back to win32 era drag control visual development mode, but even Microsoft is to throw ASP. Net, ASP MVC throw again, when to return to the Tang Dynasty ah? Is it always over? Winter: Well, I don’t think it’s the lack of drags and drags, but the CURRENT UI, which is basically automatic layout, not fixed location, so I think the IDE is lazy, and just in time for the new technology to come out, the competition is not about developing experiences but about features, which is where the real money is.
Q: Mobile Taobao has noticed that the front page is fully scrolled by touch, which is particularly slow when some android native browsers don’t have good translate support. Has Taobao abandoned the introduction of these browsers? Winter: This decision is optimized according to the proportion of models. Most models should have better experience than native ones, if not, they will be downgraded back to native ones, but some low-volume phones will not be managed.
Q: What do you think of the new grammar in ES? Progress or chaos? Winter: Of course it’s progress, but if it’s not properly used, it will definitely cause confusion, so it will be more challenging for the team leader and architect.
I long-term maintenance of the front public number welcome your attention
All that front-end stuff
