Internet front-end development technology stack

Internet front-end development technology stack

Objective

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

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

I wrote it recently . NET Technology Overview (so far the most complete. NET technology stack) , I believe a lot of netizens sigh master. NET technology is much less than that described in this technology stack.

Problem

Have you ever thought about:

• What technologies does web front-end development contain?
• What is the proportion of this subset of technology that I have mastered in the Web front-end technology large-scale this superset?
• How many web front-end technologies do I have yet to master?
• What skills will be in the exam?

I believe a lot of netizens have read what I wrote before . NET Technology Overview (so far the most complete. NET technology stack), a simple and easy to understand stack diagram can be summarized. NET is the basic technology in this huge technology ecosystem:

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

Search for a long time, did not find a meet my requirements of the "more comprehensive" to express the Web front-end technology of the big line of the chart.

The internet is a few simple, such as this:

or this:

or this:

But these are far from a high-level overview of the entire Web front-end development technology, and I need not the same.

Web front-end development technology stack

Now popular a saying, is full stack (whole stack), simply said is the Tiger balm, said decently is front end, backstage, storage, architecture and so all understand, I think I am not full stack, but stack overflow, joking ....

This web front-end development technology stack, about 20 levels, about 100 technical points, from the bottom up to the top level:

• Browser
• Rendering engine, JavaScript engine
• Html/javascript/css three pillars
• Editor
• Compiling tasks
• Compiling tools
• Packaging, commissioning, quality
• Test
• JS Base Class Library
• JS Class Library
• UI Framework
• CSS Preprocessor
• Template
• Modernization
• Security/Mode
• Intermediate language
• Cross-platform Solutions

The classification of this chart may not be accurate, the relevant technology will inevitably be omitted, we welcome the guidance so as to improve continuously.

Web front-end technology is too numerous to be confined to space, and there are no technologies listed here.

The following is a preview map:

Because there is too much content, you can access GitHub by looking at the full technical stack diagram.

GitHub Open Source

Open source on GitHub: Webfrontendstack

Internet front-end development technology stack