前端發展歷程

時間 2019-11-24

標籤前端發展歷程简体版

原文原文鏈接

前端的發展歷程

什麼是前端

前端：針對瀏覽器的開發，代碼在瀏覽器運行
後端：針對服務器的開發，代碼在服務器運行

前端三劍客

HTML
CSS
JavaScript

HTML

HTML（超文本標記語言——HyperText Markup Language）是構成 Web 世界的基石。HTML是一種基礎技術，常與CSS、JavaScript一塊兒被衆多網站用於設計使人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。
超文本標記語言（初版）——在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準）：
HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
HTML 5——2014年10月28日，W3C推薦標準
css

CSS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。
CSS 可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。html

JavaScript

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。前端

前端的發展離不開瀏覽器的發展

瀏覽器的發展其實也是前端的發展
咱們來簡單瞭解一下瀏覽器的發展歷史
html5

1991年，WorldWideWeb 瀏覽器發佈
這款由 Web 之父 Tim Berners-Lee 親手設計的圖形化瀏覽器還包含一個所見即所得 HTML 編輯器，爲了不同 WWW 混淆，這個瀏覽器後來更名爲 Nexus.
1993年，Mosaic 發佈
Internet 的流行應該歸功於 Mosaic，這款瀏覽器將 Web 帶向了大衆。諸如 IE， Firefox 一類的當代瀏覽器仍然在延用 Mosaic 的圖形化操做界面思想。
1994年，Netscape 成立
Marc Andreessen 帶領 Mosaic 的程序員成立了 Netscape 公司，併發布了第一款商業瀏覽器 Netscape Navigator.
1995年，IE 發佈，瀏覽器之戰即將爆發
微軟針對 Netscape 發佈了他們本身的瀏覽器，IE，第一場瀏覽器之戰爆發。
1996年，Opera 發佈
Telenor 是挪威最大的通信公司，他們推出了 Opera，並在兩年後進軍移動市場，推出 Opera 的移動版。
1998年，Mozilla 項目成立
Netscape 成立 Mozilla 開源項目，開發下一代瀏覽器，後來證實，使用原有代碼開發新東西是一種負擔，接着他們着手重新開發。
1998年，Netscape 瀏覽器走向開源
隨着同 IE 征戰的失利，Netscape 市場份額急劇降低，Netscape 決定將本身的瀏覽器開源以期重整山河。
2002年，IE 開始主導瀏覽器市場
市場份額達到95%，藉助操做系統的捆綁優點，IE 贏得第一場瀏覽器之戰。
2003年，蘋果 Safari 瀏覽器登場
蘋果進入了瀏覽器市場，推出本身的 Webkit 引擎，該引擎很是優秀，後來被包括 Google， Nokia 之類的廠商用於手機瀏覽器。
2004年，Firefox 引起第二場瀏覽器之戰
Firefox 1.0 推出。早在 Beta 測試期間就積累了大量人氣的 Firefox 引起了第二場瀏覽器之戰，當年年末，Firefox 已經贏得 7.4% 的市場份額。
2006年，IE7 發佈
IE6 發佈後的第六年，迫於 Firefox 的壓力，微軟匆匆推出 IE7 應戰，吸收了 Firefox 的一些設計思想，如標籤式瀏覽，反釣魚等。但這款瀏覽器如今看來並不成功。
2008年，Google 攜 Chrome 參戰
Google 發佈了他們本身的瀏覽器，加入這場戰爭。輕量，快，異常的穩固讓這款瀏覽器成爲不可輕視的一個對手。
node

瀏覽器現狀

瀏覽器內核

早期的前端

早期受制於瀏覽器以及技術、兼容性等問題，致使網頁的顯示效果很是的單一，幾乎都是靜態頁，前端的工做也是很是簡單，說是前端，其實只是一個模板工程師，編寫頁面模板，而後讓後端負責渲染。因此在互聯網早期，前端工程師這個職位能夠說是不存在，一般由後端或者是美工來兼任。jquery

像這種古老的設計風格，如今已經很難看到了webpack

後端MVC的開發模式

當時的網站開發，採用的是後端MVC模式css3

Model（模型層）：提供/保存數據
Controller（控制層）：數據處理，實現業務邏輯
View（視圖層）：展現數據，提供用戶界面前端只是後端 MVC 的 V

當用戶訪問網站時，會向後臺發送一個請求，後臺接收到請求，生成靜態HTML頁面，發送到瀏覽器。好比JSPgit

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
複製代碼

Ajax

Ajax技術誕生，改變了一切。前端再也不是後端的模板，能夠獨立獲得各類數據。
Ajax是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。
經過在後臺與服務器進行少許數據交換，Ajax可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
程序員

舉個例子：用戶註冊

