Web 标准与前端开发 | 青训营笔记

bysimonluo
119 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第 8 天。 （第八篇笔记）

本篇笔记记录 Web 标准与前端开发相关的内容，主要包括前端开发的 起源、架构、变迁；前端应用的领域；前端的语言、框架、工具；前端学习的路线图；以及 Web 的各种标准。

前端开发

起源（时代发展）架构变迁

在前端发展中，可以不同阶段分为三个时代：

  • 只读时代（1989～2004）：

    • 主要技术： HTML / CSS / JavaScript；
    • 特点：单向发布；静态只读；链接跳转；刷新页面；表格对齐元素；CGI；
    • 表现为：展示数据、内容的时代。

  • 体验时代（2005～2010）：

    • 主要技术：AJAX/ Web API / jQuery；
    • 特点（关键词）：动态交互；社交媒体；用户可产生内容；单页应用；jQuery；YUI；
    • 表现为：用户可以提交内容；可以与网络应用交互；

  • 敏捷时代（2010～ now）

    • 主要技术：Fetch / Node.JavaScript / Webpack；
    • 特点（关键词）：模块化；组件化；转译；打包；框架（React、Vue）
    • 表现为：各种 Web 技术不断涌现，使得开发网络应用更加敏捷；

应用领域

根据面向不同的群体，有不同的领域：

  • To Business
  • To Customer
  • To Developer

根据不同的运营环境：

  • 浏览器：包括桌面浏览器和移动浏览器，以及移动 App 里的 Web View，都属于浏览器直接渲染的 Web 应用；

    • 桌面浏览器包括：Chrome、Edge、FireFox、Opera、Safari；
    • 移动浏览器主要是 Chrome 和 Safari。
    • 小程序提供商定制的浏览器引擎。

前端不仅包括要开发在浏览器和 Web View 运行的网页，还要开发在小程序中运行的小程序 Web 应用。

  • 服务器：

    • 目前主要还是 Node.js。npm 包管理pintail为世界最大的程序包管理平台。
    • 还有 ExpressJS、koa 等 Web 开发框架生态。
    • Deno 新 JavaScript 开发运行环境。也是 Node.js 的作者 Ryan Dahl 开发的作品。

不同的终端和跨端：

  • 命令行/终端：

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

  • 桌面跨端：

    • Electron
    • NW.js

  • 移动跨端：

    • React Native
    • Flutter

语言、框架、工具

前端必须掌握的三门语言：

  • HTML 负责构建页面；
  • CSS 为页面提供装饰；
  • JavaScript 赋予页面的动态和交互；

更多的前端工具以及其作者：

  • Node.js - Ryan Dahl
  • koa - TJ Holowaychuk
  • React - Jordon Walke
  • Vue - 尤雨溪
  • git - Linus Tovalds
  • Babel - Sebastian Mckenzie
  • webpack - Toblas Koppers
  • esbuild - Even Wallace

前端离不开前端代码运行的环境：浏览器、网络和服务器。

前端学习路线：Frontend Developer Roadmap: Learn to become a modern frontend developer

前端 Web 标准

可以从三个方面了解：

  • Web 标准组织；
  • W3C 和 ECMA 的情况；
  • W3C、ECMA 等规范的制定流程；

Web 标准组织

  • W3C
  • ECMA
  • WHATWG
  • IETF

关于 Web 规范的制定流程

W3C 规范制定流程：

image-20220801152731999

Source / W3C Process Document

  • WD： 工作草案 Working Draft
  • CR：候选推荐 Candidate Recommendation
  • PR：提议推荐 Proposed Recommendation
  • REC：推荐标准 Recommendation（W3C 标准最终形态，但不是强制性标准）

W3C 的规范从草案到发布涉及下列方面：

  • Explainer：建议说明文档；例如标准化某个领域的 API ，要先写一个简易文档。
  • Find the right community / group：找到合适的社区和小组，将简易文档提交到该社区和小组充分讨论；
  • Web IDL for APIs ：IDL（Interface Description Language，接口描述语言），用于描述 API 的一种标准方式；（🌰 Web IDL Standard (whatwg.org) ）
  • 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测试。

ECMA TC39 规范制定流程：

负责制定 ECMAScript 规范的是 TC39，（TC是Technial Committee，技术委员会的意思）：

  • Stage 0：strawman，以任何形式提交的想法；
  • Stage 1：proposal，提案，特性的正式建议；
  • Stage 2：draft，草案，具有语法和语义的描述；
  • Stage 3：candidate，候选，规范文本完备，有了两个实现 ；
  • Stage 4：finished，完成，可以成为标准，通过单元测试

Web 标准会议

  • W3C 会议
  • ECMA 会议

🔗 贴上相关的链接：

W3C：

Ecma TC39

WHATWG

IETF

avatar
文章
阅读
粉丝