关于前端开发

起源、架构、变迁

起源

"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."

翻译：假设存储在各处计算机上的所有信息都是链接的。假设我可以对我的计算机进行编程，创建一个空间，在这个空间里，所有的东西都可以链接到所有的东西。

架构

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

• HTML
• HTTP
• URL

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

变迁

只读时代	体验时代	敏捷时代
1989-2004	2005-2010	2010-2021
HTML / CSS / JavaScript	Ajax / Web API / jQuery	Fetch / Node.js / Webpack
单向发布 静态只读 链接跳转 刷新页面 表格对齐元素 CGI	动态交互 社交媒体 用户生成内容（UGC） 单页应用（SPA） jQuery YUI	模块化 组件化 转译（transpiling） 打包（bundling） React.js Vue.js

前端应用的领域

• To Business
• To Customer
• To Developer

浏览器

Desktop：

• Google
• Edge
• Firefox
• Opera
• Safari

Mobile：

• Android
• Apple

服务器

• Node.js
• Express
• koa
• deno

终端与跨端

命令行 / 终端：

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

桌面跨端：

• Electron
• NW.js

移动跨端：

• React Native
• Flutter

语言、框架、工具

语言

• HTML（结构）

• CSS（样式）

• JavaScript（行为）

• WASM

  是 W3C 官方推出的 WebAssembly 标准，可以用 C、C++、Rust 编写

框架

• Node.js
• koa
• React
• Vue
• TypeScript
• git
• Babel
• webpack
• esbuild

工具

浏览器

baijiahao.baidu.com/s?id=175689…

网络

developer.mozilla.org/zh-CN/docs/…

服务器

前端学习路线

roadmap.sh/frontend

关于Web标准

了解Web标准组织

• W3C：World Wide Web Consortium

  官网

  Github

  规范查询

• Ecma：Ecma International

  官网

  TC39

  Github

  Discourse

• WHATWG：Web Hypertext Applicaiton Technology Working Group

  官网

  Github

  规范查询

• IETF：Internet Engineering Task Force

  官网

  Github

W3C与Ecma会员

• W3C 目前载全球有457家会员，其中北航总部（中国区）会员47家
• Ecma 的 AM（Associate Member）会员目前有18家，中国公司有字节跳动、360、阿里、华为、腾讯、Sujitech 6家

W3C流程

1. Explainer demo

   解释提案。

2. Find the right community / group

   找到相应的社区 / 小组。

3. Web IDL for APIs link

   用 Web IDL 设计接口。

4. Step-by-step algorithms

   一步一步地把算法描述清楚。

5. GitHub，Markdown，respec，bikeshed，etc.

   使用的工具。

6. Get an early review w3ctag / design-reviews

   尽早联系评审。

7. Write web-platform-tests (WPT) tests

   写测试用例。

TC39流程

1. Championing a proposal at TC39

   在 TC39 作为提案的负责人。

2. How to write a good explainer

   了解如何写一份好的说明书。

3. Presenting a Proposal to TC39

   在 TC39 上以某种形式展示提案。

4. Reading a proposal draft

   阅读其他提案草案。

5. Stage 3 Proposal Reviews

   第3阶段提案书评审。

6. How to experiment with a proposal before Stage 4

   如何在第4阶段之前对提案进行实验。

7. Implementing and shipping TC39 proposals

   实施和运输 TC39 提案。

如何参与——关注会议

W3C会议

• 年度大会

  • AC（Advisory Committee）

  • TPAC（Technical Plenary and Advisory Committee）

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

• 工作组会议

  • 每月会议
  • 各种研讨会

Ecma会议

• 年度大会

  • GA（General Assembly）

• TC39 会议

  • 每1-2个月