About Front-end Development#
Origin, Architecture, and Evolution#
"Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything."
——Tim Berners-Lee, inventor of the World Wide Web
"Imagine if all the information stored on computers everywhere were linked. Imagine if I could program my computer to create a space in which everything could be linked to everything." It feels a bit like everything is interconnected.
The Web was born in early 1989, initially consisting of only three technologies:
- HTML
- HTTP
- URL
CSS and JavaScript were introduced a few years later.
Evolution of Web technologies:
- Read-only era: The client was like a static page, and updating the page required sending a network request. It was not possible to update the page without refreshing it.
- Experience era: The client transitioned from static to dynamic, gaining the ability for dynamic interaction. It became possible to send requests to the server through JavaScript in the background and update the content in the webpage by modifying the DOM. Technologies like Google Maps used this approach.
- Agile era: The current mainstream era, where user experience is highly valued. Front-end development has gained attention, becoming modular and component-based. This era has seen the emergence of well-known frameworks like React and Vue, as well as build tools like Webpack.
Application Areas of Front-end Development#
To Business (Enterprise)
Byte's Volcano Engine, public cloud, etc. These are websites that provide various services to enterprises, with large scale and profitability.
To Customer (Client)
The earliest websites served as a means of information sharing. Now, there are websites that directly reach customers, including e-commerce platforms, online education, mobile H5, etc. These are applications for customers.
To Develop (Developers)
Tools that improve web development efficiency, such as code editors, etc.
Browsers
Desktop browsers: Chrome, Firefox, Edge, etc.
Mobile browsers: Android, iOS
Terminals and Cross-platform
Command line/terminal
Desktop Cross-platform
- Electron
- NW.js
Mobile Cross-platform
- React Native
- Flutter
Languages, Frameworks, and Tools#
- Basic languages,
this diagram is too busythis diagram is concise and clear, in addition to the three major components of front-end development, there is also WebAssembly.
- Frameworks
Browsers, Networks, Servers#
Browsers Recommended articles:
- Original article: Consists of 4 chapters Inside look at modern web browser (part 1) | Web | Google Developers
- Translation: In-depth Understanding of Modern Browsers
Network
An overview of HTTP - HTTP | MDN (mozilla.org)
Learning Roadmap#
Frontend Developer Roadmap: Learn to become a modern frontend developer
About Web Standards#
-
W3C: World Wide Web Consortium (Web standards in the general sense)
- Official website: https://www.w3.org/
- Github: https://github.com/w3c
- Specification search: All Standards and Drafts - W3C
-
Ecma: Ecma International (ECMAScript standardization specification)
- Ecma TC39 official website: Home - Ecma International (ecma-international.org)
- TC39: TC39 – Specifying JavaScript.
- Github: Ecma TC39 (github.com)
- Discourse (Discussion group): TC39 - Specifying JavaScript (es.discourse.group)
-
WHATWG: Web Hypertext Application Technology Working Group
- Official website: Web Hypertext Application Technology Working Group (WHATWG)
- Github: WHATWG (github.com)
- Specification search: Standards — WHATWG
-
IETF: Internet Engineering Task Force
- Official website: IETF | Internet Engineering Task Force
- Github: Internet Engineering Task Force (IETF) (github.com)
W3C and Ecma Members#
W3C Specification Development Process#
- Explainer demo
- Find the right community/group
- Web IDL for APIs link
- Step-by-step algorithms
- Github, Markdown, respec, bikeshed, etc.
- Get an early review w3ctag/design-reviews
- Write web-platform-tests (WPT) tests.
Ecma TC39 Specification Development Process
- Championing a proposal at TC39
- How to write a good explainer
- Presenting a Proposal to TC39
- Reading a proposal draft
- Stage 3 Proposal Reviews
- How to experiment with a proposal before Stage 4
- Implementing and shipping TC39 proposals
How to Participate - Pay Attention to Meetings#
W3C Meetings W3C Technical Plenary / Advisory Committee Meetings Week (TPAC) is W3C's annual global technical conference, bringing together members of W3C working groups (working groups, interest groups, community groups, etc.), Advisory Board (AB), Technical Architecture Group (TAG), member representatives (AC), invited experts, and global community members. Through 1-2 weeks of concentrated interaction and communication, the conference delves into the future direction of open web platform technologies.
-
Annual Conference
- AC
- TPAC (Technical Plenary and Advisory Committee)
-
Working Group Meetings
- Monthly meetings
- Various workshops
Summary and Thoughts#
As a front-end engineer, it is important to grasp web standards, understand browsers and networks, and stay updated with the latest technologies. The learning roadmap discussed in this lesson provides a good overview of front-end development, and the recommended articles have given me a deeper understanding of browsers. Highly recommended!
Most of the content quoted in this article comes from the lectures of Mr. Li Songfeng and MDN.