Web front-end Development Department overview (up to now the most complete Internet front-end development technology stack)

Http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html

Objective

The internet has been established for more than 60 years, the Web site development technology is changing rapidly, but the Web front-end is always inseparable from the browser, and ultimately html+javascript+css these 3 core, around the 3 core and developed a large number of technical framework/solution.

I began to do web site development from the beginning of 2000, the use of technology has been iterative, some disappeared, more appeared.

I wrote it recently . NET Technology Department Overview (up to now the most complete. NET technology stack) , I believe many netizens sigh master. NET technology is far from this technology stack described in many. problem

Have you ever thought about what technology is involved in Web front-end development? How much of this subset of the technology I have mastered is in the super set of Web front-end technology. I have not yet mastered how many Web front-end technology. What skills will be in the exam when you interview?

I believe many netizens have read what I wrote before . NET Technology Department Overview (up to now the most complete. NET technology stack, a simple and understandable stack diagram can be summarized. NET this huge technology ecosystem inside the basic technology:

So, should web front-end development also have such a technology stack overview diagram?

Search for a long time, did not find a consistent with my requirements of the "more comprehensive" description of the Web front-end technology large series of charts.

The internet is a few simple ones, such as this:

or this:

or this:

But these are far from the height of the entire Web front-end development technology, and I do not need the same.

Web front-end development technology stack

Now popular a saying, is full stack (whole stack), simply said to be a panacea, said that a decent point is the front-end, backstage, storage, architecture and so understand, I think I am not the whole stack, but the stack (stack overflow), joking ....

This web front-end development technology stack, about 20 levels, about 100 technical points, from bottom to top: Browser rendering engine, JavaScript engine html/javascript/css three pillar Editor compile task Compile tool package, Debug, quality test JS base Class Library JS class Library UI Framework CSS Preprocessor template Modern security/Mode intermediate Language Cross-platform solution

The classification of this chart may not be accurate, the relevant technology will inevitably have omissions, welcome everyone to guide in order to continuously improve.

The Web front-end technology is too numerous to be limited to space, and there are no techniques listed here.

The following is a preview diagram:

Because the content is too much, want to see complete technology stack diagram, can visit GitHub.

GitHub Open Source

Open Source in GitHub: Webfrontendstack