Web 标准与前端开发 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第 7 天

课程概述

前端开发是一个随着 Web 标准不断健全和完善发展起来的职业，本课程从宏观视角概述了前端开发这一职业的起源和变迁，重点介绍了与前端开发密切相关的国际标准组织： WW3C 和 Ecma TC39 。

本课程的内容要点：

关于前端开发
- 起源、架构、变迁
- 前端应用的领域
- 语言、框架、工具
- 前端学习路线图
关于Web标准
- 了解 Web 标准组织
- W3C 与 Ecma 会员
- W3C 流程
- TC39 流程
- 如何参与

关于前端开发

起源、架构、变迁

最早可以追溯到一篇论文

"Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to creat a space in which everything could be linked to everything."

-- Tim Berners Lee, inventor of the World Wide Web

论文网页版

Internet

由相互连接的计算机构成的网络。
计算机网络诞生于上世纪 60 年代，标志性通信协议是 TCP/IP

Web

标志性通信协议是 HTTLP
1989 年诞生时，由三种技术构成：HTML、HTTP、URL
CSS 和 JavaScript 是几年之后才出现的

前端三大时代：

只读时代（1989 - 2004）HTML / CSS / JavaScript

单向发布
静态只读
链接跳转
刷新页面
表格对齐元素
CGI

体验时代（2005 - 2010）Ajax / Web API / jQuery

动态交互
社交媒体
用户生成内容（UGC）
单页应用（SPA）
jQuery
YUI

敏捷时代（2010 - 2021）Fetch / Node.js / Webpack

模块化
组件化
转译（transpliling）
打包（bundling）
React.js
Vue.js

前端应用的领域

To Business (To B)

To Customer (To C)

To Developer (To D)

浏览器

关于前端开发的应用领域，接下来再从运营环境角度看一看。

首先，浏览器，包括桌面浏览器和移动浏览器，以及移动 App 中的 WebView ，都属于浏览器直接渲染 Web 应用的范畴；

桌面浏览器包括 Chrome、Edge、Firefox、Opera、Safari 这五个主流浏览器，事实上随着谷歌 Chromium 开源项目的不断攻城掠地，也随着开源运动的不断属性，浏览器的多样性正在减少。因为 Edge 和 Opera 都已经选择站到了谷歌的阵营，所以事实上只有 Chrome、Safari 和 Firefox 三个浏览器。

目前，Chrome 浏览器的市场份额达到 67.55% ，具有事实上的垄断地位。移动浏览器主要是 Chrome、Safari ，还有国内小程序提供商定制的一些浏览器引擎。

换句话说，前端不仅要开发在浏览器和 WebView 中运行的网页，也要开发在小程序运行时上跑的小程序。

服务器

其次，服务端的开发目前主要还是依托于 Node.js 这个成熟的 JS 运行时，npm 包管理平台已经成为世界最大的程序包管理平台，2019年6月超过100万。

当然，还有 Express、Koa 等 Web 开发框架的生态。

最后，大家也要关注 Deno 这个新的 JavaScript 安全运行时。Deno号称是安全运行时。

而且，Deno 也是 Node.js 之父 Ryan Dahl 一手打造的。在发布 Deno 的时候，Ryan Dahl 曾经痛陈 “Node.js十大遗憾”。

终端和跨端

第三，终端和跨端，这个应用领域通常是开发者工具，比如命令行工具里的 Webpack、Babel、React、Vue 都有 CLI（Command-Line Interface）版，而桌面跨端主要有 Electron 和 NW.js ，目前世界上最流行的编码环境 VSCode 就是基于 Electron 的一个 Web 应用。

命令行 / 终端

Webpack CLI
Babel CLI
Vue CLI
React CLI

桌面跨端

Electron
NW.js

移动跨端

React Native
Flutter

语言、框架、工具

前面我们从用户和运行环境两个视角，了解了前端应用的领域。接下来再快速地了解一下前端开发相关的语言、框架和工具。

首先，不言而喻，HTML、CSS 和 JavaScript 是前端开发必须掌握的三门语言。 HTML 负责结构页面， CSS 为页面提供装饰， JavaScript 赋予页面动态和交互能力。

