A summary of Web front end knowledge system

1. Preface

About a few months ago, when I finished reading the book "WebKit Technology Insider", I suddenly had an idea. Want to put the entire Web front-end development needs of the knowledge in a view, the formation of a complete web front-end knowledge system, the purpose is to subvert people for the front-end only three chunks (HTML, CSS, JS) Understanding-To do the Web front-end needs more than these three chunks .

It's been a few months, but I have to get this thing out in two days because of a certain activity I'm going to attend. Do as you say. I started sketching in the office in the morning, and I had a mess of thinking about it.

　　

Do not be afraid, in fact, the knowledge frame below is more beautiful than the sketch, the sketch of the people when not seen.

All right, no more nonsense. Below please follow my blog's content, to see the Web front-end development in addition to the HTM, CSS and JS, there are still things you need step by step to master.

　　

Before you look at the content, take a look at the preview of the knowledge frame. The picture is too big to show, do not clear, can download the clear version here : Http://pan.baidu.com/s/1hqIUvUc (the picture and Xmind file with the whole knowledge system inside)

　　

2. Classification

All knowledge framework, that must be a structural manifestation, is a tree. Web front end of the knowledge point is very much, also very scattered, need several layers of structure to organize this system, otherwise it will appear very messy. So how to organize, who and who to put together? It's really worth thinking about, and you can think about it yourself.

In my summary of this knowledge framework, the first layer I divided into: theoretical knowledge, class library framework, coding development, operating environment . Such as:

　　

Now let's explain:

This chart is going to look up from the bottom up , why? -Because the following is the basis of the above;

• First of all, we need certain theoretical knowledge, whether you listen to others to teach, your own reading or on-line information, you need certain theoretical knowledge, every kind of program development, can not avoid.
• Second, with these theoretical knowledge, we can encode it--good--but, no one can resist the temptation of third-party frameworks and class libraries, such as jquery;
• Thirdly, with these theoretical knowledge and the support of our class library framework, we can actually encode it. You may think that coding development is not just writing code, what else? There are many paths in this.
• Finally, the purpose of the development process is ultimately to be able to run efficiently and stably in the appropriate environment, which of these things need us to do? Please look forward to;

3. Theoretical knowledge includes "soft knowledge" and "Hard knowledge"

"Soft knowledge" and "hard knowledge" everyone may feel unfamiliar words, in fact, I say that we can understand.

　　

• The so-called "soft" is can be used in the development of various programs, is the basic skills, internal strength, such as data structures, algorithms, design patterns, object-oriented and so on;
• The so-called "hard" is to be directly used in the development of this program. In c you have to learn C language grammar, at this time to learn Java useless. The hard knowledge we need for web front-end development is actually contained in three standards:HTTP standards, the standard of ECMAScript, and the standard of standards;

4. Talk about "hard knowledge" in Web front-end development

"Soft knowledge" of the content is very much, but also the focus of our study in the university (did not learn is another thing, graduation again bad supplement). We are mainly talking about the Web front end in this direction, so donuts, let everyone know that this knowledge also plays an important role in the knowledge system.

Just now, there are three criteria for hard knowledge:HTTP standard, Standard and ECMAScript standard , so let's talk about these three standards in one go.

4.1 HTTP Standard

Why do Web front-end to understand HTTP standards? -Because the browser is going to fetch the Web page from the server, the Web page may also submit the information to the servers, all of which have HTTP connections. Since the web system is linked to an HTTP link, you have to understand it.

　　

My opinion is: you don't have to be very familiar with the details of HTTP, but you need to understand some of the http things that are commonly used in web front-end development-the ones I've listed. Of course, I have a list of knowledge, the details of which you have to check (this article is about the knowledge framework, will not involve any knowledge of the details of the point)

As for this knowledge, it is recommended to check out the book "Graphic HTTP", which is easy to read, and I have seen it.

4.2 Standard

If you only know the Web front end of a standard, it must be the standard (as I understand it seems that most people really only know this standard). It's a lot of content to see www.w3.org/TR/this page.

Writing here reminds me of a sentence:the 2/8 principle--20% functions to meet 80% of the requirements . I think this sentence is very suitable for use here, we do not use so much in the development process at all. Instead, you have to understand the more things you usually use.

