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

75 阅读2分钟

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

本篇主要总结老师上课所讲的一些web标准和开发路线,方便读者日后巩固复习~

本堂课的重点内容:

  • 关于前端开发

了解前端开发的起源、架构、变迁,前端应用的领域,语言、框架、工具,以及前端学习路线。

  • 关于Web标准

了解Web标准组织,W3C与Ecma会员,W3C流程,TC39流程以及如何参与。

关于前端开发

前端开发的起源、架构、变迁

源于一个建议,设想所有存储在计算机上的数据都是相互链接的。

架构.png

论文网页版

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

web.png

1989年诞生时,Web由三种技术构成:HTMLHTTPURLCSSJavaScript是几年后才出现的。

早期web技术.png

前端的三个时代

只读时代 (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

前端应用领域

应用领域.png

浏览器

关于前端开发的应用领域,首先从运营环境看一看。首先,浏览器,包括桌面浏览器和移动浏览器,以及 移动App中的WebView,都属于浏览器直接渲染Web应用的范畴。

浏览器.png

服务器

其次,服务器,服务端的开发目前主要还是依托于Node.js这个成熟的JS运行时,npm包管理平台已经成为 世界最大的程序包管理平台,当然,还有Express,Koa等Web开发框架生态。

服务器.png

终端和跨端

第三,终端和跨端,这个应用领域通常是开发者工具,比如命令行工具里的Webpack、Babel、React、Vue都有CLI版,而桌面跨端主要有Electron和NW.js,目前世界上最流行的编码环境VSCode就是基于Electron的一个Web应用。

终端和跨端.png

前端开发总结

最后,我们学习前端开发,一定离不开代码的运行环境,那就是浏览器,网络和服务器。

深入理解现代浏览器

An overview of HTTP

前端路线图

关于Web标准

标准组织

标准组织.png

W3C

官网

GitHub

规范查询

Ecma TC39

官网

TC39

GitHub

规范查询

WHATWG

官网

Github

规范查询

IETF

官网

Github

W3C及Ecma会员

w3c会员.png

W3C规范制定流程

w3c流程-1.png

w3c流程-2.png

Ecma TC39规范制定流程

ecma流程-1.png

ecma流程-2.png

W3C会议

w3c会议-1.png

w3c会议-2.png

w3c会议-3.png

Ecma会议

ecma会议-1.png

ecma会议-2.png