Self-Summary of the web Front-end Knowledge System [Welcome to add], web Front-end

Self-Summary of the web Front-end Knowledge System [Welcome to add], web Front-end
1. Preface

About a few months ago, when I had read the book webkit technology insider, I suddenly had an idea. I want to put all the knowledge required for web Front-end development in one view to form a complete web Front-end knowledge system,The purpose is to subvert people's understanding that the front-end only has three major blocks (html, css, and js)-There is much more to do with the web Front-end than the three major blocks..

It has been dragging on for several months, but due to a recent activity, I have to tidy up this stuff in the past two days. Just do what you say. In the morning, I began to draw a sketch in my office room, where I thought about it.

　　

Do not be afraid. In fact, the knowledge framework below is much better than that in the sketch.

Okay, no nonsense. Next, follow the content of my blog to see what else does front-end web development require you to know in addition to htm, css, and js.

　　

Before reading the content, let's take a look at the preview of this knowledge framework. The picture is too big to be displayed. You can download the clear version here.: Http://pan.baidu.com/s/1hqIUvUc (pictures and xmind files with the entire Knowledge System)

　　

2. Category

All knowledge frameworks must be a structural representation, that is, a tree. The web Front-end has a lot of knowledge points and is also scattered. It requires several layers of structure to organize this system, otherwise it will become messy. So how to organize and put who and who together? This is really worth thinking about. You can also think about it yourself.

In the knowledge framework I have summarized, the first layer is divided:Theoretical knowledge, Class Library Framework, coding development, Runtime Environment. For example:

　　

Next I will explain to you:

This graph needsFrom bottom upLook, why? -- The following is the basis of the above;

• First of all, we need some theoretical knowledge, whether you listen to others to teach, read your own books or online taotao materials, you need some theoretical knowledge, and every program development cannot be avoided.
• 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;
• Third, with these theoretical knowledge and the class library framework that assists us, we can truly encode it. Do you think coding development is not code writing? What else? -- There are a lot of roads here;
• Finally, the purpose of developing a program is to run it efficiently and stably in the corresponding environment. What do we need to do? Please look forward;

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

"Soft knowledge" and "Hard knowledge" may be unfamiliar to everyone, but I can understand it when I talk about it.

　　

• The so-called "soft" is used in various program development, which is a basic skill and internal function, such as data structure, algorithm, design mode, object-oriented, and so on;
• The so-called "hard" can be directly used for the development of this program. If you use the C language, you have to learn the C language syntax. It is useless to learn java at this time. The hard knowledge we need for web Front-end development is actually included in three standards:Http, W3C, and ECMAScript;

4. Talk about "Hard knowledge" in web Front-end development"

