Web标准与前端开发 - 笔记

2023-03-17 10:58:48 浏览数 (1)

关于前端开发：起源、架构、变迁、前端应用领域、语言、框架、工具、前端学习路线 关于 Web 标准：标准组织、W3C 及 Ecma 会员、W3C 规范制定流程、如何参与标准制定 一些问题和回答

# Web 标准与前端开发 - 笔记

# 关于前端开发

# 起源

在 1989 年，在 CERN 工作的 Tim Berners-Lee 写了一个关于信息管理的建议《Informational Management: A Proposal》，提及基于超文本来构建文档网络的想法，这份文档被公认为 Web 的起源。

# 架构

直到现在，很多人也不是很清楚 “上网” 指的是上什么网。“上网” 实际上指的就是接入 Internet，而我们平时使用搜索引擎、访问网页、使用网络聊天应用都是指使用 Web。前者相当于一个高速公路，提供各种底层的数据传输协议、架构等，后者相当于是一个非常大的物流公司，提供具体服务，比如说：在浏览器中输入网址、访问网页，实际上就是访问远程服务器的 80(HTTP)/443(HTPPS) 端口，而还有其他的服务（比如收发邮件）则使用的是另外的对应端口。

1989 年诞生时，Web 由三种技术构成：HTML、HTTP、URL，而 CSS 和 JavaScript 是几年之后（1995 年前后）才出现的。

HTML 是超文本标记语言，用来做 Document；

HTTP 是超文本传输协议，用来传输 Document，在 TCP/IP 之上，封装的是 HTTP 这个资源的数据包；

URL 是统一资源定位符，在 HTTP 的上下文中，一般也被称为网址，在浏览器的地址栏中显示，例如 https://developer.mozilla.org 。

客户端（浏览器）因为是直接面向用户，所以就是前端，而服务器因为用户不能直接接触到，所以就成了后端。

# 变迁

  1. 1989-2004（只读时代）： HTML/CSS/JavaScript
    • 单项发布
    • 静态只读
    • 链接跳转
    • 刷新页面
    • 表格对齐元素
    • CGI

    在这个时代中，浏览器更像是一个阅读器，页面的更新必须依靠浏览器的刷新（重新向服务器发送一次请求，获取 HTML）进行页面的整体替换。

  2. 2005-2010（体验时代）： Ajax/Web API/jQuery
    • 动态交互
    • 社交媒体
    • 用户生成内容（UGC）
    • 单页应用（SPA）
    • jQuery
    • YUI

    这个时代的标志就是 Ajax，浏览器可以不用刷新网页，通过 JS 的对象在后台就能向服务器发送请求，局部更新页面，实现了 Web 从一个简单的页面到 Web App 的跨越。

  3. 2010-2021（敏捷时代）： Fetch/Node.js/Webpack
    • 模块化
    • 组件化
    • 转译（transpiling）
    • 打包（bundling）
    • React&Vue

    这个时代是从 iPhone 的发布开始的，Web 逐渐开始跨向移动领域，用户体验越来越被重视，前端开始真正变成一个独立的工种（职业），得益于 Node.js 的问世，前端工程师也能够处理后端的工作了，为前端的规模化、敏捷化打下了基础

# 前端应用领域

  1. ToB（To Business）：面向企业、大型组织 & 机构
    • 包括商业引擎、CRM、中后台管理面板等
  2. ToC（To Customer）：面向终端客户 & 消费者
    • 包括门户网站、电商平台、在线教育、新闻资讯、生活娱乐平台等
  3. ToD（To Developer）：面向开发者
    • 包括面向开发者的平台、框架、工具、VSCode 等

Web 浏览器主要分为：

  1. 桌面端：Chrome 内核（Chrome、Edge、Opera）、Firefox、Safari
  2. 移动端：Android（WebView）、IOS（Safari）

服务器技术主要有：

  • Node.js
  • Express.js
  • koa
  • Deno（基于 Rust 语言的新一代 js&ts 运行时）

终端和跨端技术主要有：

  1. 命令行 / 终端（脚手架）：
    • Webpack CLI
    • Bacel CLI
    • React/Vue CLI
  2. 桌面跨端：
    • Electron
    • NW.js
  3. 移动跨端：
    • React Native
    • Flutter

# 语言、框架、工具

浏览器语言有：

  1. HTML、CSS、JavaScript：在很长时间都是浏览器中只能使用的语言
  2. WebAssembly：2019 年成为标准，是一种类汇编的语言，可以由 C/C /Rust/Kotlin 等语言编译而成，可以与 JavaScript 互操作、传递消息、共享内存，速度接近平台的原生速度

常用框架和工具有：Node.js、koa、React、Vue、TypeScript、git、Babel、webpack、esbuild 等 *（在学习一个框架 / 工具时，可以去了解一下其作者，写这个框架 / 工具的初衷是什么，这样可以帮助更好的理解和学习）*

# 浏览器、网络、服务器

推荐两篇文章：

  • 深入理解现代浏览器：告诉你在浏览器输入网址按回车之后，真正发生的事情
  • HTTP 概述 - MDN：帮助你理解 HTTP 协议

# 前端学习路线

路线图推荐：

  • 中文：ObjTube
  • 英文：RoadMap.sh

学习永无止境，翻滚吧后浪！

# 关于 Web 标准

# 标准组织

  1. W3C: World Wide Web Consortium（万维网联盟） 制定了 HTML、CSS、DOM 相关标准
  2. Ecma: Ecma International（Ecam 国际） 制定了 JavaScript 相关的语言标准，如：ES5、ES6、ES2015、ES2016、ES2017、ES2018、ES2019、ES2020、ES2021
  3. WHATWG: Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组） 制定了 DOM、Web API 相关标准
  4. IETF: Internet Engineering Task Force（互联网工程任务组） 制定了 HTTP 等基础通信协议标准

