Preface ⏳

Some time ago to participate in the youth training camp, it is a great honor to hear the little Red Book author – Teacher Li Songfeng’s class, at the same time, in a class meeting, also saw teacher Li real 👋

In addition, also got teacher Li rhino book autograph 😉

Too much nonsense! Let’s follow Li’s steps to explore the front-end development of the Web world

⏰ first, about front-end development

1. Origin, structure, change

(1) Origin

The Web began in 1984, when Tim Berners-Lee published a paper that, along with it, represented the birth of the Web.

Let’s take a look at a quote from the author:

"Suppose all the information stored on computers everywhere were linked. Imagine computers stored anywhere that can be linked to each other. Suppose I could program my computer to create a spacein which"Imagine writing programs in my computer to create a space where everything is linked to each other. - Tim Berners-Lee, inventor of the World Wide WebCopy the code

The web and PDF versions of the paper are attached below:

👉 paper web page

👉 PDF version of paper

A lot of people can not distinguish the “Internet” is on which network? This is true even in the birthplace of the Internet. The popularity and depth of the Web can be seen.

Surfing the Internet actually refers to accessing the Internet, which is a network of interconnected computers on the planet. Computer network was born in the 1960s of the last century. The signature communication protocol is TCP/IP.

(2) Architecture

When it was born in 1989, the Web was made up of three technologies: HTML, HTTP, and URL.

CSS and JavaScript came a few years later.

(3) Change

There are three important periods of change for the Web. Respectively is:

  • Read-only era
  • Experience era
  • Agile era

As shown below:

2. Front-end application areas

(1) Targeted groups

For front-end applications, there are three types of users. They are: to B, to C and to D. To B is for business, to C is for users, and to D is for developers.

(2) The field

① Browser in the field of front-end application:

② Front-end application domain server:

③ Cross-ends and terminals of front-end application fields:

3. Language, framework, tools

Let’s take a look at some of the programming languages, frameworks, and tools commonly used in real-world development using two diagrams. The details are as follows:

4. Browser, Network, server

In addition to the above, there are a few things we need to know about the browser. As shown below:

Article Portal: An in-depth understanding of modern browsers

At the same time, let’s learn a little bit about HTTP. The diagram below:

An overview of HTTP

5. Front-end learning roadmap

For the front end, the learning path follows the following diagram:

Link to roadmap.sh

In this website, basically covers all directions of the learning roadmap, you can view according to their own needs ~

⏱️ 2. About Web standards

1. Learn about Web standards organizations

(1) Four concepts

For Web standards, we need to understand the following concepts:

  • W3C: World Wide Web Consortium ；
  • Wcma: Ecma International;
  • WHATWG: Web Hypertext Application Technology Working Group ；
  • IETF: Internet Engineering Task Force ；

(2) Detailed concepts

Let’s take a look at some of the four criteria above.

1) the W3C

  • Website: www.w3.org
  • Github：github.com/w3c
  • Specification query: www.w3.org/TR

2) the Ecma TC39

  • Website: www.ecma-international.org
  • TC39: TC39. Es
  • Github：github.com/tc39
  • Discourse: es. Discourse. Group

3) the WHATWG

  • Liverpoolfc.tv: whatwg.org/
  • Github：github.com/whatwg
  • Spec query: spec.whatwg.org/

4) the IETF

  • Website: www.ietf.org/
  • Github：github.com/ietf

2. W3C and Ecma membership

  • W3C currently has 444 members worldwide, including 46 members from Beihang Headquarters (China).
  • Ecma now has 18 Associate Members, including bytedance, 360, Alibaba, Huawei and Tencent.

3. W3C specification formulation process

Now, let’s take a look at the W3C specification formulation process, as shown in the figure below:

Document portal: W3C specification making process

4. Ecma TC39 specification formulation process

Continue, let’s understand the formulation process of ECMA specification, as shown in the figure below:

Document portal: ECMA specification making process, ECMA specification core terms

🕰️

At this point, we have a brief understanding of front-end development from a Web perspective. Do not know that you have a deeper understanding of Web front-end development?

If you think this article is helpful to you, you might as well like to support yo ~~😛

⏲️ previous recommendation

👉 HTML basics worth watching

👉 CSS is still just about writing layouts? Discover the wonders of CSS in 10 minutes!

👉 front end just cut diagram son? Learn about UI design for developers

👉 Follow the steps of moon Shadow big guy, let’s learn how to write good JS (1)

👉 Follow the steps of moon Shadow big guy to learn how to write good JS (2)