Three kinds of thinking that front-end engineers should possess

Source: Internet
Author: User
Tags css preprocessor
This article uses three dimensions: logical thinking, business thinking, and design thinking to match whether you are a qualified front-end engineer. Because front-end engineers are not only responsible for receiving information, collecting data, making responses, and so on, they should need to communicate with backend engineers, design engineers, and PM. Editor's note:This article uses three dimensions: logical thinking, business thinking, and design thinking to match whether you are a qualified front-end engineer. Because front-end engineers are not only responsible for receiving information, collecting data, making responses, and so on, they should need to communicate with backend engineers, design engineers, and PM. Therefore, team collaboration and coordination all need to consider more than code.

If you are a talented engineer (you can leave immediately), you can accomplish many tasks independently. you can be a strange guy, because I believe no one will admire you. But the reality is true. most people are not geniuses, and we are not alone in the workplace. we need teamwork, coordination, and cooperation, and we need to consider more than code.

Front-end engineers are not only responsible for receiving materials, collecting data, and responding. Of course, it is not wrong to only do this, but we need to communicate with the backend engineers, we also need to communicate with the design, and we also need to communicate with the PM. how can we do this is better for both parties?

Logical Thinking

When I started writing a piece of code, I thought about where it would be used and would it be used again? Will it change in the future? if so, how can it be changed? Although there are many changes in the webpage structure, there is also a basis, which can be estimated in advance. If there is no case, you won't "change". In many cases, you have to change the case while changing the case. you may even have to move the case. What measures do you have when changes and modifications are required? You need to think about this and establish it in a logic.

Usually professional designers design a webpage with high homogeneity and comparison, so code can be used repeatedly. So why do you need to learn to use CSS preprocessor (Sass, stylus, less) to write a Mixin or a variable? it will be very troublesome to use it at first, but you won't be able to go back if you use it, it not only improves your efficiency, but also increases your accuracy.

The world of engineers is like martial arts. everyone is practicing each other. every day, there are new creden。. everyone is curious and wants to become a martial arts master. This is also the potential motivation to improve your knowledge and professionalism. if you are not curious, you can read and understand too little things, and the logic will naturally not keep up with the times. Keep learning constantly to hone your logical thinking.

To some extent, logical thinking is your professional program capabilities. in addition to being able to write, it must be maintained and readable. When things are built on a good logic, the chances of errors will be relatively low, and people who work with you will be more happy.

One thing can be done well, that is, the master; the thing that can be done well and predicted in the future can be experts.

Business Thinking

PM, the boss, or the customer will ask you, "How long do you need?". if it is too short, it may not be enough. if it is too long, it is impossible, this is a question about how to answer the question. Sometimes, you need to change your position and think from the perspective of a third party. Our fulfillment level may be different from their fulfillment level.

We divide the details of the case into two situations: one is that you have experience and can predict the time; the other is that you have not done it or are unfamiliar with you, you do not have the basis for time estimation.

So it is predictable to propose a standard that is acceptable to them. for example, an App website requires a homepage and two buttons for downloading the app through a link. For the rest, you need to Research and then give a more reasonable time. It is very important to estimate how much time a case takes to complete, because you consume the time of a group of people, not your own (unless you do it yourself, or you are the boss ). If you make an estimation wrong, it will be postponed in the future. it does not matter much if you cannot do it. the most important thing is to solve the problem and propose your solution, what methods can be used to solve the problem.

Proposing a solution from another standpoint is helpful to things and helpful to the company or the customer. the customer will not care if you cannot solve the problem that the 20-column table cannot be seen on the mobile webpage, however, the customer is happy to hear you say that such a Table is not easy to read. you can use another display method. Customers do not really care about whether you use Rails or php (some are very concerned about it, and they pretend they understand it). they can shop and send texts.

Front-end engineers may be easily exposed to complaints from customers, so it is very troublesome to think about some things. If you are a netizen or customer, will you be satisfied with your website?

Design thinking

In many cases, front-end engineers are also designers, but many of them are front-end engineers and backend engineers. they cannot be separated from front-end engineers. Of course, the design I mentioned here does not really require you to create a picture or a complete design drawing.

It's not just what it looks like and feels like. Design is how it works.-Steve Jobs

The front-end design refers to how a screen or element is executed and created, moved or eliminated, and how the design works in different widths and heights and devices, it is your design thinking. how to make a designer's picture into a living webpage should you think from the designer's perspective, so that you can fully express the concept of the design drawing.

After receiving a design drawing, there was an "X" on it. I asked the customer what it was. he said "back to the previous page" and why "X" was returned to the previous page 」, this is neither a popup nor a modal. In addition, there are many different colors and sizes of "X", which respectively represent "delete", "close", and "slide down 」, this is an unreasonable design.

Design thinking directly affects the code structure and webpage structure you write, because you cannot see the focus of the design, and how to write it can achieve the effect that the designer requires, you have no way to organize your structures and elements, so you cannot splice the web pages. This not only greatly reduces your efficiency, but also does not make things consistent. A website may have several buttons that are supposed to be the same and the results are "very similar" but different, because you use several classes and different structures. You didn't think about design at the beginning.

What can you do?

  1. It's okay to do practical work. it's good to go to FB for a few minutes and you don't need to stay in love for too long.

  2. Make a website, play it on your own, give it to your friends, and ask their opinions? Ask a few more questions.

  3. Look at the design drawing and think about what you will do.

This article is from: kimix's blog

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.