# W3C 及 Ecma 会员

  • W3C 目前在全球有 457 家会员，其中北航总部（中国区）会员 47 家 全球很多著名互联网公司（特别是浏览器厂商）都是 W3C 会员，根据加入组织的年营业额来缴纳会费
  • Ecma 的 AM（Associate Member）会员目前有 18 家，中国公司有字节跳动、360、阿里、华为、腾讯等 5 家 Ecma 的会员分为 AM 和 OM，OM 比 AM 多了一项投票权，可以决定一些 Ecma 的重大事务（包括是否批准新会员的加入），AM 的会费一年大概 250,000RMB 左右

# W3C 规范制定流程

  1. WD（Worker Draft）
  2. CR（Candidate Recommendation）
  3. PR（Proposed Recommendation）
  4. REC（Recommendation）
# Contribute

Explainer demo

Find the right community/group

Web IDL for APIs link

Step-by-step algorithms

GitHub, Markdown, respec, bikeshed, etc.

Get an early review w3ctag/design-reviews

Write web-platform-tests (WPT) tests

# Ecma TC39 规范制定流程

  1. STAGE 0（strawman）：以任何形式提交的想法
  2. STAGE 1（proposal）：正式的建议 & 文档
  3. STAGE 2（draft）：有语法 & 语义相关的描述
  4. STAGE 3（candidate）：规范文本完备且至少有两个实现
  5. STAGE 4（finished）：成为标准
# Contribute

Championing a proposal at TC39

How to write a good explainer

Presenting a Proposal to TC39

Reading a proposal draft

Stage 3 Proposal Reviews

How to experiment with a proposal before Stage 4

Implementing and shipping TC39 proposals

# 如何参与标准制定

# W3C 会议

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

# 参加 W3C 会议
  1. 年度大会
    • AC（Advisory Committee）：每个会员出一个代表，每年定期开会，主要是事务性的会议，持续 2-3 天
    • TPAC（Technical Plenary and Advisory Committee）：技术大会，对所有会员开放，持续一周
  2. 工作组会议
    • 每月会议
    • 各种研讨会
# 参加 Emca 会议
  1. 年度大会：GA（General Assembly），讨论重大事宜，投票通过每年的新会员申请
  2. TC39 会议：每 1-2 个月

# 一些问题

# 加入会员对公司有什么好处？

加入会员对公司来说，有几个方面的好处：

  1. 这些标准决定未来行业发展趋势，很多公司在做基础设施建设的时候，也会产出一些类似标准的方案，如果作为会员，就能够深入得到参与到工作组的讨论，进行对前景早期的交流，获取行业内部第一手的资料，对公司的发展 & 部署都有帮助
  2. 作为会员公司的员工，能够代表公司参加会议，接触到标准前沿，认识到行业内的大佬，对整个学习氛围都是很有帮助的

# 现在还要学 jQuery 吗？

在大公司的项目里，基本见不到用 jQuery 的了

对于技术发展不是那么快的公司，项目代码里可能还会用到 jQuery

之前流行的原因是：早期很多浏览器的实现不一致，jQuery 解决了跨浏览器的兼容问题

但是现在浏览器的发展趋同化，浏览器的多样性实际上在减少，兼容性的问题越来越少，jQuery 就没那么重要了；相反，组件式开发框架 React、Vue 和函数式实用工具库变得比较受欢迎

所以 jQuery 没有必要花太多时间去学，如果感兴趣可以学一学

# Node.js 现在在大公司的应用方向？

由于前端工程师学习 Node.js 比较简单，所以应用还是比较广泛的，比如 ToB 和 ToD：

  • BFF（Backend For Frontend）：在后端与前端之间的一个中间层，根据前端不断变化的应用，对后端接口进行进一步封装
  • npm：大公司内部一般都有自己的 npm 仓库，npm 包（自研组件库等）都是用 Node.js 来写的

# 要先搞透 js 再学框架还是同时深入？

框架和 js 的学习是相辅相成的，框架实际上是一种更高层次的抽象，对框架的实践 & 运用也能使你对 js 架构、设计模式层面有更深入的理解

# 元宇宙跟前端有关系吗？

有，元宇宙平台可以给前端提供 API 接口，从而使开发者可以在元宇宙平台中开发丰富多样的应用

# WebAssembly 是前端人员去做吗？是否意味着前端要学习 c /rust/go？

WebAssembly 实际上是两种开发生态的融合，为了解决前端的计算量 & 性能问题，JavaScript 的性能是毫秒级的，Rust/Go 等原生语言的性能是纳秒级的

任务层面：前端开发者可以了解怎么把原生的应用转换成 WebAssembly，以及其完善、扩展

提高层面：作为前端开发者也应该了解底层的系统编程语言，Rust/Go 都是很值得去学习的，以便了解系统底层原理

# 怎么看待低代码平台？

低代码平台对前端来说是种机遇，可以为前端提供很多工作岗位，但同时也是一种挑战，需要很多新的算法、技术解决方案

# WebAssembly 用的多吗？在字节跳动应用如何？

WebAssembly 在大公司应用的还是很多的，大公司对于解决应用性能的需求是十分迫切的，且也有相应的资源进行人才扩招和项目落地

在规模不是太大的公司，对性能的需求不是特别高，就不会优先考虑

# 使用类似 nest 的 Node.js 后端框架在性能上会和 spring、go 写的后端差距很大吗？

很大。建议看一下 esbuild 的官网，esbuild 使用 go 语言编写，而 webpack 使用 Node.js 编写，其性能差异可达百倍。

# 参考资料

  • 字节青训营课程
  • MDN 中文文档
jquery http assembly web 笔记

0 人点赞