【青訓營】- Web 標準與前端開發

語言: CN / TW / HK

theme: v-green

大概就是一些【不明覺厲】的資料彙總,雖然不一定用得到,但是就是了解一下吧!

關於前端開發

起源、架構、變遷

關於web的起源

image-20210818005541337

image-20210818005528618

參考文件: 網頁版 PDF版

架構

1989年誕生時,Web由三種技術構成:

  • HTML
  • HTTP
  • URL

CSS和JavaScript是幾年之後才出現的。

image-20210818010228633

變遷

  • 只讀時代
  • 體驗時代
  • 敏捷時代

image-20210818011722396

前端應用的領域

前端應用的領域

  • Business(企業級應用,企業資源管理)
  • Customer(面向消費者,入口網站、電商平臺)
  • Developer(面向開發者,提升開發者開發效率的平臺、工具、框架)

前端應用的領域之瀏覽器

Desktop

  • 谷歌
  • 火狐
  • IE
  • opera
  • safari

Mobile

  • 安卓
  • 蘋果

前端應用的領域之伺服器

  • node(deno)
  • Express JS
  • Koa

nodeJS之父對Node的十大遺憾(B站影片

image-20210818013654519

前端應用的領域之終端和跨端

命令列/終端

  • Webpack CLI
  • Babel CLI
  • Vue CLI
  • React CLI

桌面跨端

  • Electron
  • NW.js

語言、框架、工具

node(Ryan Dahl)

  • 簡單的說 Node.js 就是執行在服務端的 JavaScript

image-20210818014206813

Koa (TJ Holowaychuk)

  • Koa 是一個新的 web 框架,由 Express 幕後的原班人馬打造, 致力於成為 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石

image-20210818014422996

react (Jordan Walke)

  • 用於構建使用者介面的 JavaScript 庫

image-20210818014633759

vue(尤雨溪)

  • Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架

image-20210818014729787

TypeScript(Anders Hejlsberg)、

  • TypeScript是JavaScript型別的超集,它可以編譯成純JavaScript。 TypeScript可以在任何瀏覽器、任何計算機和任何作業系統上執行,並且是開源的。

image-20210818014940594

Git(Linus Torvalds)

  • Git是一個開源的分散式版本控制系統,用以有效、高速的處理從很小到非常大的專案版本管理。

image-20210818015024413

Babel(Sebastian McKenzie)

  • Babel 是一個 JavaScript 編譯器

image-20210818015135164

Visual Studio Code

  • 美國微軟為windows平臺推出的程式設計開發工具

image-20210818015429320

webpack(Tobias Koppers)

  • 本質上,webpack 是一個用於現代 JavaScript 應用程式的 靜態模組打包工具

image-20210818015551011

瀏覽器、網路、伺服器

深入理解現代瀏覽器

參考資料

image-20210818020531761

An overview of HTTP—HTTP概述

參考資料

image-20210818020734494

前端學習路線圖

參考地址

image-20210818020959372

關於Web標準

JavaScript 語言的標準化

最初 JavaScript 語言有兩份標準

  • ECMA-262:主標準,由 ECMA 國際組織(Ecma International)負責管理
  • ISO/IEC 16262:第二標準,由國際標準化組織(ISO,International Organization for Standardization)和國際電子技術委員會(IEC,International Electrotechnical Commission)負責管理

出於商標版權的原因,規範標準中將這門語言稱為 ECMAScript,所以原則上 JavaScript 與 ECMAScript 指的是同一個東西,但有時也會加以區分:

👉JavaScript:指語言及其實現

👉ECMAScript:指語言標準及語言版本,比如 ES6 表示語言(標準)的第 6 版

P.S.ECMAScript 中的 ECMA 取自負責管理主標準的 ECMA 國際組織,這個組織最初叫歐洲計算機制造商協會(European Computer Manufacturers Association),後來影響範圍不限於歐洲,遂更名為 ECMA 國際組織(Ecma International)

瞭解Web標準組織

標準組織

  • W3C: World Wide Web Consortium
  • Ecma: Ecma International
  • WHATWG: Web Hypertext Application Technology Working Group
  • IETF: Internet Engineering Task Force

W3C、Ecma

W3C

全球資訊網聯盟(World Wide Web Consortium),創建於1994年10月, 由 Tim Berners-Lee 建立, 是一個會員組織,它的工作是對 web 進行標準化, 建立並維護 WWW 標準,W3C 標準被稱為 W3C 推薦(W3C Recommendations)

👉 官網: https://www.w3.org

👉 Github: https://github.com/w3c

👉 規範查詢(可以查各種歷史): https://www.w3.org/TR

Ecma TC39

所屬 Ecma International 的TC39(Technical Committee 39)是一個推動JavaScript發展的委員會。它的成員由各個主流瀏覽器廠商的代表構成。TC39定期舉行會議,其會議是由成員公司派代表和特邀專家出席了會議。會議紀要可線上獲取,它將告訴你TC39是如何工作。

ECMAScript是一種由Ecma國際(前身為歐洲計算機制造商協會)通過ECMA-262標準化的指令碼程式設計語言。這種語言在全球資訊網上應用廣泛,它往往被稱為JavaScript或JScript,但實際上後兩者是ECMA-262標準的實現和擴充套件

👉 官網:https://www.ecma-international.org/

👉 TC39 : https://tc39.es

👉 Github : https://github.com/tc39

👉 Discourse(論壇) : https://es.discourse.group

WHATWG

WHATWG(Web Hypertext Application Technology Working Group)即網頁超文字應用技術工作小組,是一個以推動網路HTML 5標準為目的而成立的組織。在2004年,由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。WHATWG成立的原因是W3C意圖放棄HTML,而力圖發展XML(可擴充套件標記記語言下的一個子集)技術。WHATWG郵件列表公佈於2004年6月4日,否決了由W3C成員在W3C工作室的Web標準,組織中瀏覽器廠商建議W3C跟隨WHATWG的HTML5,將新的HTML(標準通用標記語言下的一個應用)命名為HTML5,後來W3C採納了他們的建議。

👉 官網: https://whatwg.org/

👉 Github: https://github.com/whatwg

👉 規範查詢: https://spec.whatwg.org/

IETF

The Internet Engineering Task Force 國際網際網路工程任務組(簡稱IETF),是一個公開性質的大型民間國際團體,由為網際網路技術工程及發展做出貢獻的專家自發參與和管理。彙集了與網際網路架構和網際網路順利運作相關的網路設計者、運營者、投資人和研究人員,並歡迎所有對此行業感興趣的人士參與,任何人都可以註冊參加IETF的會議。IETF 每年舉行三次會議,規模均在千人以上。

👉 官網: https://www.ietf.org/

👉 Github : https://github.com/ietf

W3C與Ecma會員

W3C目前在全球有444家會員(link) ,其中北航總部(中國區)會員46家(link)

Ecma的AM (Associate Member)會員目前有18家,中國公司有位元組跳動、360、阿里、華為、騰訊等5家(link)

W3C規範制定流程

image-20210818022337891

參考資料

Ecma TC39規範流程

每一項新特性,要最終納入ECMAScript規範中,TC39擬定了一個處理過程,稱為TC39 process。 其中共包含5個階段,Stage 0 ~ Stage 4。

階段0

image-20210831212521505

階段1

image-20210831212558121

階段2

image-20210831212637147

階段3

image-20210831212652191

階段4

image-20210831212934399

參考

The TC39 Process

The TC39 process for ECMAScript features Github:tc39/proposals Standard ECMA-262

關於Web標準:閱讀規範原文

結語

位元組青訓營 

本節課的講師:位元組前端—李松峰

如以上有錯誤的地方,請在評論區中指出!


如果有收穫的話,就留個鼓勵一下吧!🍜