"Soft knowledge" has a lot of content and is also the focus of learning in the university era (it is another thing to do if you don't learn it well, and then make up for it after graduation ). We will focus on the web Front-end direction this time, so we will just click here to let everyone know that this knowledge also plays an important role in the knowledge system.

As I said just now, there are three standards for hard knowledge:Http, W3C, and ECMAScriptLet's talk about these three standards one by one.

4.1 http standard

Why do we need to know the http standard for web Front-end? -- Because the browser needs to obtain the webpage from the server, the webpage may also submit the information to the server, which has an http connection. Since the web system is related to the http link, you must understand it.

　　

My opinion is: You don't have to know http details very well, but you need to know some common http knowledge for web Front-end development-those listed in me. Of course, my knowledge is listed in the outline, and you have to check the details on your own (This article focuses on the knowledge framework and does not involve any details of knowledge points)

For this knowledge, I suggest reading the graphic http book, which is easy to understand. I have read it before.

4.2 W3C Standard

If you only know one standard of the web Front-end, it is estimated that it must be W3C standard (as far as I know, most people actually only know this standard ). It has a lot of content. Let's look at the page www.w3.org/tr.

This reminds me of one sentence:2/8 principle-20% of functions meet 80% of requirements. I think this sentence is very suitable for use here. We do not use so many things during the development process. Instead, you need to understand the many things you usually use.

I don't want to explain this too much. This is what I wrote in my article: "three major sections" (html, css, and js ). Now you need to know that they are not only part of W3C standards, but also part of the web Front-end development knowledge system.

(You can download the attachment provided at the beginning of this article if you want to view the permission Expansion Diagram)

　　

About the basic CSS knowledge, I recommend a series of blogs: "How much CSS does it know?"

4.3 ECMAScript

Elasticsearch is too troublesome to write the full name.

Some people may only know javascript, but not ES-in fact, js is based on ES and encapsulates some web browsers (with DOM operations and BOM operations added ).

　　

Such concepts may be seen in javascript at ordinary times. They are actually ES content. Javascript only inherits these features of ES and is widely used in javascript, so it will be discussed more in js.

Or the "2/8 principle ". In fact, elasticsearch has a lot of content, and it is updated very quickly. Now it has reached es6. However, all these are the most important concepts. If you do not understand the prototype, closure, and scope, it means that you do not fully understand ES, that is, javascript is not used completely.

I am here to introduce my own blog series. You can refer to: a deep understanding of javascript prototype and closure series.

5. Framework and Class Library

We have already described the theoretical knowledge required for web Front-end development. How to practice it? -You can't do it without going around the world. You have to look around the world to see which of the following great bulls have contributed so much to us.

Using the following class libraries or frameworks can greatly improve your development efficiency.

　　

• First, jquery must be an indispensable tool for most web Front-end developers. I use jquery not only to use its APIs and plug-ins, but also to write jquery plug-ins myself. I also read jquery source code and understand jquery's design ideas. If you can do the same, believe me and you will get unexpected results.If there is one question: how can we fully understand the javascript Event System? One of the best answers: read several times (once you may not understand) jquery source code for event processing!
• Bootstrap doesn't need to be explained too much. It can be seen from the ranking on github. Even our company's UI designers use bootstrap as materials.
• FontAwesome is the most powerful icon system in the world. This is much better than making css icons, whether it is development, efficiency or maintenance. Icomoon. io allows me to customize my own icon files.
• The module definition system, such as requirejs and seajs, must be indispensable in your system. I once saw a tutorial, And the lecturer said: requirejs has brought about the second front-end technological revolution after jquery.
• Others, backbone, angular, and react are also slowly starting to exert their value. If they are limited in energy, they will not go into details here -- however, they are important-You should at least try to understand them.

6. coding Development

Ask which coding IDE is strong, of course it belongs to Microsoft's visual studio! However, even Microsoft VS's latest version cannot replace the development environment described below.

　　

If you specialize in web Front-end, you should not use vs. Of course, you should choose sublime. Do I still write html statements one by one manually? You need zencoding assistance, otherwise the efficiency is too bad.

In addition, do you need to manually perform operations such as html, css, and js compression, merging, and syntax check, file clearing and copying? -- You need help from grunt or gulp.

Here, I would like to introduce my own tutorial "building an automated web development environment with grunt", which is detailed and suitable for beginners to learn.

If your system has a lot of js Code or files, select a proper module definition specification-CMD/AMD

Please use git to help you manage file versions. The simplest thing is to use github.

Debugging, testing, and specialized tools are all required ......

-- My God ...... My hands are sour when I write these words, so don't learn these things-never mind that our web Front-end is "three big blocks!

7. Running Environment

When the system is actually in the running environment, when you feel that it is finally finished, there are actually several knowledge points that need to be mastered by you. See:

　　

First, you need to know that, although most of the web systems are running in browsers, js may be running in the node environment.

In the browser environment, the most important two aspects are web security and performance optimization. I have listed all the outlines that need attention. If you want to know the two recommended books: white hats, web security, high-performance website construction Guide

8. Others

These are all knowledge systems. If you want to become a qualified programmer, I think you need the following:

• Understanding agile software development processes (such as SCRUM) and project management knowledge (such as PMP) is also a kind of "soft" knowledge;
• You must learn to communicate with others (blogs, QQ groups, and open-source projects) on the Internet, so that you can see your own shortcomings;
• You must learn self-reflection and self-learning. Just as now, I try to summarize my own things and reflect on progress at any time.

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:

Use grunt to build a fully automated web Front-end development environment, design to mode, and json2.js source code explanation video

《Deep understanding of javascript prototype and closure Series"Css knowledge" "Microsoft petshop4.0 source code interpretation video"

Bytes ------------------------------------------------------------------------------------------------------------

Welcome to my open-source project --WangEditor, lightweight web Rich Text Editor

Bytes -------------------------------------------------------------------------------------------------------------

Random video chat --Chatyou.net

Bytes -------------------------------------------------------------------------------------------------------------

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.