The advanced path of front-end engineers

This article has been collected in the notes for a few years, and the author of the original text has no way to be elegant, so I want to delete it!
Looking back at it recently, I still feel that I have benefited a lot. I have compiled and shared it this time, hoping to enlighten everyone.

background

If you are just entering the field of WEB front-end development and want to try how deep the water is, read this article;

If you have been doing front-end research and development of WEB products for two or three years, and you are confused and cannot find a way to improve, read this article;

If you are a master of front-end development for four or five years, and there is no problem that can make you a lonely master, read this article.

foreword

The so-called genius is nothing more than mastering skills and completing work faster than ordinary people; as long as you find the right direction and supplemented with enough time, you can still set foot on the other side of success.

This article divides the WEB front-end R&D programming ability into eight levels, and each level lists the corresponding characteristics and methods of breaking the level. The highest point, but the mid-range of your current ability is compared with the level, so as not to make more detours), refer to the breakthrough method to break it.

The so-called level is just an attitude when you face the requirements: it can be completed, it can be completed perfectly, and it can be completed beyond expectations. Add solid programming skills with the attitude of pursuing perfection, that is your programming level.

Remember to be dry, the level is enough, and the things in that level will naturally understand. Enlightenment is enlightenment, it doesn't matter if you don't, just calm down and invest time.

(1) Getting started

Able to solve some problems level. With a certain foundation (such as the most common HTML tags and their attributes, events, and methods; the most common CSS attributes; basic JavaScript programming capabilities), they can complete some simple WEB front-end development needs.

For example: delete a specified character from a string.

var str = "www.baidu.com/?page";
str = str.replace('?page', "");
console.log(str);
str = str.substring(0, str.indexOf("/"));
console.log(str);

First of all, don't criticize the right and wrong of the code, after all, every programmer has such a process;

Second, these two pieces of code are not at all wrong in this instance, there may be flaws, but they solve the problem (delete the specified characters), which is characteristic of this level.

Another example: Calculate the current day of the week on the system.

var str = "";
var week = new Date().getDay();
if (week === 0) {
    str = "今天是星期日";
} else if (week === 1) {
    str = "今天是星期一";
} else if (week === 2) {
    str = "今天是星期二";
} else if (week === 3) {
    str = "今天是星期三";
} else if (week === 4) {
    str = "今天是星期四";
} else if (week === 5) {
    str = "今天是星期五";
} else if (week === 6) {
    str = "今天是星期六";
}

// 或者更好一些
var str1 = "今天是星期";
var week1 = new Date().getDay();
switch (week1) {
    case 0 :
        str1 += "日";
        break;
    case 1 :
        str1 += "一";
        break;
    case 2 :
        str1 += "二";
        break;
    case 3 :
        str1 += "三";
        break;
    case 4 :
        str1 += "四";
        break;
    case 5 :
        str1 += "五";
        break;
    case 6 :
        str1 += "六";
        break;
}

console.log(str);
console.log(str1);

Advanced Path

Read through every method/property in coding help manuals like JavaScript, HTML, CSS, etc. several times! Only by laying a good foundation can the future road go smoothly. Refer to these help documents and strive to write flawless code.

These coding documentation suggestions should not only be read in the entry-level improvement period, but also should be read when you break through at each stage in the future. The most basic things are often the most powerful things, and sometimes they can bring you unexpected gains.

(2) Go to the hall

be able to solve the problem correctly. Whether you do it by searching the web, or by modifying some off-the-shelf code (jQuery/Dojo/Ext/YUI) cases, as long as you can complete the requirements without errors.

Also take "delete the specified string" as an example:

var str = "www.baidu.com/?page";
str = str.replace(/?page/, "");
console.log(str);

Merely solving the problem is no longer a problem for the stage of "advancement", and the solutions given at this level cannot be full of loopholes.

Take the above code as an example: Although the first parameter of the replace method can support strings, the best type is a regular expression.

Take another look at the "What day of the week today is" example:

var a = ["日", "一", "二", "三", "四", "五", "六"];
var week = new Date().getDay();
var str = "今天是星期" + a[week];
console.log(str);

Compared with the "entry-level" code, whether it is in terms of code volume, code efficiency, code elegance, and code ideas, the date processing code at the "dignified" level is much better.

Advanced Path

Although this stage can give the correct solution to the problem, it is not necessarily the best solution. How to get the best solution? The first is to accumulate various solutions that can solve the needs, and then verify each solution and choose the best one among these solutions. Therefore, the advanced road at this stage is to "walk thousands of miles and read thousands of books", and accumulate various solutions for various needs.

You can immerse yourself in professional forums (blue ideal, worry-free, CSDN), read all the FAQs and posts; you can open the search engine and exhaust all the search results. Build your own test environment to verify the code one by one: to figure out the intent of each piece of code, to compare the differences between each piece of code. These two paths can allow you to quickly complete the original accumulation. When you face most of the needs, you can say that I have done these problems before, and then you will be promoted naturally.

(3) Entering the room

