This article is about 2500 words. It takes about 10 minutes to read it. If there are any mistakes, please correct them.
In fact, this article is not about how to avoid overtime, nor is it about how to be lazy, but some personal experience, how to use your working time effectively, so that you can finish the work during the working time, so as to reduce overtime. I will talk about the responsibilities of the front end and how to work more efficiently at each stage of a project from project inception to launch.
product
The general product will sort out the product requirements, will let the relevant personnel together to open the project launch meeting, tell us what to do, at this time the front end will pay close attention to the trend of the product manager.
Why the meeting to be held, I believe that all of you are party b company more (outsourcing, customized requirements, such as some saas system, including some of the big data platform company), is put forward to party a’s demand, because of some products, he is not very good technology, for some reason, promised to some requirements of party a, you need to combined with the actual situation, Tell the product how difficult it is for me to do this thing, which departments I need to coordinate, how long it will take, or even if it is impossible to do. For example, the need to export hundreds of thousands of data sounds very simple, and the backend will know that it is rare to have a batch of data. For example, if you go to CNKI to check a paper again, do you know why it takes a long time? Do you know why you can’t export the data once you check it again? More to the point, the product has to be able to judge the value of making the requirement, and calculate the value ratio of the requirement. One is, the demand not only the function of it is good to make so simple, but you do it, someone feel better, and pay for your product, is the true cow force, like a lot of advertising, the blind up the title, you go in, for three seconds to enter sage mode, that is not in vain for him to, made as well. So, the product is awesome, development is certainly not so tiring, overtime will be a little less.
In addition, after the requirements are established, I have never seen any requirements that are not changed. Some of them are cut, which is of course the best. Some of them are modified, and some of them are added, which is quite troublesome. Keep your eyes on the product as much as possible. When he says, “After this change, there will be no change, and if he changes it, he will put it on the next version,” you can rest assured.
Then there are more relevant to front end, psychosexuality, generally needs to come out the day before yesterday, your task is relatively easy, this time can get a shelf, or use a good shelf before, then in the interaction diagrams or prototypes, and probably write some page layout, logic, etc., later to save time, don’t design such as the blind.
Interface with the back-end convention to establish the field
This relatively simple, interface is agreed, was a get or post, or delete, such as the back-end return 2000 is what meaning, some custom to return to their consultation information, what do you want to the front-end data, let the back-end to you, is to link up front and back side, prevent future you finish, change the backend data, you front also follow to change, good company, The backend not only gives you fields, but also has detailed API documentation, and even a mock environment. You don’t need to worry about data at all, which is not too cool to develop. There is also a slight difference, including fields and documents, and front-end mock data. There are also online tools similar to mock (backup), and then the front and back end of the development of a joint tune. Most importantly, make sure that the API is documented, easy to maintain later, and reduces inefficient and frequent communication during development (some developers hate to have their thoughts interrupted while writing code).
design
Don’t let design takes too much time (time) as planned, why say so, because time is of the project manager to dead time, such as customer next month is going to use this function, 1 before the 15th of this month you project establishment, design it took you ten days, you develop + test is only 5 days left, so each department should be executed in parallel, edge design, and development. Design is usually need a long time to design, do you want to design good, I want to make a mobile terminal which a few pages, or a few components which give me the design first, because the design was developed which pages don’t know you is first isn’t it more comfortable, designer out of the figure, don’t immediately sent to the front-end engineer, with design, to find a product manager, What do you think of my plan? After the product manager nods, he will give the front end the plan. When the front end receives the plan, he must ask the design, the product has seen the plan, to prevent the design from changing the plan and throwing the pot to you.
After the design comes out, it is combined with the logic written earlier.
This is what the primary front-end, the intermediate front-end, and the advanced front-end all do. Cut diagram, up logic. But the results are not quite the same, and I’m going to say, don’t knock on the UI, think about a lot of situations where the UI doesn’t show up. Common such as whether to center, how the proportion, text beyond the situation. Page color, font. Mobile compatibility, such as Liu Haibing, full screen (designer wouldn’t give you the phone, or in accordance with the format of the i6), rolling load and on load, throttling, page rendering performance, and even some of the user experience, and some experience is, can only slowly to accumulate, to experience, the development speed is fast, the second point is, Some effects or special effects cost a lot, but in fact they can be negotiated with the design leaders. People may just want to do new things on impulse, which are not particularly suitable for this project, and some cases are just careless design, but it is difficult to achieve in the front end.
alignment
I think the joint test is actually a kind of self-test, to ensure the availability of the product, but also to prevent some back-end secretly changed the interface did not tell you, at this time you can find, the general joint test is counted in the development of the time.
test
Generally divided into test,beta phase,test and beta are just different environments, why do we have multiple environments, because medium-sized companies, more than one product, each site, related to each other, and different domain names, log in to a system, all the systems automatically log in, then sso. For a simple example, the Test environment can only allow cross-domain, using HTTP protocol, but beta can’t cross-domain, and upgraded to HTTPS protocol. You were fine in Test, but when you got to beta, it didn’t work, so this is necessary. Here, the front end needs to negotiate with the back end and even the operation and maintenance, how to configure static paths and routes to ensure the security of the application, and then write configuration files of various environments according to the results discussed, such as using gulp Webpack. This is important, otherwise you cut environment takes time, the test will be stagnant, must and ops to coordinate environmental related issues, cross-domain, HTTP HTPPS, cluster related issues, such as don’t every time the current environment test thoroughly, gg all change to another environment, personal feel test can save time on configuration environment. Also, try to expose problems in the testing phase, as few bugs as possible in the formal environment. Although I always say squeeze time, but at this stage, the pace should be slow, don’t rush the time, not test good test.
The project acceptance
After testing logic through, is representative of the project is available, immediately enter the stage of the project acceptance, acceptance into design (whether in accordance with the design of color value, margin values, responsive, adapter, etc.), product acceptance (according to the requirements document, bit by bit), operation or the demand side (the boss) acceptance, why do you do that? Because you can avoid being thrown in the face later.
online
This step represents that the project is almost complete, according to the above practice, there is probably enough time, finally, to check whether there are bugs, in fact, in this front end error probability is very small, even if there are bugs, it is usually only a bug that affects the experience, at least the function is normal. For example, I’ve been in a beta environment where everything is fine, but when it comes to the official environment, some areas are inaccessible to users, others are accessible, and 90 percent of the problem is the server operating the area. Online part of the front-end is generally considered browser cache that piece, as well as static resources uploaded to the CDN, is how to make the page quickly presented to the user’s eyes. Of course, if the user group is very large, you can choose the time when fewer people use it to publish.
monitoring
Generally, some loading problems, abnormal errors, user behavior and other data collection are monitored through buried points, such as Some API Performance onError of Google.
To summarize
Communication is very important. Product manager should not be used to Party A, project manager should not be used to product manager, and front end should not be used to design.
Promise me you won’t be a lick dog.