Frontend的歷史

4.1 網頁開發的歷史：從 HTML 到 HTML5 和 CSS3

在1990年代初期，網頁開發的誕生歸功於蒂姆·伯納斯-李。他是第一位Fronted開發者：自己想出HTML，並用它編寫，還創造了第一個瀏覽器。真正的前端開發者不會因為缺少瀏覽器而止步。

當時還沒有CSS和JavaScript，所以創建網站比較簡單。可以說，蒂姆·伯納斯-李是第一位old school開發者，從事Frontend當時還沒有JavaScript和CSS。

在1995年，Internet Engineering Task Force (IETF)確認HTML 2.0成為首個正式HTML標準。這個版本包含了基本的標籤和屬性，能夠創建基本的網頁。HTML 2.0為網頁開發的進一步發展奠定了基礎。

HTML 3.2 和 HTML 4.0：功能擴展

1997年是HTML歷史上的一個重要階段。W3C聯盟發布了HTML 3.2。這個版本支持表格、Java小程序和數學公式，顯著擴展了網頁開發者的可能性。

同年稍晚發布的HTML 4.0帶來了顯著的改進。包含對CSS樣式的支持，改進的語義和新元素，使HTML 4.0成為創建更複雜和結構化網頁的強大工具。引入CSS樣式使得開發者能夠將內容與其外觀分開，從而簡化樣式管理和設計實施。

CSS：網頁樣式化的革命

首個CSS（Cascading Style Sheets）標準由W3C於1996年發布。CSS使開發者能樣式化HTML文件，將視覺元素從頁面結構中分離。CSS1提供了文本和背景圖片的基本樣式化功能。

在1998年，CSS2被引入，增加了新的功能，如媒體查詢的支持、絕對和相對定位，以及更多的打印樣式。

CSS3於2011年開始出現，引入了模塊化架構。這使得新功能能夠逐步地引入，包括動畫、漸變、變換和改進的佈局。

HTML5：網頁開發的新時代

HTML5由WHATWG和W3C共同開發，成為一次重大更新，並於2014年正式發布。HTML5增加了對多媒體（視頻和音頻）的支持、新的語義元素（如<article>,<section>,<header>,<footer>），改進的網頁表單格式和新的圖形和多線程API。

HTML5大大擴展了網頁開發者的能力，允許創建更具交互性和動態性的網頁應用。多媒體元素和新API的支持使網頁應用變得更加強大和功能豐富。

4.2 從 jQuery 到 Angular 和 React

隨著網速的加快，網頁也變得越來越重。CSS和JavaScript的使用也越發頻繁。為了簡化它的編寫，開始使用多種庫。其中最受歡迎的是jQuery。

jQuery：簡化JavaScript操作

jQuery由約翰·雷西格創建，並於2006年1月在紐約的BarCamp會議上發布。jQuery的目的是簡化與HTML文件的交互、事件處理、動畫和Ajax交互，從而加快網頁開發。

jQuery因其簡單直觀的方法而迅速普及，這些方法隱藏了JavaScript及其跨瀏覽器問題的複雜性。其主要功能包括：

• 選擇器，可以輕鬆找到和操作DOM元素
• 簡單的事件處理
• 動畫和效果
• 與Ajax的集成，用於創建交互式網頁

jQuery改變了網頁開發的方式，使其對開發者更加友好和便捷。

Angular：引入動態網頁應用

另一個應對網頁日益增多的複雜性的回應是Angular框架的出現。AngularJS首次由Google於2010年10月引入。該項目由米什科·赫韋里和亞當·阿布拉姆斯創建，用於簡化動態單頁應用（SPA）的開發。

AngularJS提供了強大的客戶端開發工具，包括：

• 通過指令進行的聲明式數據綁定
• 內置的HTTP請求服務
• 雙向數據綁定，允許在模型數據更改時自動更新視圖
• 模塊化和可測試的代碼

在2016年，Google發布了全面重新設計的Angular（Angular 2及更高版本），成為使用TypeScript開發可擴展和高性能網頁應用的平台。

React：UI渲染的革命

React由Facebook的喬丹·瓦爾克創建，並於2013年3月首次發布。React是Facebook對改善性能和支持複雜用戶界面的需求的回應。

React引入了一種基於組件和虛擬DOM的新用戶界面開發方法：

• 組件架構，允許創建可重用和隔離的組件
• 虛擬DOM，優化界面的更新，使其更快更高效
• 單向數據流，簡化調試和應用狀態管理

React迅速獲得了普及，成為許多現代網頁應用的基礎，因為其性能和靈活性。同時，React也成為其他庫和框架的基礎，例如React Native用於移動應用。

這三種技術 — jQuery、Angular和React，在網頁開發的演變中發揮了關鍵作用，每一種都帶來了獨特的方法和工具，極大地簡化了現代網頁應用的創建。

4.3 Node.js, Electron, React Native

HTML5、CSS3、JavaScript 2016變得如此強大，以至於Web超出了瀏覽器的範疇，成為完整的Frontend Fullstack技術。首先感受到的是後端。

Node.js：後端的接管

Node.js由瑞安·達爾創建，並於2009年5月首次發布。Node.js的主要目的是提供一個瀏覽器之外的JavaScript運行環境，使得可以使用JavaScript進行服務器端開發。Node.js基於Google的V8引擎，提供高性能和執行速度。

Node.js使用非阻塞I/O（輸入/輸出），使得可以同時處理大量連接，而不會阻塞主執行線程。此外，它還有一個廣泛的模塊生態系統，可以通過npm（Node Package Manager）獲得，這讓開發和集成各種庫和工具變得更簡單。由於V8引擎，Node.js提供快速高效的請求處理。

Electron：桌面應用的接管

編寫酷炫的桌面UI是一個任務，而這裡有HTML5+CSS3。為什麼不使用它呢……於是程序員們想出了一個小技巧：你的應用程序打開一個主窗口，在這個窗口中嵌入一個瀏覽器（VebView組件），然後在這個瀏覽器中加載HTML5、CSS3 + JavaScript代碼。

Electron庫，最初被稱為Atom Shell，由GitHub為Atom代碼編輯器創建。Electron的第一個版本在2013年7月發布。Electron的目的是允許開發者使用像HTML、CSS和JavaScript這樣的網頁技術創建桌面應用。

Electron允許創建可以在Windows、macOS和Linux上運行的應用，使用相同的代碼庫。Electron結合了網頁技術的能力和Node.js的力量，允許訪問文件系統和其他系統資源。開發者可以使用現有的網頁框架和庫來創建界面和功能。

React Native：移動應用

React Native由Facebook開發並於2015年3月首次推出。React Native的目的是提供使用JavaScript和React創建iOS和Android原生移動應用的能力。

React Native使用原生組件，提供與原生應用相當的性能。同時，開發者可以編寫同時在iOS和Android上運行的代碼，大大簡化了開發，減少了支持的時間。

和Electron一樣，移動應用的整個窗口打開一個VebView，其中加載用HTML5、CSS3和JS編寫的「網站」。原本預期移動應用會在手機上取代網站，但實際上發生的卻是相反的：網站開始取代原生應用。

如今Frontend Fullstack Software Engineer是世界上最受歡迎的IT職業。所以， 成為Frontend開發者是明智且有遠見的決定！