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

雪琰焦糖
63 阅读8分钟

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

关于前端开发

起源、架构、变迁

起源

image.png 论文PDF

  在 Timothy John Berners-Lee 于 1989 年发表在 CERN 机构的一份声明中：他提出了一个“万维网”的建议——— "Suppose all the information stored oncomputers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything."  “假设所有存储在电脑上的信息都链接在一起，假设能给我的电脑编程，创造一个空间，让所有的东西都能相互连接在一起”。这就是 Web 的起源。

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

架构

image.png

  1989 年诞生时，Web 由三种技术构成：HTML 是内容，HTTP 是超文本传输协议，URL 是唯一标识资源的协议：统一资源定位符；CSS 和 JavaScript 是几年后才出现的。而 Web 的架构则很清晰明了：网页与服务器通过计算机网络连接。

变迁

只读时代 1989-2004

  • 关键词：
    • 单向发布
    • 静态只读
    • 链接跳转
    • 刷新界面
    • 表格对齐元素
    • CGI

  从 1989 年 Web 出现之后，网页每次改变都需要同步到后端，然后后端返回一个完整的网页才能更新网页。

体验时代 2005-2010

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

  在 2000 年的候 IE 就实现了 XMLHttpRequest 技术，但直到谷歌推出了 Gmail 和 Gmap 这两款产品的时候，Ajax 技术才被正确使用并被大众接受。Ajax 的出现标志着前端获得了更多的自主权，前端可以做更多的工作，“网页应用”的概念第一次被提出。这时期一些经典的库出现了比如 jQuery。

敏捷时代 2010至今

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

  在苹果发布了 iphone 手机后，随着用户体验更加受重视，前端的工作职责也更多了，开始出现独立的“前端开发岗位”。随着基于 V8 引擎的 nodejs 出现，前端工具更加丰富，以前后端的一些模块化，工程化等概念也开始引入前端。这时候一些工具和框架开始大行其道，比如 webpack，react，vue 等。

前端应用的领域

工作领域

浏览器

  浏览器作为最开始的网页浏览工具，也是 JavaScript 的诞生环境，是我们日常使用的工具，我们大多数情况是通过浏览器去访问我们想要访问的地方。而现在的浏览器从内核上来说只有三款了：Chromium——Chrome、Opera、edge；Gecko——Firefox；Webkit——Safari。而 chromium 占比已经达到了 69%（2021），实际性的垄断地位。

服务器

  随着 nodejs 生态的发展，npm 包管理工具已经是世界上最大的包管理工具了。经典的 nodejs 服务器框架有 express、koa 等，它们的出现使得只学习 JavaScript 就可以胜任前后端的开发工作，使得“全栈开发”这个概念得到进一步的实践。

  而在 nodejs 出现十年的时候，它的作者 Ryan Dahl 回忆自己在设计 node 的时候有“十大失误”，并提出 node 的孪生弟弟 deno，全新的 Rust 语言开发，弥补遗憾，值得关注。

终端、跨端

  终端，一般来说就是 Teminal cli 工具，比如 vue cli，create-react-app 等，这也是前端开发可以选择的方向。而跨端的话，对于桌面端来说，现在有 electron、NW.js 这两个比较热门的框架来作为开发工具，而对于移动端来说，还有 react-native、flutter 等。

业务场景

TO B(business)

  B 端一般是面向企业、机构、银行、政府等，这类业务场景一般是构建平台，搭建网站，提供服务。用户上这个平台的时候可以购买、使用、监控、管理他们的服务，这类业务会有很多业务逻辑要写，可信度的要求也比较高，这类业务很赚钱。

TO C(customer)

  C 端一般都是面向普通人，或者说专注于人的基本生活习惯，吃喝玩乐、兴趣爱好等，它就比较偏向潮流、时尚，极大的提高用户体验的地位，这类的业务场景百花齐放，但是核心是用户体验，会更加以人为本。

TO D(developer)

  D 端就是面向程序员自己，自产自销。一般都是为了解决开发痛点，然后自己提出解决方案，为社区开源，获取名利来持续运营。这类的要求比较高，但是基础工资和后续在业内的发展上限是极高的。

语言、框架、工具

语言

  首先，不言而喻，HTML、CSS 和 JavaScript 是前端开发必须掌握的三门语言。HTML 负责结构页面，CSS 为页面提供装饰，JavaScript 赋予页面动态和交互能力。

  在 2019 年的年底，wasm 规范通过了社区认证，主流的浏览器都已经可以支持 wasm。它脱胎于 asm.js，类似于低级的汇编语言，它的二进制非常紧凑，因此可以以接近原生的速度运行，也可以和JS进行互操作，更加的开放、安全、快速。c++/c 等其他语言的模块都可以通过编译为 wasm 模块被浏览器运行。

框架

  • Ryan Dahl
  • TJ Holowaychuk
  • Jordan Walke
  • 尤雨溪
  • Anders Hejlsberg
  • Linus Torvalds
  • Sebastian McKenzie
  • Tobias Koppers
  • Evan Wallace

工具

  学习前端开发，一定离不开前端代码运行的环境。那就是浏览器、网络和服务器。 推荐一篇长文"深入理解现代浏览器"，这篇文章以Chrome作为现代浏览器的示例,图文并茂在讲解了浏览器的工作原理，解释了在地址栏输入URL之后，回车，都会发生什么。

  关于网络和服务器，也需要理解基本概念和原理。有MDN的一篇文章：An overview of HTTP，是HTTP的简介，涉及HTTP请求和响应的过程及概念。关于Web服务器的能力，包括本地文件系统和文件操作、网络和管道API、套接口、子进程等方面。

前端学习路线

rodemap.sh

  图里紫色的标是推荐必须掌握的，绿色的标是推荐学习的，灰色的标是什么时候用到再学就可以的，没有标的就可以大概了解一下。

frontend_00.png

  从这张图里我们可以看一些基本的知识。学习前端要学习计算机网络知识，这是前后端联调的基础；需要学习 html+css+js 经典套餐，这是二十年来的必经之路；学习版本管理 git，因为协作是我们工作顺利的保障；学习一个包管理工具 npm/yarn；学习一种构建工具；学习一门前端框架，react、vue ······

关于Web标准

  Web 标准是由各大标准组织制定，由浏览器和其他 Web 底层框架或工具来实现，再提供给开发者能以最小成本开发适用于多平台的 Web 应用，这些标准是我们能访问无数网站的前提。

了解Web标准组织

W3C与Ecma会员

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

W3C流程

image.png

W3C规范的制定流程：

  • WD: Working Draft，即工作草案
  • CR: Candiate Recommendation，即候选推荐
  • PR: Proposed Recommendation，即提议推荐
  • REC: Recommendation，即推荐标准

推荐标准就是W3C的标准的最终形态，不是强制性标准。

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

  • Explainer : 建议说明文档，比如要标准化某个领域的API，要先写一个建议文档。
  • Find the right community/group : 找到合适的社区或小组，把建议文档提交到社区或小组里充分讨论。
  • Web IDL for APls: IDL (Interface Description Language，接口描述语言)，用于描述API的一种标准方式.
  • Step-by-step algorithms : 分步算法，就是要把算法步骤描述清楚。
  • 工具：GitHub , Markdown , respec , bikeshed。
  • Get an early review w3ctag/design-review : 事先请TAG (Technical Architecture Group，技术架构组) 进行设计评审。
  • Write web-platform-tests (WPT) tests : 编写WPT测试。

TC39流程

Ecma TC39 规范制定流程

负责制定 ECMAScript 规范的是 TC39，TC 是 Technial Committee，技术委员会。

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