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

Web 标准与前端开发

1.关于前端开发

起源、架构、变迁

起源

"Suppose all the information stored on computers everywhere were linked. Suppose l 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

架构

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

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

前端应用的领域

• To Business
• To Customer
• To Developer

前端应用的领域之浏览器

• Desktop

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

• Mobile

  • Android
  • Safari

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

前端应用的领域之服务器

• Node js
• Express js
• koa
• Deno

前端应用的领域之终端和跨端

• 命令行/终端

  • Webpack CLI
  • Babel CLI
  • Vue CLI
  • React CLI

• 桌面跨端

  • Electron
  • Nw.js

• 移动跨端

  • React Native
  • Flutter

语言、框架、工具

语言

• HTML
• CSS
• JavaScript
• WebAssembly

框架

• node.js

  • author: Dyan Dahl

• koa

  • author: TJ Holowaychuk

• react

  • author: Jordan Walke

• vue

  • author: 尤雨溪

• TS

  • author: Anders Hejlsberg

• git

  • author: Linus Torvalds

• babel

  • author: Sebastian McKenzie

• Webpack

  • author: Tobias Koppers

• esbuild

  • author: Evan Wallace

工具

• 浏览器
• 网络
• 服务器

前端学习路线图

roadmap.sh/frontend

2.关于Web标准

了解Web标准组织

• W3C

  • 全称：World Wide Web Consortium

  • 官网：www.w3.org

  • Github：github.com/w3c

  • 规范查询：www.w3.org/TR

  • 主要 Web 相关标准

    • DOM
    • CSS
    • Web Audio API
    • Web Storage
    • Web RTC
    • WebAssembly JavaScript Interface

• Ecma TC39

  • 全称：Ecam International

  • 官网：www.ecma-international.org

  • Tc39：tc39.es

  • Github：github.com/tc39

  • Discourse：es.discourse.group

  • 主要 Web 相关标准

    • ECMAScript Language Specification (ECMA-262)
    • ECMAScript Internationalization API Specificaition (ECMA-402)

• WHATWG

  • 全称：Web Hypertext Application Technology Working Group

  • 官网：whatwg.org/

  • Github：github.com/whatwg

  • 规范查询：spec.whatwg.org/

  • 主要 Web 相关标准

    • HTML
    • Fetch
    • Enchoding

• IETF

  • 全称：Internet Enginnering Task Force

  • 官网：www.ietf.org/

  • Github：github.com/ietf

  • 主要 Web 相关标准

    • HTTP
    • HTTP/2
    • HTTP/3
    • JSON

W3C与Ecma会员

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

W3C 规范制定流程

0. Explainer demo
1. Find the right community/group
2. Web IDL for APIs
3. Step-by-step algorithms
4. GitHub,Markdown,respec,bikeshed,etc
5. Get an early review w3ctag/design-reviews
6. Write web-platform-tests(WPT) tests

Ecma TC39规范制定流程

0. Championing a proposal at TC39
1. How to write a good explainer
2. Presenting a Proposal to TC39
3. Reading a proposal draft
4. Stage 3 Proposal Reveiews
5. How to experiment with a proposal before Stage4
6. Implementing and shipping TC39 proposal

如何参与 – 关注会议

W3C 会议

• 年度大会

  • AC

    • 全称：Advisory Committee

  • TPAC

    • 全称：Technical Plenary and Advisory Committe

• 工作组会议

  • 每月会议
  • 各种研讨会

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

Ecam 会议

• 年度大会

  • GA

    • 全称：General Assembly

• TC39 会议

  • 每 1-2 月