How to quickly grow into a qualified web front-end engineer?

Grassroots knowledge: Html,css,javascript is basic; vue.js,angularjs,react is the mainstream;

Native is always the most core technology;

JavaScript advanced Programming is a must-have artifact.

The following is PS, the early front end of the majority by the art of conversion, so PS no problem;

Now the front-end is basically a professional area of training, basically do not understand PS; many small companies do not pay attention to the work flow, the PSD of a brain to the front-end processing transduction and labeling, waste development of a lot of time; UI advanced There are many plugins, such as sketch or something. The technique industry has specialized, that is their study distance;

Advanced: ES6,ES7, responsiveness, compatibility, mobile and PC-side differentiation, flex layout, aesthetics and other massive projects, and a variety of skills to improve their own development efficiency. Usually read more people write code, draw the advantages of others, improve the readability and maintenance of code;

To meet their own bug more summary, more thinking; high-level: Master Node,koa framework, MySQL database, and so on, to win the backend is basically the ultimate goal of each front end;

Not to be sure to do the backend, but to understand the back-end development logic, database design principles, is really through the programming;

Complete Workflow: Project Establishment--evaluation--Determination of demand--product prototype--design finalization--front-end development---------------------bug-- At the same time, according to the requirements of the application of technology selection, project Structure Division, the Division of requirements, complete project construction, of course, there are many can be automated building tools can save you a lot of time, now the front-end development is no longer just static web development, The rapidly changing front-end technology has made the logic and interaction of the front-end code more and more complex, more difficult to manage, modular development and pre-processing framework of the project into a number of small modules, increased the difficulty of the final release, there is no unified standard, so that the front-end project structure is strange.

Front-end automation is more and more important in the development of the whole project, but the novice should try to build a project 1.1 points, and so you do a few more projects feel that every time it is so annoying, naturally into the automated construction of the pit, after all, so that you can understand more deeply, why use automation to build ... ... For example, our main stack is vue, our most commonly used is VUE-CLI, automation tools have many choices such as Bower, Gulp, Grunt, node, yeoman, we should choose according to the needs of the most suitable for their own research.

Front-end is the team most should learn to communicate, the interface has problems and UI communication, data problems need and background communication, functional problems need and product communication, test when you mention bugs you also need and test communication ... (Heart plug bar)

The front end is the person closest to the user, the user to a website, the software most intuitive feeling is reflected to the front end, the interactive experience is the core point of the front-end project;

and UI communication, in the work we should not be passive implementation of the UI design, but should be rationalized to put forward their own ideas, or later rework is wasted on both sides of the time. For example, the design of general-purpose components, each out of the page will have a new toast hint, it is obvious that in the premise of a large number of development tasks, General unified message prompts to improve the development efficiency, without affecting the page interactive experience;

The front end should communicate with the UI to develop a unified common component, otherwise you will always write repetitive and can not improve the technical content of the task;

For example, you need to make a chart, use the Echarts, you can let the UI based on Echarts to design the style, rather than let him play there, because you never know how much creativity in the designer's mind, so save two people's time, There will be no embarrassment that he does well and that you cannot achieve.

If your relationship rises well enough, you can let them set aside time for you to try out new effects and experiences, you can use it, you can't change the design, and if the UI works with your innovation, a good product manager will consider everything you need to argue that demand is justified and not logically absent. In general, programmers and product managers are the most difficult to communicate, only to kill no love.

Because "This need is relatively simple, how to achieve your own fix, tomorrow demand on-line"

Remember that there is a joke:

Product Wang: Program Ape, shall we achieve an urgent need?

Program Ape: Please say.

Product Wang: According to the color of the phone shell, to achieve the color of the app launch.

Program Ape has been messy in the wind ... How much of this can reflect the spark of passion between products and technology.

The simple needs of the product manager, which in our view are impossible to achieve. And the programmer can't understand why the product manager wants to achieve this demand. So, what should I do with the product manager in the perspective of a programmer?

1. Deep understanding of the needs, the motives and reasons for the requirements we programmers will be asking why the product manager wants to dynamically implement the color of the app when it is activated based on the color of the phone case. Since you want to listen to the analysis, then do not rush to say their own conclusions-technology can not be achieved! Since there is doubt, then we will first solve their doubts.

