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

凤之兮原
132 阅读3分钟

这是我参与【第四届青训营】笔记创作活动的第5天，今天学习了 Web 标准与前端开发 的一些知识点

1. 关于前端开发

1.1 关于前端开发：起源、架构、变迁

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

Tim Berners-Lee, inventor of the World Wide Web

image.png

很多人分不清“上网” 是上的哪个网？即使在互联网的诞生地也是如此。Web 的普及和深入人心由此可见一斑。

事实上，上网指的是 接入 Internet，它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的 60 年代，标志性通信协议是 TCP/IP

image.png 2019 年 3 月 30th Anniversary of Web

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

  • HTML
  • HTTP
  • URL

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

image.png

互联网目前有三个时代

  1. 只读时代（1989 - 2004 ）

    主要的技术： HTML / CSS / JavaScript

  • 单向发布
  • 静态只读
  • 链接跳转
  • 刷新页面
  • 表格对齐元素
  • CGI

  1. 体验时代（2005 - 2010 ）

    主要的技术： Ajax / Web API / jQuery

  • 动态交互
  • 社交媒体
  • 用户生成内容（UGC）
  • 单页应用（SPA）
  • jQuery
  • YUI

  1. 敏捷时代（2010 - 2021 ）

    主要的技术： Fetch / Node.js / Webpack

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

1.2 前端应用的领域

  • To Business
  • To Customer
  • To Developer

1.2.1 前端应用的领域 -- 浏览器

桌面应用（Desktop）：

image.png

手机应用（Mobile）：

image.png

1.2.2 前端应用的领域 -- 服务器

  • Node.js image.png

  • Express
    image.png

  • Koa image.png

1.2.3 前端应用的领域 -- 终端和跨端

image.png

命令行 / 终端

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

桌面跨端

  • Electron
  • NW.js

移动跨端

  • React Native
  • Flutter

1.2.4 前端应用的领域 -- 语言、框架、工具

  • 语言 image.png

WebAssembly

image.png

  • 框架 image.png

1.2.4 前端应用的领域 -- 浏览器、网络、服务器

文章：深入理解现代浏览器

image.png

文章：An overview of HTTP image.png

1.2.5 学习路线

image.png

2. 关于 Web 标准

2.1 标准组织

W3C: World Wide Web Consortium

ECMA: Ecma International

WHATWG: Web Hypertext Application Technolody Working Group

IETF: Internet Engineering Task Force

2.1.1 W3C、ECMA

2.1.2 WHATWG、IETF

2.2 W3C 及 ECMA 会员

W3C 目前在全球有 457家 会员，期中北航总部（中国区）会员 47家

ECMA 的 AM（Associate Member）会员目前有 18 家，中国公司有字节跳动、360、阿里、华为、腾讯等 5 家

image.png

2.3 W3C 规范制定流程

Reference：The W3C Recomendation Track

  • Explainer demo
  • Find the right communtity / group
  • Web IDL for APIs link
  • Step-by-step algoithms
  • Github, Markdown, respec,bikeshed, etc.
  • Get an early review w3ctag/design-reviews
  • Write web-platform-tests(WPT) tests image.png

2.4 ECMA T39 规范制定流程

Reference：ECMAScript 2021 language specification

image.png

  • Champinoning 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 proposal before Stage 4
  • Implementing and shipping TC39 proposals

Reference：Contributing to ECMAScript

2.5 如何参与————关注会议

2.5.1 W3C 会议

  • 年度大会
    • AC (Advisory Committee)
    • TPAC(Technical Plenary and Advisory Committee)
  • 工作组会议
    • 每月会议
    • 各种研讨会

补充：关于 W3C 会议

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

image.png

image.png

image.png

image.png

2.5.2 ECMA 会议

  • 年度大会
    • GA (General Assembly)
  • TC39会议
    • 每个1-2月

Reference：Meeting calendar

image.png

image.png

总结：

以上就是一些关于 Web 标准与前端开发的一些知识，期望以后能够不断为社区做出贡献~

avatar
文章
阅读
粉丝