WebAssembly

最后，我们学习前端开发，一定离不开前端代码运行的环境。那就是浏览器、网络和服务器。

这里推荐一篇长文“深入理解现代浏览器”，这篇文章以Chrome作为现代浏览器的示例，图文并茂在讲解了浏览器的工作原理，解释了在地址栏输入URL之后，回车，都会发生什么。一定要多读几遍，而且要经常读一读，这样才能理解、记牢。

深入理解现代浏览器

关于网络和服务器，也需要理解基本概念和原理。

这里有MDN的一篇文章，是HTTP的简介，涉及HTTP请求和响应的过程及概念。关于Web服务器的能力，包括本地文件系统和文件操作、网络和管道API、套接口、子进程等方面。

An overview of HTTP

关于前端这个职业的技能树，或者说学习路线图。在这里给大家推荐一个网站：roadmap.sh，点开之后选择 Fronend 。

希望大家不要被这个路线图“劝退”，而是制定一个五年规划，不要企图两三年就把这些知识全都掌握。

Frontend Developer Roadmap: Learn to become a modern frontend developer

关于 Web 标准

了解 Web 标准组织

W3C: World Wide Web Consortium
Ecma: Ecma International
- 官网
- TC39
- Github
- Discourse
WHATWG: Web Hypertext Application Technology Working Group
IETF: Internet Engineering Task Force
- 官网
- Github

W3C 与 Ecma 会员

W3C目前在全球有444家会员（link），其中北航总部（中国区）会员46家（link）
Ecma的AM（Associate Member）会员目前有18家，中国公司有字节跳动、360、阿里、华为、腾讯等5家（link）中国除有5家AM会员，还有一家SPC（Small Private Company，小型私有公司）会员Sujitech。另外，大家可以关注一家西班牙的公司Igalia。

W3C 规范制定流程

我们看一下W3C规范的生命周期，借以了解W3C规范的制定流程。

WD：Working Draft，即工作草案
CR：Candiate Recommendation，即候选推荐
PR：Proposed Recommendation，即提议推荐
REC：Recommendation，即推荐标准。推荐标准就是W3C的标准的最终形态，不是强制性标准。

W3C规范的流程在前面的流程文档里有详细介绍。但一个规范从草案到正式发布，通常都涉及以下几个方面：

Explainer：就是建议说明文档，比如要标准化某个领域的API，要先写一个建议文档，Slide上有个链接，里面包含相关示例：w3ctag.github.io/explainers；
Find the right community/group：找到合适的社区或小组，把建议文档提交到社区或小组里充分讨论；
Web IDL for APIs：IDL（Interface Description Language，接口描述语言），用于描述API的一种标准方式：heycam.github.io/webidl/；
Step-by-step algorithms：分步算法，就是要把算法步骤描述清楚；
GitHub, Markdown, respec, bikeshed, etc：这些都是工具；
Get an early review w3ctag/design-review：事先请TAG（Technical Architecture Group，技术架构组）进行设计评审；
Write web-platform-tests (WPT) tests：编写WPT测试。

TC39 流程

负责制定ECMAScript规范的是TC39，TC是Technial Committee，技术委员会的意思。

Stage 0：strawman，稻草人，以任何形式提交的想法
Stage 1：proposal，提案，特性的正式建议
Stage 2：draft，草案，具有语法和语义的描述
Stage 3：candidate，候选，规范文本完备，有了两个实现
Stage 4：finished，完成，可以成为标准，通过单元测试

如何参与

W3C 会议

年度大会
- AC (Advisory Committee)
- TPAC (Technical Plenary and Advisory Committee)
工作组会议
- 每月会议
- 各种研讨会

W3C Technical Plenary / Advisory Committee Meetings Week (简称 TPAC ) 是W3C一年一度的全球技术大会，汇集 W3C 各工作小组成员（工作组、兴趣组、社区组等）、咨询委员会 (AB)、技术架构组 (TAG) 、会员单位代表 (AC) 公众特邀专家以及全球社区成员，通过为期 1-2 周的集中互动交流，深入探讨未来开放 Web 平台技术方向。

Ecma 会议