Three levels of front-end engineers: My Advanced Path and triple advanced

Three levels of front-end engineers: My Advanced Path and triple advanced

! Export v2-fd52450adf6c98b518618bdc74f1520e_r.png] (http://upload-images.jianshu.io/upload_images/8373224-e56f02b3d4e813e2.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)
The purpose of this article is to build a cognitive model about the growth process of front-end engineers and analyze the relationship between the Capability Structure of Programmer, Developer, and Enginner and the growth process of engineers from their own perspectives, I would like to share it with you and hope to learn from and inspire the beginners. It should be noted in advance that the different names of engineers used in this Article do not need to be classified or tagged by engineers, because the growth process of engineers is continuous, and those who like to explore the best of the world should make a detour on their own.

# Programmer or engineer
There are many names for developers, such as programmers, developers, engineers, and even coders, how many other terms does "coanon" mean that insiders are used to laugh at themselves? On the surface, it seems like software development. What is really important?
I have to say that it doesn't matter what it is, whether it's self-claimed or what it is, what education qualifications or years of work experience do not matter. What really matters is what people have. So since the name is not important? Why do we need to talk about it? The true significance of the name is that it allows me to actively broaden my horizons, constantly light up my skill tree, and constantly accumulate and improve my career development path.
What is the Triple Realm of engineer work? What are the relationships between the names of programmers, developers, and engineers in these three realms?
# Important realm: Make things
Putting things into practice is the company's basic requirement for employees. The vast majority of entry-level students are in this realm. People in this realm can be called programmers ), for Programmer, he usually needs to tell him what to do and how to do it. What he needs is execution and basic skills. The skills here include: basic programming skills, at least one programming language, the familiarity with this language should at least allow him to solve his basic needs. Specifically in the front-end field, the requirement for Programmer is to be able to use JS, CSS, HTML, and be familiar with editors and browsers to fulfill basic requirements.
Take common WEB-side statistics as an example. To study the user behavior of key elements on the page, you need to add event statistics for some user interactions (more commonly called "tracking "), for example, click an event and submit a form event. If Baidu statistics is used, the tracking method on the page is as follows:
'<A onclick = "_ hmt. push ([' _ trackevent', 'checkout', 'click']);"> purchase </a>'

Or tracking in JS:
'// When statistics need to be sent _ hmt. push ([' _ trackevent', 'checkout ', 'click']);'

Next, we need to send a copy to Google Analytics for the same statistics as the business needs. The simplest and most crude solution is as follows: '<aonclick = "_ hmt. push (['_ trackevent', 'checkout', 'click']); _ gaq. push (['_ trackevent', 'checkout', 'click']); "> purchase </a>'
You also need to make the same changes in JS:
'// _ Hmt when statistics need to be sent. push (['_ trackevent', 'checkout', 'click']); _ gaq. push (['_ trackevent', 'checkout', 'click']);'

If a website has a small page size and a small number of statistical events, the change tracking may be easier. However, when the number of pages and events increases with the growth of the business, it is estimated that the programmer will bury the page and get cramps. At this time, Programmer will be unhappy, and it is very likely that the Boss will also be unhappy, because the tracking efficiency cannot be improved, and it is prone to errors. The clever Programmer will find that solving the problem on the surface is not enough. How should we break the game? (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)
# Important realm: do a good job
What capabilities can we do well? More familiar with basic technologies than (must exceed a large margin) to make things necessary; be proactive in business needs; Be able to provide robust technical solutions, A Developer can solve a type of problem at a time, instead of a problem, and know which solutions are unreliable ).
It is undeniable that Developer is an upgraded version of Programmer. In comparison, developers usually need to find their own solutions and implement them. In layman's terms, in the face of specific technical and business problems, developers can think of more solutions than Programmer. However, to achieve these two "more", efforts, time, and experience are required.
Of course, the advanced steps from Programmer to Developer can be accelerated. You need to compress your time to do more things in a shorter time. Note that the same things are not repeated N times here, if so, it is easy to see the embarrassment of three years of work experience for half a year.
Back to the tracking solution mentioned above, what is the problem with a simple and crude solution?

-First of all, code scalability is too poor. If the demand side needs to access self-built statistics in the future, the front-end workload will not be reduced, but it will need to be more careful when it is changed;
-Second, whether direct sending of statistics can ensure accurate delivery and whether there may be missed reports. Careful students will surely be able to think of this risk;
-Finally, JS events are not recommended to be written inline in HTML in the front-end code style. This is a typical example of dirty code;