Of this knowledge, I think there is no need to explain too much, this is my article development said "three chunks" (HTML, CSS, JS). Now you have to know that they are only a part of the standard, and the standard is just a part of the Web front-end development knowledge system.

(not fully expanded, want to see the expansion of the diagram, you can download the attachment provided at the beginning of this article)

　　

On the basics of CSS, to introduce yourself to a previous series of blog: "CSS know how much"

4.3 ECMAScript

Abbreviation ES, write the full name too troublesome.

Some people may only know JavaScript, but do not know es--in fact, JS is based on ES, for the Web browser to do a part of the package (added DOM operation, BOM operation, etc.).

　　

As in these concepts, you may usually see in JavaScript, in fact, they are the content of ES. Only JavaScript inherits these features of ES, and JavaScript is widely used, so it is more discussed in JS.

Or that "2/8 principle". In fact, the content of ES is also very much, and update quickly, now all to ES6. But these are the most important concepts that I have listed. If you don't understand prototypes, closures, and scopes, it means that you don't fully understand ES, which is not entirely javascript.

In this self-volunteered before a series of blogs, you can refer to: "In-depth understanding of JavaScript prototype and Closure series"

5. Frameworks and class libraries

The theoretical knowledge required for web front-end development has been described earlier. How to practice it? --not to be reckless--and to go around the world to see which Daniel has made so much contribution to us.

Using these classes of libraries or frameworks can greatly improve your development efficiency.

　　

• First, jquery must be an indispensable tool for most web front-end developers. And I use jquery not only in the use of its API and plug-ins, I will write the jquery plugin myself, I will read the source of jquery, and understand the design of jquery ideas. If you can do that, please believe me, you will reap the unexpected effect. If there is a problem: how can you understand JavaScript's event system in the most thorough way? One of the best answers: Read a few times (may not understand) jquery about the event processing part of the source code!
• Bootstrap don't have to explain too much, the rankings from GitHub can also be seen on the road. Even the UI designers of our company are bootstrap.
• Fontawesome is the world's most powerful icon system. This is much better than the CSS maker icon, whether it's development, efficiency or maintenance. Icomoon.io allows me to customize my own icon files.
• Requirejs and Seajs This module definition system, also must be indispensable in your system. I have seen a tutorial, the lecturer said: Requirejs brings the second front-end technology change after jquery.
• Others, backbone, angular, react, are slowly beginning to play their value, and there is limited energy here-but they are important-you should at least try to understand them.

6. Coding development

To ask the Code IDE which strong, of course, belongs to Microsoft's visual studio! But even the latest version of Microsoft's vs is not a replacement for the development environment.

　　

If you specialize in web front-end, do not use VS, of course, choose Sublime. Do you write an HTML statement with a manual and one line? You need zencoding help, otherwise the efficiency is too poor.

In addition, for HTML, CSS, JS compression, merging, grammar check, file cleanup, copy these operations, you have to do it manually? -You need help from grunt or gulp.

In this self-starter tutorial "using grunt to build an automated web development environment," said the more detailed, suitable for beginners to learn.

If you have more than one JS code or file in your system, please select a suitable module definition specification--CMD/AMD

Use Git to help you with file versioning, and the simplest thing to do is GitHub.

Commissioning, testing, also have a special tool, all need to learn ...

--My goodness ... These words write to now write my hand is sour, don't say to learn this knowledge--never say our web front end is "Three pieces"!

7. Operating Environment

When the system is really in the running environment, when you feel finally finished, there are still several knowledge points you need to master. See:

　　

First of all, you need to know that although most of the web system is running under the browser, JS may be running in the node environment.

In a browser environment, the most important two points are: Web security and performance optimization. Need to be aware of the outline I have listed, if you want to know the recommended two book "White Hat Will web security" "high-performance website Construction Guide"

8. Other

These are all knowledge systems. If you want to be a qualified, leader-like program ape, in addition to knowing this knowledge, I think the following points are needed:

• Understanding Agile Software development processes (such as scrum) and project management knowledge (e.g., PMP) is a "soft" knowledge.
• To learn to communicate with others online (blogs, QQ groups, open-source projects), communication can let themselves see their shortcomings;
• To learn self-reflection and self-study. As I am now, try to summarize their own things, at any time to reflect on progress.

Original: http://www.cnblogs.com/wangfupeng1988/p/4649709.html

A summary of Web front end knowledge system