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

课堂笔记

本堂课重点内容

• 前端开发
• web标准

Web前端开发

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

起源、架构、变迁

起源

1984年Tim Berners-Lee发布了论文Information Management: A Proposal，web前端也随之诞生。
我们平常说的上网一般是指登录了网页，进行交互活动。而实际上网是指接入Internet,它是地球上互相连接的计算机构成的网络。让我们用一张图片来对它们进行不太有效的区分： 这张图不难看出是先出现Internet技术,再出现的Web技术。

架构

Tim Berners-Lee 设计Web时提出三种技术构成：HTML、HTTP和URL是最初的Web原型

• HTML是用来表示网页结构的语言
• HTTP是超文本传输协议
• URL是统一资源定位器
  原理：在客户端打开浏览器，通过HTTP请求来获取服务器上存储的HTML文档，在经过浏览器的解析呈现出来。
  而我们熟知的CSS和JavaScript是之后几年才出现的。

变迁

李松峰老师总结的三个时代

• 只读时代，是由最基础的架构构成的，特点是获取和更改都需要发送请求到服务器，不能再不更新的情况下刷新页面
• 体验时代，再不刷新页面的情况下，响应用户交互，动态获得服务器数据更新页面，实现了页面向应用的v跨越
• 敏捷时代，互联网企业更注重用户的体验

应用

• toB:面向企业，包括大型机构，广告平台，网站，管理资源，监控状态
• toC:面向终端客户，包括门户网站，电商平台，在线教育，生活娱乐
• toD:面向开发者，包括模块化，打包，编译，转译，测试开发，部署，调试，运维，整个流程使用的工具，开发者自产自销。

浏览器

• 桌面浏览器：办公情境下，Opera和Edge采用了Google开源的Chromium引擎，从内核角度讲，桌面浏览器的多样性正在减少。
• 手机浏览器: 日常生活

服务器

• 主要依托node.js,npm包管理平台已经成为世界上最大的包管理平台
• 早期的Express和Koa服务端的开发框架，实现服务端的webAPI开发
• deno.js框架弥补了node.js的遗憾，详细内容点此链接

终端和跨端

• 终端/Terminal
• 桌面跨端
• 移动跨端

语言、框架、工具

语言

• HTML，CSS，JavaScript是浏览器长期以来主要的三门语言
• 2019年W3C发布新标准，宣告WebAssembly也是浏览器可以运行的语言。优点：类似汇编语言，运行速度快；C，C++，Rust都可以编译成WebAssembly在浏览器中运行，实现游戏引擎等对性能要求高的场景。
• 能够编译成WebAssembly的语言

框架

李松峰老师觉得了解框架之前要先了解作者，关注个人账号，了解写框架的初衷，以便于更深入理解框架。

工具

浏览器

老师推荐的文章:深入理解现代浏览器，下图为文中架构图： 文中主要讲了在浏览器输入URL之后，与前端开发相关的过程。有心人会发现这也是前端面试常考的问题，希望文章能帮助你进一步理解。对于理解运行环境，优化Web应用以及呈现浏览器中的线程，都有所裨益，非常推荐。

网络

老师推荐文章：An overview of HTTP

前端学习路线

Frontend Developer可以作为参考

web标准

了解web标准组织

W3C: World Wide Web Consortium

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

Wcma: Ecma International

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

WHATWG: Web Hypertext Application Technology Working Group

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

IETF: Internet Engineering Task Force

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

W3C规范制定流程

• 建议说明文档
• 找到对应社区/小组
• 用IDL来设计接口API
• 描写逐步算法
• 用规定的编写规范工具，如GitHub,Markdown
• 技术架构组进行评审
• 写一些测试用例

Ecma TC39规范制定流程

• 以任何形式提交想法
• 正式文档
• 草案阶段：有语法语义的描述
• 候选阶段：规范文本完备，至少有两个已经实现的建议
• 被批准

W3C会议

年度大会

• AC
• TPAC

工作组会议

• 每月会议
• 各种研讨会

W3C会议

年度大会

• GA

TC39会议

• 每1-2个月

课后总结

到这里，就已经把Web前端开发的发展趋势和Web标准学习完毕，收获满满。对Web整体有了更深的了解。

引用参考

W3C会议：github.com/tc39/ecma26…
TC39会议：www.ecma-international.org/about-ecma/…
W3C规范流程：www.w3.org/2020/Proces…
IDL：webidl.spec.whatwg.org/
TC39制定规范流程：www.ecma-international.org/publication…
Contributing to ECMAScript：github.com/tc39/ecma26…