2. Think about the product angle. What are we pursuing as programmers? Logic is correct, faster, and easier to scale. What is the pursuit of the product? To tell the truth, I did not think deeply about this problem myself. Standing on an inertial point of view can be thought of: why a product exists, his existence can solve what problem, his user experience is not good. These are the core values that determine a product. After all, the nature of work affects a person's thinking logic, so at this time, we can stand in the perspective of a product to think about every need, it is particularly important.

3. Do not let go of every detail as programmers must be deeply agree with this sentence. Because of a punctuation or type of error, it can lead to an unexpected bug.

Product managers in the design of a product, are from the general direction to think about the problem, the direction of the line is not wrong, the details can not be separated from the broad direction. That's what they think. But for the program, it is absolutely impossible. Because the logic of a detail often determines the overall direction. For example: there is a requirement that the user's work needs to be submitted for review before it can be seen by everyone. Can you detect any problems when the Product manager gives you the demand? Here are a few details:

• 1. After the user submits the audit, the user may not be able to edit the work again;
• 2. Whether the work will be reviewed multiple times;
• 3. Need not record audit history;
• 4. Whether the user works need to have version control, such as to produce the version, the version is how to produce;
• 5. After the approval, the user may not be able to modify the work, if not, then other people can not see the user work ... It's just a simple logic requirement! But the details involved are too much. We often do not write down when coding, because the demand is too vague, not refined to the point.

4. A different way of saying "cannot be achieved" cannot be achieved, which we must always say. But directly to the product manager, it's probably going to make the product manager crazy. Because we will make them feel that any demand they put forward, we can not achieve. But this is not the case, because there are conditions that cannot be fulfilled, such as lack of time. So we must first agree with the product manager's point of view ("can achieve"), and then put forward their own requirements to achieve what the conditions are. Because real-life product managers are not often stupid and often make unreasonable demands, we need to assess the timing of implementation in the face of demand, and this time is not so easy to assess accurately. (As long as you do your best to achieve the product demand, the product will be careful to treat your difficulty)

5. When faced with unreasonable demand, actively seek replacement solutions to take in the needs of the jokes, let us provide several app skins for users to choose, certainly more than the original requirements are easy to achieve, but also more in line with human. Say another story, there is a home smart home company, to realize the kitchen faucet, according to the human voice said water temperature several degrees, can reach several degrees. In other words, would you feel the difference between 40 and 45 degrees of water? And judging by the human voice, this involves the sound recognition system, how many languages do you want to be compatible with? In fact, I feel that switching around is very intelligent, there is no need to engage in so complex. So programmers need to find a way to be better and easier to implement. Don't take the product manager for granted. What we often say is: give him a more appropriate solution when rejecting someone else's plan;

6. Must follow the spirit of documentation at the time of development, we will often discuss the details with the product manager separately. But the results of this discussion are not documented in the product prototypes or in the requirements list. But after a few months, we ourselves tend to forget why we discussed such or such a detail in the first place. So the need for everything must be based. On the other hand, it also guarantees the interests of both sides, do not wait until the problem, do not know whose responsibility, and in this regard, programmers are often very disadvantage. 7. Have an artistic heart for your own program some people say that when a requirement affects code extensibility, it's the first thing you need to do, not change the code! To a certain extent, I agree with this statement. In my opinion, the program is an ideological work, to achieve the realm of art, from the function, experience and logic must be reasonable. Just like a piece of artwork, it looks natural! Because a piece of work that looks "ugly" must not conform to human logic and habits. In the end, it feels like it's going back to the programmer itself. In fact, to communicate with the Product manager, the most important thing is to understand that: we are solving problems, not in the manufacturing problem! Mainly hold this core, all problems solved generally and backstage communication not so much trouble, after the agreement good rules, generally speaking you are through the API to communicate, but when you debug the interface, there are some unknown, you feel not your problem, timely communication backstage is the most sensible.

Division of responsibility believe that everyone in this point is deeply touched, because the front end is the last level, all the requirements are in front of the hand into a specific product, so you can easily become back pot-man, resulting in the project extension of the situation there are many kinds of design picture, background data problems, product temporary change demand, If you can not prove that these problems cause the project to be postponed, this pot you must back undoubtedly, the only way is--verbal confirmation--nail notice to the responsible person to confirm-notify the superior, do not feel this trouble, the problem will be more troublesome than this.

Qualified web front-end engineers still need a lot of discipline, entry-level Web front-end engineers are not easy to achieve. To become a web front-end engineer, start with a web front-end course from the Http://www.zhihaijiangku.com library. The course combines project combat with career guidance to help beginners get started and jobs.

How to quickly grow into a qualified web front-end engineer?