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

01. 关于前端开发

起源，架构，变迁
应用领域
语言，框架，工具
学习路线

起源，架构，变迁

起源

创始人：Tim Berners-Lee

“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.”

很多人分不清 “上网” 是上的哪个网？即使在互联网的诞生地也是如此。Web的普及和深入人心由此可见一斑。
上网指接入 Internet ，它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的60年代，标识性通信协议是 TCP/IP。

架构

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

HTML
HTTP
URL（统一资源定位符）
HTTP根据URL向指定服务器发送请求，获取HTML文件后再浏览器上渲染出来。
CSS和JavaScript是几年之后才出现的。

变迁

前端的作用领域

To Business：就是企业级应用。一般是大型机构，银行等等用于提供服务的。比如字节的火山引擎，以及各类的广告平台。
To Customer：老百姓的应用。比如门户网站，在线教育，新闻资讯等等。
To Developer：开发者的应用。模块化，打包，编译，调试，运维都离不开工具的支持。主要为了提高开发效率。eg：vscode。

浏览器：桌面浏览器（谷歌，IE，Opera，火狐...）和移动端（安卓、苹果），

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

服务器：node.js，Express.js ，Koa

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

终端和跨端

命令行/终端
- Webpack CLI
- Babel CLI
- Vue CLI
- React CLI
桌面跨端
- Electron
- NW.js
移动跨端
- React Native
- Flutter

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

语言，框架，工具

语言

WebAssembly：一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

结合C++，C, Rust 或其他高级语言编写程序，通过二进制工具转化成类汇编的形式，再去运行。

问题：为什么WebAssembly比JavaScript快？

文件加载：WebAssembly文件体积更小，所以下载速度更快。
解析：解码 WebAssembly比解析JavaScript要快。
编译和优化：编译和优化所需的时间较少，因为在将文件推送到服务器之前已经进行了更多优化，JavaScript需要为动态类型多次编译代码。
重新优化：WebAssembly代码不需要重新优化，因为编译器有足够的信息可以在第一次运行时获得正确的代码。
执行：执行可以更快，WebAssembly 指令更接近机器码。
垃圾回收：WebAssembly不直接支持垃圾回收，垃圾回收都是手动控制的，所以比自动垃圾回收效率更高。

框架
建议学习框架前先去了解作者。

浏览器，网络，服务器（图书推荐）

浏览器：
《深入理解现代浏览器》

An overview of HTTP - HTTP | MDN )

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

前端学习路线图
前端学习路线

02. 关于Web标准

Web标准组织
W3C和Ecma的情况
W3C规范制定流程
Ecma TC39规范制定流程

Web标准组织

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

W3C

➢ 官网: www.w3.org

➢ Github: github.com/w3c

➢ 规范查询: www.w3.org/TR （TR:technique report）

W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM

Ecma TC39

➢ 官网: www.ecma-international.org

➢ TC39: tc39.es

➢ Github: github.com/tc39

➢ Discourse: es.discourse.group

主要推行：ECMAScript，比如最新的标准（21年12月）是ECMA-420

WHATWG

➢ 官网: whatwg.org/

➢ Github: github.com/whatwg

➢ 规范查询: spec.whatwg.org/

lETF

➢ 官网: www.ietf.org/

➢ Github: github.com/ietf

W3C与Ecma会员

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

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测试。