关于前端开发

起源、架构、变迁

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

假设存储在各地计算机上的所有信息都是连接的。假设我可以给我的电脑编程，创造一个空间，在这个空间里，一切都可以连接到一切。

-蒂姆·伯纳斯·李（Tim Berners-Lee），万维网的发明者

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

HTML
HTTP
URL

CSS和JavaScript是几年之后才出现的

Web 技术变迁

前端应用领域

To Business (面向企业)
To Customer （面向普通客户）
To Developer （面向开发者）

浏览器

Desktop
Mobile

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

服务器

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

终端和跨端

![52647862-1b7f-42a0-ad22-6c29d8e1be2d.png](https://liu-markdown-img.oss-cn-hangzhou.aliyuncs.com/img/1659169414139-68015446-0c58-4b2b-a01b-5128f549f91a.png) 命令行/终端

Webpack CLI
Babel CLI
Vue CLI
React CLI

桌面跨端

Electron
NW.js

移动跨端

React Native
Flutter

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

语言、框架、工具

WebAssembly

前面我们从用户和运行环境两个视角，了解了前端应用的领域。接下来再快速地了解一下前端开发相关的语言、框架和工具。
首先，不言而喻，HTML、CSS和JavaScript是前端开发必须掌握的三门语言。HTML负责结构页面，CSS为页面提供装饰，JavaScript赋予页面动态和交互能力。
前面3三种语言相信大家都非常熟悉了，这里重点介绍第4种

WebAssembly

WebAssembly或wasm是用于浏览器内客户端脚本的低级、可移植的字节码格式，是一种运行在现代网络浏览器中的新型代码、并且提供新的性能特性和效果，对于浏览器下载和加载是有效的。它是为诸如C、C和Rust等低级源语言提供一个高效的编译目标而设计的。
实际上，WebAssembly是由现有JavaScript引擎背后的浏览器开发人员实现的。从本质上讲，它旨在将JavaScript替换为Web上编译器和转换器的目标。例如，不用将TypeScript编译为JavaScript，它的开发人员现在可以编译为WebAssembly。简而言之，它不是一个新的虚拟机，它是每个浏览器中包含的相同JavaScript VM的新格式。这样就可以在不使用JavaScript的情况下利用现有的JavaScript基础结构
它可将C、C、Rust、Java等语言直接编译为机器码。提供接近原生的运行性能，大大提高了效率。

WebAssembly的优点：

1、快速、高效性
WebAssembly是一种可移植的字节码格式，字节码以二进制格式传输，由于模块的结构，可以通过浏览器并行编译，以便进一步加快速度，使其能够以接近原生性能的速度运行。它是是为诸如C、C++和Rust等低级源语言提供一个高效的编译目标而设计的。
2、可移植性
可以将Webassembly移植到其他平台。这意味着，如果用编译为WebAssembly的语言编写软件，就能够在.NET上运行它。它允许我们重用Web上现有的JavaScript基础结构。
WebAssembly代码在不同平台上能够以接近本地速度运行。
3、可读、可调试
WebAssembly是一种低级的类汇编语言，但是它设计了一个非常规整的、人类可读的文本格式，这允许通过手动来编写代码，查看代码以及调试代码。
4、安全性
WebAssembly运行在一个沙箱化的执行环境中，甚至可以在现有的 JavaScript 虚拟机中实现。在web环境中，WebAssembly将会严格遵守同源策略以及浏览器安全策略。

浏览器、网络、服务器（重点）

深入理解现代浏览器

HTTP

HTTP 是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的 Web 文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。

线路图

路线图不定期更新，请大家前往网站查看

关于 Web 标准

标准组织

W3C

World Wide Web Consortium （万维网联盟）

Ecma

Ecma International (ECMA国际)

WHATWG

Web Hypertext Application Technology Working Group (Web超文本应用程序技术工作组)

IETF

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

官网：https://www.ietf.org/
GitHub：https://github.com/ietf

W3C和Ecma的情况

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

W3C规范制定流程

W3C规范的制定流程。

**WD：**Vorking Draft,（工作草案）
**CR：**Candiate Recommendation,（候选推荐）
**PR：**Proposed Recommendation,（提议推荐）
**REC：**Recommendation,（推荐标准）

推荐标准就是W3C的标准的最终形态，不是强制性标准。
The W3C Recommendation Track

Ecma TC39规范制定流程

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

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

ECMA-262 ECMAScript® 2022 语言规范

如何参与–关注会议

年度大会

AC （Advisory Committee）
TOAC （Technical Plenary and Advisory Committee）

工作组会议

每月会议
各种研讨会ink

W3C会议

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