The strongest code knows all the various solutions that can solve the requirements, and can choose to use the best solution to meet the requirements. This level is basically the workhorse of code in product development programming. Every move given, every move is a unique move.

Taking the example above as an example, can you tell the difference between 1, 2, and 3, and how does it apply in that context?

var str = "www.baidu.com/?page";
// 1、字符串剪裁
str.substring(0, str.indexOf("?page"));
// 2、正则表达式
str.replace(/?page/, "");
// 3、字符串分拆、合并
str.split("?page").join("");

There are many ways to solve the problem, but the programmer should choose the best. The above code is the best "regular expression" in terms of code volume; in terms of code execution efficiency: "string trimming" method is the highest ("regular expression" in Chrome is the most efficient), and the split method is the second; In terms of scalability, the "regular expression" method is the best. The specific use of the program depends on the specific needs of the environment.

In the "room entry" stage, the programmer should be able to answer affirmatively: For this requirement, my code is the best code.

Take "what day of the week today is" as an example, do you dare to say that the code at the "class" level is the best code?

var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

Compared with the sample code of "Dengtang" level, what does the above code give you? Programmers strive for perfection. The pursuit of the "room entry" level is the perfection of every move and every style.

From the perspective of WEB front-end programming, many people can reach this level after about 2 years of hard work, but the programming ability of a large number of people stops there. Either limited to the singleness of product requirements, or limited to the time urgency of requirements development, or limited to human inertia, it is enough to be able to perfectly solve the current requirements.

Due to the long-term technical platform period, the technology cannot be improved, and usually engineers at this level will be relatively dry. Some achievements in technology; or the pursuit of personal breakthroughs; or the pursuit of freshness brought by product differentiation; or just want to change their mood; therefore, many engineers at this level often change companies.

Avoid arrogance and impatience:

Don't be complacent about being able to write beautiful code;
Don't think that when others "respect" you as "hero", you call yourself "hero";
Don't think that you have accumulated some proud code to become framework development.

Details determine success or failure, and an excellent plan does not guarantee ultimate success.

Advanced Path

The path to progress at this stage is:

Don't be impetuous; you are no longer led by needs, but you are led by needs. Pay attention to details, and pay attention to details that are not explicitly given in the current requirements: differences in code performance, differences in running platforms (browser), implicit extensions of requirements, backward compatibility of code, etc.
Read through the HTML/CSS/JavaScript help document a few more times.

I suggest that engineers at this level do a WebTreeView control, which requires a total number of 10,000 nodes to operate smoothly. Your promotion path is in the coding process of this control.

(4) Into the micro

The strongest solution. You can walk in front of the requirements, comprehensively consider all aspects of the current requirements, those that are not directly proposed, those that are not currently available but may be available in the future, etc., as well as the unspoken rules of front-end programming, and give the optimal solution. One move wins ten thousand moves.

var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0

I've listed all the possible scenarios in this string:

var a = [
    "http://www.xxx.com/VMpn=?pn=0", // pn= 可能出现在 ? 前
    "http://www.xxx.com/VMpn=?pn=", // URL里允许pn 值为空
    "http://www.xxx.com/VMpn=?pn=0&amp;a=1", // URL 里可有多个字段
    "http://www.xxx.com/VMpn=?a=1&amp;pn=0", // 可能排在最后
    "http://www.xxx.com/VMpn=?a=1&amp;pn=0&amp;pn=1", // 可能有多个 pn 字段
    "http://www.xxx.com/VMpn=?a=1&amp;pn=0&amp;b=2", // 可能在中间
    "http://www.xxx.com/VMpn=?a=1&amp;pn=0&amp;pn=1&amp;b=1", // 可能在中间成组
    "http://www.xxx.com/VMpn=?a=1&amp;pn=0&amp;b=1&amp;pn=1" // 可能零星分布
];
var reg = /((?)(pn=[^&amp;]*&amp;)+(?!pn=))|(((?|&amp;)pn=[^&amp;]*)+$)|(&amp;pn=[^&amp;]*)/g;
for (var i = 0; i < a.length; i++) {
    console.log(a[i] + "n" + a[i].replace(reg, "$2"));
}

At this stage, you no longer pursue one trick and one style. For you, it is not to use some innovative tricks to solve your needs, but to give a mature and stable solution to solve the problem from the root. Your code may not be optimal for a current requirement, but your code is the best code for this type of requirement.

Advanced Path

Many WEB front-end R&D engineers will enter a bottleneck period after working for 3-4 years: product development requirements are a piece of cake, and there is nothing new to challenge; strange problem-solving methods in code development have been tried. Without challenging problems, without the passion for exploration, and without the motivation to rise again, 80-90% of those who have finally passed the "room entry" level will stop there. Or change to be a technical leader, or to another field, or to change companies.

Where is the way for these people to ascend?

At this stage, relying on the accumulation of skills and quantity has no effect. The road to breakthrough will be explained in detail in the fifth layer "Butterfly". I suggest you focus on programming theory at the end of this stage: object-oriented/process, code organization Form, compilation, code specification, other framework design, etc.

I suggest that engineers at this level do a WebEditor control. It does not require complete functions, but the module division, code organization, and programming ideas in the control are in place, and a systematic solution is given.

