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

web标准与前端开发

关于前端开发

起源、架构、变迁

起源

1989年Tim Berners-Lee在欧洲的一个物理研究机构（CERN）工作时提出了一个关于信息管理的建议，这个建议就此被公认为是web开发技术的起源。当时Tim Berners-Lee提出的建议构想的核心思路是设想存储在任何一台机器上的信息都是链接的。

架构

1989年诞生时，Web由三种核心技术构成：

• 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

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

前端应用的领域

To Business

桌面浏览器包括Chrome、Edge、Firefox、 Opera、Safari这五个主流浏览器，随着谷歌Chromium开源项目的不断攻城掠地,也随着开源运动的不断属性，浏览器的多样性正在减少。因为Edge和Opera都已经选择站到了谷歌的阵营，所以只有Chrome、Safari和Firefox三个浏览器。目前，Chrome浏览器的市场份额达到69.28%,具有事实上的垄断地位。 移动浏览器主要是Chrome、Safari，还有国内小程序提供商定制的一些浏览器引擎。前端不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上跑的小程序。

To Customer

服务器，服务端的开发目前主要还是依托于Node,js这个成熟的JS运行时，npm包管理平台已经成为世界最大的程序包管理平台，2019年6月超过100万。还有Express、Koa等Web开发框架的生态。也要关注Deno这个新的JavaScript安全运行时。Deno号称是安全运行时。而且，Deno也是Node,js之父Ryan Dahl一手打造的。在发布Deno的时候，Ryan Dahl曾经痛陈"Node.js十大遗憾”。

To Developer

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

语言、框架、工具

HTML、CSS和JavaScript是前端开发必须掌握的三门语言。HTML负责结构页面，CSS为页面提供装饰，JavaScript赋予页面动态和交互能力 2019年12月5日W3C发布了WebAssembly正式的推荐标准，并宣告浏览器中能够运行的语言已经达到了四门，WebAssembly是一种新的编码方式，能够在现代的浏览器中运行，现在主流的一些浏览器都已支持，它是一种类似汇编的语言，它的二进制格式非常紧凑，使其可以以接近原生的速度运行。C++、C或Rust都可编译成WebAssembly在浏览器中运行，与JS互相操作共享内存。这样浏览器的速度就能够达到接近原生应用的速度，能够让浏览器实现一些像游戏引擎、科学计算等等，性能及高的功能。WebAssembly这个新领域非常有前景 常用的框架有

node.js,koa,ts,webpack,vue,git,esbuild等

浏览器、网络、服务器

我们学习前端开发，一定离不开前端代码运行的环境。那就是浏览器、网络和服务器。 这个图片，深入理解现代浏览器，以Cnrome作为现代浏览器的示例，讲解了浏览器的工作用理，解释了在地址栏输入URL后，回车，都会发生什么。 关于网络和服务器，也需要理解基本概念和原理。这里有MDN的一篇文章，是HTTP的简介，涉及HTTP请求和响应的过程及概念。

关于Web服务器的能力，包括本地文件系统和文件操作、网络和管道API、套接口、子进程等方面。这些知识我们青训营后面也有相关的课程。

developer.mozilla.org/en-US/docs/…

前端学习路线

关于前端这个职业的技能树，或者说学习路线图。在这里给大家推荐一个网站: htps;//roadmap.sh，点开之后选择Fronend希望不要被这个路线图"劝退”，而是制定一个五年规划，不要企图两三年就把这些知识全都掌握。

htps;//roadmap.sh

关于Web标准

了解Web标准组织

W3C(World Wide Web Consortium万维网联合会)

• 官网：www.w3.org
• Github：：github.com/w3c
• 规范查询：：www.w3.org/TR

Ecma TC39(Ecma International ECMA国际)

• 官网：：www.ecma-international,org
• TC39：：tc39.es
• Github：：github.com/tc39
• Discourse：：es.discourse.group

WHATWG(Web Hypertext ApplicationTechnology Working Group Web超文本应用技术工作组)

• 官网：：whatwg.org
• Github：：github.com/whatwg
• 规范查询：：spec.whatwg.org

IETF(Internet Engineering Task Force互联网工程工作队)

• 官网：：www.ietf.org
• Github：：github.com/ietf

W3C与Ecma会员

W3C目前在全球有457家会员，其中北航总部（中国区）会员47家Ecma的AM(Associate Mem
ber)会员目前有18家，中国公司有字节跳动、360、阿里、华为、腾讯等5家

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 APls: IDL (Interface Description Language，接口描述语言)，用于描述API的一种标准方式: heycam.github.io/webidl/ ;
• Step-by-step algorithms：分步算法，就是要把算法步骤描述清楚;- GitHub,Markdown, respec, bikeshed, etc:这些都是工具; -一步一步的算法：分步算法，就是要把算法步骤描述清楚；-GitHub、Markdown、respec、bikesded等：这些都是工具；
• Get an early review w3ctag/design-review：事先请TAG (Technical Architecture Group，技术架构组)进行设计评审; -尽早审查w3ctag/设计-评审：事先请标记(技术架构小组，技术架构组)进行设计评审)；
• 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会议

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

Ecma会议

年度大会GA(General Assembly)/ TC39会议每1-2个月