How does Developer solve this problem? Clarify the essence of tracking code: Send statistics and specify statistical parameters. The send Statistics action is related to the Statistical platform to be accessed, and the arrival of statistics is also related to this action, this action has nothing to do with the statistical parameter. The statistical parameter itself is closely related to the node, and the action and parameter can be decoupled.
Based on this cognition, it is not difficult to design the following scheme to specify the parameter marking method in all places where the tracking is required, use the data-event-* parameter to mark the event name, event type, and additional parameters:
'<A data-event-name = 'checkout' data-event-type = 'click'> purchase </a>'

Then, listen to those nodes at the page level and send the statistics code at the right time. The simplified version is as follows:
'''
// Send the same parameters to all connected statistical platforms. If the platform is different, const sendEventLog = (name, type, param) => {
_ Hmt. push (['_ trackevent', name, 'click', param]);
_ Gaq. push (['_ trackevent', name, 'click', param]);
};

// Handle click events. Other events can be handled similarly.
$ (Body). on ('click', '[data-event-name] [data-event-type = "click"]', function (e ){
// Obtain the node const target = occurrence (e.tar get) where the event occurred );

// Obtain event attributes
Const name = target. attr ('data-event-name ');
Const param = target. attr ('data-event-param') | '';
If (! Name ){
Return;
}

// For link jump, separate logic is required.
SendEventLog (name, 'click', param );
});
'''
The method above discussed from Programmer to Developer is accumulation, so how to accumulate? The basic principle of my actions is: to make good things, you must first know what good things look like. On the one hand, reading more classic books and carefully reading high-quality articles is far more important than collecting them. Where can I find classic books and high-quality articles? This requires the establishment of its own information filtering mechanism; on the other hand, you must learn to search for problems, find more solutions, and then compare and integrate them.
I have to admit that it takes a lot of effort and accumulation to go from Programmer to Developer, but there is no end to the way forward. Let's talk about the third realm.
# 3rd important realm: never do things
The person who can make things absolutely can be called an Engineer. How can they be regarded as an absolute task? Taking statistical tracking as an example, we can understand the nature of tracking requirements and decouple log sending and tracking marking to achieve the ultimate of both. In reality, the source of tracking requirements is usually the operation and product manager, and all changes are driven by them. If they can be provided with tracking marks on the tool management page (idea keywords: XPath, microservices, and browser plug-ins are not described in this article.) This frees engineers from this trivial requirement to do more meaningful things, in this way, the collaboration between different employees in the Organization is changed and the efficiency of the Organization is improved.
To become a front-end engineer, you must first become an engineer. What capabilities should engineers have? To answer this question, we may think carefully about what is engineering, [WIKIPEDIA **] (http://link.zhihu.com /? Target = https % 3A // en.wikipedia.org/wiki/Engineering) is as follows:
> Engineering is the application of mathematics and scientific, economy, social, and practical knowledge in order to invent, innovate, design, build, maintain, research, and improve structures, machines, tools, systems, components, materials, processes, solutions, and organizations.

Simply put, engineering is the process of using knowledge to design, create, maintain, and improve tools, systems, processes, and organizations. Engineers are the primary role in promoting this process.
Engineers must first possess strong learning abilities and ** master the complete knowledge system **. The source of knowledge is not important, either from self-study or from school, in addition, the summary of production practices is far from enough to be confined to one programming language or several specific tools. There is no obstacle for an engineer to switch to a new language, A solid foundation of computer science is the cornerstone. Specific to the front-end field, basic data structures and algorithms, design patterns and turn into paradigm, network, JS, CSS, browsers, performance, design, software quality, maintainability, scalability, software Engineering (construction, deployment, O & M, monitoring ).
Engineers must also have good abstract thinking capabilities. With abstract thinking capabilities, they can quickly establish a thinking model for the system's operating mechanism and convert business problems in the real world into appropriate models, then use technology to solve the problem. Specific to front-end fields, such as the typical information architecture of front-end applications, state machines, stacks, and queues.
Engineers must also have good communication skills. The quality of communication skills determines whether you can accurately understand the nature of your needs and whether you can clearly present your design solutions to colleagues, the form of communication is not that important. It can be written text, whiteboard, Mind Map, or even animated demonstration.
Engineers must also have the balance and trade-offs ability to know where they only need to be made, where they need to be done well, and where they need to be done absolutely, because the essentials of engineering are trade-offs, finding a balance between business and technology is often overlooked by many people.
It is not a day's cold, and it cannot be achieved overnight as a reliable front-end engineer. It will take a long time to accumulate and accumulate. Will it end after arriving at this realm? Absolutely not. The biggest obstacle that hinders a person's advancement is his mind. It is still a sentence that never ends.