(5) Butterfly

Reborn from the cocoon, this level focuses on the programming language itself, and no longer cares about product requirements. What is a cocoon? Product demand is the cocoon. When one move wins ten thousand moves, and you are trying to meet the needs of the world, if you are still stuck on demand development, you are confined to the cocoon without knowing it. Either grow old silently in this cocoon, or break out of the cocoon and gain a new life.

Or take the old example of "string trimming":

function escapeReg(str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
}

function delUrlQuery(url, key) {
    key = escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return url.replace(reg, "x241")
}

// 应用实例
var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0
delUrlQuery(str, "pn");

Is there any difference between this code and level 4 "Into the Micro"? There is not much difference in code implementation, but there are essential differences in terms of thinking:

It is no longer a matter of fact and a headache for doctors, but an abstract theorizing of a class of problems, and one trick breaks ten thousand tricks;
With the concept of encapsulation, it is no longer starting from scratch every time, but standing halfway up the mountain and starting to climb.

In the WEB front-end R&D team, there are also a large number of people who feel good about themselves at the level of "Entering the Room", jump directly to "Butterfly", accumulate their own code base, and abstract the problem. But there is no foundation, lack of strong stamina, even if it can break the cocoon, it will not be able to withstand the wind and rain. An immature architectural design does far more harm than good to team development. Examples of this are common in the industry. Don't pull out the seedlings to encourage growth, don't think about running if you can't walk, consolidate the foundation, grow naturally, accumulate a lot, and break out of the cocoon powerfully.

Advanced Path

After you have accumulated from primitive accumulation, accumulated wealth, and emerged from the cocoon, you should no longer focus on one trick, one project, and one module, but should be a kind of thinking and a theory. There are several steps you can take to break through to a higher level:

Look carefully at the HTML/CSS/JavaScript interface help documentation several times;
Choose a strong language (C++/C#/Java, etc.) to observe and understand the organizational structure and language design of these languages;
Take a look at prototype chains, chain syntax programming, generics, interface programming, DOM remotes, and more;
Carefully read the design documents of mature WEB front-end development frameworks to see why they are designed this way.

(6) Heroes

The heroes mentioned here are not the "heroes" that everyone touts, but the worthy masters. People at this level are fully capable of writing front-end development frameworks of the same level as Bindows/jQuery/Ext/YUI/Dojo. Apply mature development framework to guide and solve problems.

// 库文件 /mz/string/escapeReg.js
mz.string.escapeReg = function (str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
};

// 库文件 /mz/url/delQuery.js
/// include mz.string.escapeReg;
mz.url.delQuery = function (url, key) {
    key = mz.string.escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return url.replace(reg, "x241");
};
// 应用实例 
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0
mz.url.delQuery(str, "pn");

It is a self-contained system, with a foundation and a theoretical height. Know why it's designed this way, and what kind of design is best. For example, this example could have a package like this:

// 库文件 /mz/url/delQuery.js 
/// include mz.string.escapeReg;
String.prototype.delQuery = function (key) {
    key = mz.string.escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return this.replace(reg, "x241");
};

// 应用实例
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0
str.delQuery("pn");

And why not use the following package? After "Zhiwei" and "Butterfly", you will understand.

Advanced way out

Taoism is natural, looking for opportunities for breakthroughs from the root. You can study HTML parsing engine design and implementation, JS parsing engine design and implementation, code parsing and compilation implementation in other languages, and so on.
Or publish some books. Books written by low-level people are either large copies, empty, or they are harmful.

(7) Grandmaster

This level of people has reached the realm of no tricks and no tricks. Problems in project development? No problem! Differences in running platforms? Fundamentally get it! Code specifications and development models have long been left behind. People at this level no longer focus on a front-end development framework, but should give the best theoretical guidance for specific environments.

People at this level should pay attention to the most reasonable system architecture to lead the progress of the entire team, and what kind of architecture design should be used in what kind of scenarios. Which model should be best for teams of 3, 10, 50, or 100 people? When you reach the master level, you can answer again.

Advanced way out

Every master is a mountain, a god in a field, but are you only content to show your strength to a group of people who are weaker than you? If you are still standing still, there will always be people passing by your leader in planes and spaceships, and the heights are extremely cold!
To break through this field, you must jump out of this field. If you want to break through the master level of WEB front-end research and development, then jump out of the WEB front-end, and there is WEB development on it. Even if you are the master of WEB front-end, what can you do without fast data response, high-speed network architecture, and graceful system support? Therefore, the road to breakthrough is to focus on the entire chain of WEB development.

(8) Ascension

In fact, strictly speaking, soaring is no longer the scope of the original field. In the field of WEB research and development, there is a very good title for this level: architect. Of course those "pseudo-architects" are another matter.

Summarize

One way, all ways. In other technical fields, you can also divide the grades according to "Introduction", "Dengtang", "Entering the Room", "Into the Micro", "Butterfly", "Heroes", and "Grandmaster"; the same can also be based on the levels I wrote here. [Advanced Road] to improve quickly.