In the backend of the front-end Daquan WeChat public account, I received a lot of comments
-
How can I learn and improve the front-end development level?
-
What skill points are involved in front-end development?
-
Can you recommend classic front-end development technology books?
- ……
If you have similar confusions, this web front-end development skill stack is for you. Its goal is to make a reference guide for getting started and advanced in front-end development. At present, the overview part has been released, and a list of front-end development skills and various extended reading materials will be added in the future. If you have any feedback on this reference guide, please let us know in the comments. Thank you!
The following is the text
This article does not simply list the technology stacks involved in front-end development, but to explore the "secrets" behind these technology stacks, suitable for beginners and readers who want to understand these "secrets". If you only want to know the front-end development technology stack, please continue to pay attention to the front-end skill stack https://github.com/jobbole/web-skill-set
Opening:
工欲善其事，必先利其器。
出自：《论语·卫灵公》
Foreword:
Because the syntax of JavaScript is very simple, it's easy to get started. Basically, you can develop a project in a few weeks, but is that all of JavaScript? Obviously not! Many programmers who are new to JavaScript development will more or less continue to learn other technology stacks, such as: grunt / gulp, npm, requre.js / seajs and other auxiliary technologies; learning prototype / proto and other more obscure technologies Grammar knowledge; master design patterns such as MVC / MVP / MVVM; frameworks such as Backbone.js / Vue.js / React / AngularJS; libraries such as jQuery / Protorype / lodash.
doubt:
Some beginners mostly have this idea: I can write programs in JavaScript now, and they are online normally, and they are running well. Why should I spend extra time learning these technology stacks?
answer:
The above-mentioned technology stack is to make up for JavaScript's shortcomings when developing large projects.
doubt:
As the most important language in the field of front-end development, isn't JavaScript capable of the current large-scale project development? If we want to find this answer, we need to re-understand the past and present of JavaScript.
Past life:
JavaScript was used (in script form) to make up for the shortcomings of web development in the early days of creation. In that era, JavaScript existed as an auxiliary function of development languages such as ASP/JSP, and the frequently used scenario (one of them) was "form validation". Although the creator of JavaScript, Brendan Eich, has already "knowed" the future, he cannot stop the fact that JavaScript only took 10 days to create. (First edition) At that time, there was not a position specializing in JavaScript development. Front-end development pioneers put more energy on compatibility issues after the "Browser Wars".
development of:
Another impact after the browser war is to promote JavaScript to become an international standard, namely: ECMAScript (European Computer Manufacturers Association), which is used to describe the grammatical structure of JavaScript and promote its development. The former is just the realization of the latter. (Note: Another ECMAScript implementation scheme is ActionScript 3.0)
this life:
With the emergence of modern browsers like Chrome, the JavaScript parser (V8) behind it has greatly enhanced the execution speed/efficiency of JavaScript. (On the basis of V8, another great god, Ryan Dahl, invented Node.js, and developed a language that was originally only running on the browser side to the back-end development.) The birth of jQuery enabled the pioneers of front-end development to leave the "browse The quagmire of compatibility issues", I have more energy to think about the future of JavaScript. The increase in network bandwidth and the emergence of Ajax technology have enabled asynchronous update of web pages, which has greatly accelerated the exploration from traditional B/S architecture to C/S architecture. The success of Google Gmail has further promoted this technology to become a major project possibility. Eventually, SPA (Single Page Application) appeared, and the use of JavaScript to develop large projects has become a trend and standard.
Weaknesses:
Since ECMAScript promotes the development of JavaScript, even though JavaScript is a product of the last century, it is not difficult to develop a small front-end project using it. However, a large-scale SPA project often has n external reference libraries, dozens (or even more) js/html/css/pictures and other resources; multi-person participation/long-term maintenance, thousands of lines of code specialty. Obviously, these are situations that JavaScript did not consider at the beginning.
Features of front-end projects:
As described above, the technology stack makes up for JavaScript's shortcomings in the development of large-scale projects, so in order to analyze the characteristics of the technology stack more clearly, start with the problem:
一个大型的 JavaScript 项目通常需要解决哪些问题？
-
Management of external reference packages;
-
Project updates, iterations, and refactoring problems caused by too much code;
-
Many people participate and it is difficult to distinguish development responsibilities
-
Although the network bandwidth has been greatly improved, the page loading speed is still a problem;
- Excessive static resources (html/js/css/picture resources, etc.) lead to increased repetitive workload when going online;
Management of external reference packages:
JavaScript does not inherently have package management functions in other languages, but this has not hindered the exploration of our great front-end development pioneers. Technology stacks such as npm and bower have solved the package management problem for us.
Project update, iteration, and refactoring problems caused by too much code:
Since there is too much code, it is necessary to use object-oriented programming methods such as encapsulation, inheritance and other modern programming languages. Although JavaScript was not designed to solve these problems in the early days of its creation, Brendan Eich obviously foresaw the future, that is, the original JavaScript language included OO ideas. In other words, JavaScript is an object-based development language.
Although they are all object-oriented, JavaScript is not the same as traditional object-oriented. It uses a more advanced but obscure inheritance chain method. This is why we need to understand the prototype / proto technology stack.
Many people participate, and the development responsibilities are difficult to distinguish:
Due to the emergence of large-scale SPA projects, the page not only carries user behavior, but also brings back-end-led logic development to the front-end. Originally, "M" in MVC was "heavier" than ever before, so that at the "M" layer, a new framework theory was formed. Therefore, understanding and mastering design patterns such as MVC / MVP / MVVM became a necessary means, and the front-end framework became popular. Like other languages, the choice of ready-made front-end frameworks has naturally become a trend. The "design ideas" of these modern frameworks include novel concepts for front-end development, such as: React operating virtual DOM (Virtual DOM); simply practicing MVC theory Backbone.js; MVM style AngularJS, etc. Learning and mastering the front-end framework can better distinguish responsibilities, and the unified API of the framework realizes the possibility of long-term development/maintenance by multiple people.
Although the network bandwidth has been greatly improved, the page loading speed is still a problem:
Since SPA is a single-page application, almost all functions are included when the page is loaded, but users often only use part of them. Therefore, the limitation of network speed, the waste of bandwidth, and the waiting of users are another problem. "Modular development" is a silver bullet to solve these problems, and the theories of AMD / CMD have naturally become necessary knowledge for front-end developers, and requre.js / seajs is the specific implementation of these theories. Due to the characteristics of Http (scattered, small static resources are slower to load), merging/compression is another solution, and a new problem arises, namely the fourth problem.
Excessive static resources (html/js/css/pictures and other resources) lead to increased repetitive workload when going online:
When there are few such static resources, manual merging/compression is not a problem. On the contrary, when these resources are rising exponentially, the manual solution shows that it is not a good way. The introduction of automation solutions is imperative, and the practitioners: grunt / gulp / webpack need to be mastered.
Thinking:
Most of the above are technology stacks created by "unofficial organizations/developer communities". What is the official ECMAScript organization that promotes JavaScript development doing? Is the current "most in" JavaScript actually an outdated product?
The answer is of course wrong. ECMAScript has already announced its sixth version: ECMAScript 6 (officially released in June 2015)
ECMAScript 6：
Its most important feature (one of) is to include: Class (Native OOP) and Module (Native Modular) solutions.
in conclusion:
JavaScript development can be achieved without mastering these technologies, but mastering these technology stacks can make us separate from the "heavy/cumbersome" affairs and more "focus on business logic".
The mastery of the above technologies can enable us to better integrate into modern front-end development.
Conclusion:
If you see here, congratulations and welcome to the new world! ! !
Easter egg 1:
The knowledge points listed above are only part of the front-end technology stack, in addition to: debugging/testing, performance optimization, CSS pre-compilation methods, coding rules, SEO, mobile Web development, etc.
Easter egg 2:
Will everything be worry-free after mastering these technologies? Of course not. With the development of front-end development, one day these technologies will still not be able to satisfy development. Therefore, it is necessary to understand the theoretical logic behind these technology stacks.
Easter egg 3:
-
How to choose a similar technology stack?
-
Do you need these technology stacks for large projects?
-
Why do you still feel that development is slow after using the framework?
- After using xxx, did not actually solve my problem?
Want to understand them? , Please follow the front-end skill stack https://github.com/jobbole/web-skill-set
references:
-
ECMAScript is an object-oriented
-
ECMAScript 6 language description
-
ECMAScript 6 browser compatibility table
-
Browser compatibility issues link and browser wars
- Chrome V8 parser