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

用户835936271820
123 阅读5分钟

这是我参加【第五届青训营】笔记创作活动的第15天

今天跟着李松峰老师了解了web标准与前端开发的相关知识，并整理了笔记。

01-关于前端开发

起源、架构、变迁

起源是Tim Berners-Lee提出的一个类似万物互联的一个建议，提出web的构想。 计算机网络诞生于上个世纪的60年代，标志性通信协议是TCP/IP。

上网指接入Internet，它是世界上相互连接的计算机构成的网络。

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

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

前端应用的领域

To Business———-企业应用

To Customer———-面向终端的客户

To De ve loper———-开发者

浏览器

桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器，事实上随着谷歌Chromium开源项目的不断攻城掠地，也随着开源运动的不断属性，浏览器的多样性正在减少。因为Edge和Opera都已经选择站到了谷歌的阵营，所以事实上只有Chrome、Safari和Firefox三个浏览器。目前，Chrome浏览器的市场份额达到67.55%，具有事实上的垄断地位。

移动浏览器主要是Chrome、Safari，还有国内小程序提供商定制的一些浏览器引擎。换句话说，前端不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上跑的小程序。

服务器

服务器的开发目前主要还是依托于Node.js，目前包括npm包管理平台已经成为世界最大的程序包管理平台，到目前为止已经超过130万。还有Express、Koa等Web开发框架。新的服务开发框架Deno也需要关注。

终端和跨端

这个应用领域通常是开发者工具，比如命令行工具里的Webpack、Babel、React、Vue都有CLl (Command-Line Interface)版，而桌面跨端主要有Electron和NW.js，移动跨端有React Native，Flutter等。目前世界上最流行的编码环境VSCode就是基于Electron的一个Web应用。

语言、框架、工具

在web之初只有html这一种语言能够构建网页结构，后来出现css和javascript，构成了浏览器运行的三门主要语言，2019出现webassembly，第四种语言，是一种低级的类似汇编的语言，可以与javascript进行互操作、共享内存，使得浏览器的运行速度达到接近原生的速度进行运行。

相关框架

image-20220730204622022.png 了解框架时可以先了解框架的作者，更好地理解框架的应用和作用。

推荐文章：深入理解现代浏览器、An overview of HTTP

image-20220730205354840.png image-20220730205336699.png

前端学习路线图

推荐网站: roadmap.sh，点开之后选择Fronend

02-关于web标准

了解web标准组织

image-20220730205837595.png

W3C与Ecma会员

image-20220730210307710.png

image-20220730210402762.png

  • W3C目前在全球有444家会员(link)，其中北航总部（中国区）会员46家(link)
  • Ecma的AM(Associate Member)会员目前有18家，中国公司有字节跳动、360、阿里、华为、腾讯等5家(link)中国除有5家AM会员，还有一家SPC (Small Private Company，小型私有公司)会员Sujitech。另外，大家可以关注一家西班牙的公司lgalia。

W3C流程

image-20220730210757755.png

我们看一下W3C规范的生命周期，借以了解W3C规范的制定流程。

  • WD: Working Draft，即工作草案
  • -CR: Candiate Recommendation，即候选推荐
  • -PR: Proposed Recommendation，即提议推荐
  • REC: Recommendation，即推荐标准
  • 推荐标准就是W3C的标准的最终形态，不是强制性标准。

一个规范从草案到正式发布，通常都涉及以下几个方面:

  • Explainer:就是建议说明文档，比如要标准化某个领域的API，要先写一个建议文档，Slide上有个链接，里面包含相关示例:w3ctag.github.io/explainers;
  • Find the right community/group:找到合适的社区或小组，把建议文档提交到社区或小组里充分讨论;-Web IDL for APls: IDL (Interface Description Language，接口描述语言)，用于描述API的一种标准方式:heycam.github.io/webidl/ ;
  • 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测试；

TC39流程

Ecma TC39规范制定流程：

2.4 Ecma TC39规范制定流程 负责制定ECMAScript规范的是TC39，TC是Technial Committee，技术委员会的意思。

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

如何参与———关注会议

W3C会议
年度大会

AC (Advisory Committee)

TPAC (Technical Plenary and Advisory Committee)

工作组会议

每月会议

各种研讨会link

W3C会议介绍

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

Eema会议
年度大会

GA(General Assembly)

TC39会议

每1-2个月

avatar
文章
阅读
粉丝