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

87 阅读2分钟

这是我参与[第四届青训营]笔记创作活动的第五天。

关于前端开发:

  • 起源、架构、变迁
  • 前端应用的领域
  • 语言、框架、工具
  • 前端学习路线图

起源、架构、变迁:

1989年诞生时,Web有三种技术构成:

  • HEML
  • HTTP
  • URL

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

image.png

技术变迁:

1、只读时代:1989-2004

HTML/CSS/JavaScript

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

2、体验时代:2005-2010

Ajax/Web API /JQuery

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

3、敏捷时代:2010-2021

Fetch/Node.js/Webpack

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

前端应用的领域:

image.png

浏览器:

桌面浏览器:

image.png

移动浏览器:

image.png

服务器:

image.png

终端与跨端:

命令行/终端:

  • Webpack CLI
  • Babe I CLI
  • Vue CLI
  • Beact CLI

image.png

桌面跨端:

  • ELectron
  • NW.js

image.png

移动终端:

  • React Native
  • Flutter

image.png

语言、框架、工具:

image.png

学习路线图:

image.png

关于Web标准:

  • 了解Web标准组织
  • W3C与Ecma会员
  • W3C流程
  • TC39流程
  • 如何参与

标准组织:

  • W3C: World Wide Web Consortium
  • Ecma: Ecma International
  • WHATWG: Web Hypertext ApplicationTechnology Working Group
  • IETF: Internet Engineering Task Force
  1. w3C目前在全球有457家会员(link) ,其中北航总部〈中国区)会员47家(link)

  2. Eoma的AM (Associate Member〉会员目前有18家,中国公司有字节跳动、360、阿里、华为、腾讯等5家(link)

image.png

W3C规范制定流程:

image.png

  • 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

WC会议 年度大会

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

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

Ecma会议

  • 年度大会
    • GA (General Assembly)

TC39会议

每1-2个月