若是仔細觀察一個表單的提交，你就會發現，一旦用戶點擊「提交」按鈕，表單開始提交，瀏覽器就會刷新頁面，而後在新頁面裏告訴你操做是成功了仍是失敗了。若是不幸因爲網絡太慢或者其餘緣由，就會獲得一個404頁面。
這就是Web的運做原理：一次HTTP請求對應一個頁面。
若是要讓用戶留在當前頁面中，同時發出新的HTTP請求，就可使用Ajax發送這個新請求，接收到數據後，再用JavaScript更新頁面，這樣一來，用戶就感受本身仍然停留在當前頁面，可是數據卻能夠不斷地更新。

2004年：最先大規模使用AJAX的就是Gmail，Gmail的頁面在首次加載後，剩下的全部數據都依賴於AJAX來更新。

Web 2.0

Ajax技術促成了 Web 2.0 的誕生。
Web 1.0：靜態網頁，純內容展現
Web 2.0：動態網頁，富交互，前端數據處理

至此，前端早期的發展史就介紹完了，當時對於前端的要求並不高，只要掌握html css js和一個jquery就足夠開發網頁了

新時代的前端

到目前爲止 HTML已經發展到HTML5
CSS已經發展到CSS3.0
JavaScript已經發展到ES9，可是經常使用的仍是ES5和ES6
現代標準瀏覽器(遵循W3C標準的瀏覽器)基本已經支持HTML5 CSS3 ES6的大部分特性

瀏覽器市場份額(2018.9)

因爲IE的不思上進，致使市場份額愈來愈少，如今幾乎是現代標準瀏覽器的天下。
因此前端開發一個網頁幾乎不須要考慮IE兼容性

得益於前端技術和瀏覽器的發展，如今的網頁能展現愈來愈豐富的內容了，好比動畫遊戲畫圖等等
因此，對於前端的要求也愈來愈高，特別是近幾年框架、技術、工具呈爆發式發展，前端變化特別快！

MVVM

MVVM最先由微軟提出來，它借鑑了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View負責顯示，二者作到了最大限度的分離把Model和View關聯起來的就是ViewModel。
ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model
View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉
所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理

一個MVVM框架和jQuery操做DOM相比有什麼區別？咱們先看用jQuery實現的修改兩個DOM節點的例子：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>

Hello, Bart!

You are 12.
複製代碼

用jQuery修改name和age節點的內容：

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);
複製代碼

若是咱們使用MVVM框架來實現一樣的功能，咱們首先並不關心DOM的結構，而是關心數據如何存儲。最簡單的數據存儲方式是使用JavaScript對象：

var person = {
    name: 'Bart',
    age: 12
}
複製代碼

咱們把變量person看做Model，把HTML某些DOM節點看做View，並假定它們之間被關聯起來了。

要把顯示的name從Bart改成Homer，把顯示的age從12改成51，咱們並不操做DOM，而是直接修改JavaScript對象：

person.name = 'Homer';
person.age = 51;
複製代碼

執行上面的代碼，咱們驚訝地發現，改變JavaScript對象的狀態，會致使DOM結構做出對應的變化！這讓咱們的關注點從如何操做DOM變成了如何更新JavaScript對象的狀態，而操做JavaScript對象比DOM簡單多了！

這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操做DOM的繁瑣步驟中解脫出來！

三大MVVM框架

Vue
React
Angular

Vue

Vue框架誕生於2014年，其做者爲中國人——尤雨溪，也是新人最容易入手的框架之一，不一樣於React和Angular,其中文文檔也便於你們閱讀和學習。

React

React起源於Facebook的內部項目，由於該公司對市場上全部JavaScript MVC框架，都不滿意，就決定本身寫一套，用來架設Instagram的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。

Angular

Angular是谷歌開發的 Web 框架，具備優越的性能和絕佳的跨平臺性。一般結合TypeScript開發，也可使用JavaScript或Dart，提供了無縫升級的過渡方案。於2016年9月正式發佈。

目前國內使用人數最多、最火的框架是Vue

webpack

現在對於每個前端工程師來講，webpack已經成爲了一項基礎技能，它基本上包辦了本地開發、編譯壓縮、性能優化的全部工做。
它的誕生意味着一整套工程化體系開始普及，而且讓前端開發完全告別了之前刀耕火種的時代。如今webpack之於前端開發，正如同gcc/g++之於C/C++，是一個不管如何都繞不開的工具。

TypeScript(TS)

TypeScript 是 Microsoft 開發和維護的一種面向對象的編程語言。它是JavaScript的超集，包含了JavaScript的全部元素，能夠載入JavaScript代碼運行，並擴展了JavaScript的語法。 TypeScript 具備如下特色：

TypeScript是Microsoft推出的開源語言，使用Apache受權協議
TypeScript增長了靜態類型、類、模塊、接口和類型註解

在開發大型項目時使用TS更有優點

NodeJs

Node.js是一個Javascript運行環境(runtime environment)，發佈於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。嚴格的來講，Node.js實際上是一個後端語言。

特色：