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

弗拉明戈
112 阅读4分钟

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

1 前端开发

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

(1) Web起源

  • 1989年 Tim Berners-Lee 提出 Web 构想
  • “上网”：接入互联网。其中使用最多的是打开浏览器浏览网页。互联网标志协议：TCP/IP，Web的标志协议：HTTP

(2) Web架构

  • 1989年，Web诞生之初，由三种技术组成:
    • HTML：超文本传输语言
    • HTTP：通信协议
    • URL:统一资源定位符
  • CSS 与JavaScript是后几年才出现的
  • Web原理：用户发出从浏览器客户端请求，通过HTTP协议发送到服务器，获取相应的HTML文档，该文档通过浏览器解析最终呈现到屏幕上

前端初始架构.png

(3) Web变迁

  • 只读时代:1989-2004
    • HTML/CSS/JavaScript
    • 客户端相当于一个阅读器，不能在不刷新的情况下更新页面
  • 体验时代：2005-2010
    • Ajax/Web API/jQuery
    • 2005年，Ajax技术可以在不刷新页面下，通过js对象在后台想服务器发送请求，然后修改DOM将内容展示在网页中，响应用户交互，动态从服务器获得数据更新页面。
    • Web从简单页面，实现了向Web应用的跨越
  • 敏捷时代：2010-2021
    • Fetch/Node.js/Webpack
    • 2007年，苹果发布iphone手机，互联网进入移动时代。用户体验得到重视，前端慢慢独立称为一个工种，得到人们的广泛认可，也因此蓬勃发展。
    • 2009年，基于V8引擎的node.js使得前端可以开发编写后端，为前端规模化、敏捷化打下基础。
    • 关键词：模块化、组件化、转译(transpiling)、打包(bundling)、Rreact.js、Vue.js

1.2 前端应用的领域

(1) To Be角度

  • To Business 企业级应用
  • To Customer 面向顾客，方面广泛
  • To Developer 面向开发者

(2) 应用环境角度

  • 浏览器
    • 桌面浏览器：Google Chrome、Firefox、Edge、Opera、Safari
      • 从内核角度来说分为3类：
        • Chromium内核：Chrome、Opera和edge等
        • Webkit内核：Safari
        • Gecko内核：Firefox
    • 移动浏览器: Android、IOS
  • 服务器
    • Node.js、Express.js、下一代框架Koa.js
  • 终端和跨端
    • 命令行/终端工具——脚手架
      • Webpack、Babel、vue、Rreac
    • 跨端
      • 桌面跨端：Electron、NW.js
      • 移动跨端:React Native、Flutter

1.3 前端开发的语言、框架和工具

(1) 语言

  • HTML、CSS、JavaScript
  • WebAssembly: W3C在2019年底将其作为官方标准。类汇编，是生成的二进制指令。一般使用高级语言c\c++\rust编写再转化为汇编语言。它比JavaScript更快，并且WASM 1.0已经出现在主流浏览器中。

(2) 框架与工具

  • 建议先了解框架作者，写框架的初衷，帮助理解框架应用

框架与作者.png

1.4 前端开发之浏览器、网络和服务器

(1) 浏览器——工作原理

  • 推荐文章：github.com/75team/w3c/…
  • 了解前端代码运行环境，需要了解浏览器的工作原理，在URL中输入再点击回车，会发生什么(学习完后写笔记补充)

(2) 网络——HTTP协议

HTTP协议.png

1.5 前端学习路线图

2 Web标准

2.1 标准组织

2.2 W3C规范制定流程

W3C制定流程.png

  • 更多信息：www.w3.org/2020/Proces…
  • 编写一个提案的流程：
    • Explainer
    • Find the right communit/group
    • Web IDL for APIs
    • Step-by-Step algorithms
    • GitHub, Markdown, respec, bikeshed, etc
    • Get an early review w3ctag/design-reviews
    • Write web-platform-tests(WPI) tests

2.3 Ecma TC39规范制定流程

Ecma标准制定流程.png

2.4 如何参加——关注会议

  • W3C会议
    • 年度大会
      • AC：会议管理类会议 一年2次
      • TPAC：一年一度全员技术大会，深入讨论未来开放Web平台技术方向；1-2周，重点关注；注册为会员即可线上参加.
    • 工作组会议
      • 每月会议
      • 各种研讨会
  • Ecma会议
    • 年度大会
      • GA：会员投票等
    • TC39
      • 日常会议：每1-2月召开
avatar
文章
阅读
粉丝