前端的“前世今生”
引言： 本人自2017年5月29日決定入“前端坑”以來，到現在突然想了解一下前端的“前世今生”，看看她到底是如何修煉成神，被大家所崇拜並有無數人跟隨的。我這個草根到15年的時候才了解到“大神”，真是相見恨晚啊！
我雖比“大神”早出生，但是沒有您成長的快啊！我對您的成長史也是借鑒別人的。大家參考參考。。。。
前端發展裏程碑
從靜態走向動態
1994年可以看做前端歷史的起點，這一年10月13日網景推出了第一版Navigator；這一年，Tim Berners-Lee創建了W3C；這一年，Tim的基友發布了CSS。還是這一年，為動態web網頁設計的服務端腳本PHP
萬維網（WWW）是歐洲核子研究組織的一幫科學家為了方便看文檔、傳論文而創造的，這就是為什麽Web網頁都基於Document。Document就是用標記語言+超鏈接寫成的由文字和圖片構成的HTML頁面，這樣的功能已經完全滿足學術交流的需要，所以網頁的早期形態和Document一樣，完全基於HTML頁面，並且所有內容都是靜態的。
1995年網景推出了JavaScript，實現了客戶端的計算任務（如表單驗證）。
1996年微軟推出了iframe標簽，實現了異步的局部加載。
1999年W3C發布第四代HTML標準，同年微軟推出用於異步數據傳輸的ActiveX，隨即各大瀏覽器廠商模仿實現了XMLHttpRequest。這標識著Ajax的誕生，但是Ajax這個詞是在六年後問世的，特別是在谷歌使用Ajax技術打造了Gmail和谷歌地圖之後，Ajax獲得了巨大的關註。Ajax是Web網頁邁向Web應用的關鍵技術，它標識著Web2.0時代的到來。
2006年，XMLHttpRequest被W3C正式納入標準。
早期的網頁開發是由後端主導的，前端能做的也就是操作一下DOM。2006年 John Resig發布了jQuery，jQuery主要用於操作DOM，其優雅的語法、符合直覺的事件驅動型的編程思維使其極易上手，因此很快風靡全球，大量基於jQuery的插件構成了一個龐大的生態系統，更加穩固了jQuery作為JS庫一哥的地位。
2009年AngularJS誕生，隨後被谷歌收購。2010年backbone.js誕生。2011年React和Ember誕生。2014年Vue.js誕生……前後端分離可謂大勢所趨。
2014年，第五代HTML標準發布。H5是由瀏覽器廠商主導，與W3C合作制定的一整套Web應用規範，至今仍在不斷補充新的草案。
從前端走向全端
2009年Ryan Dahl發布了node，node是一個基於V8引擎的服務端JavaScript運行環境，類似於一個虛擬機，也就是說js在服務端語言中有了一席之地。如果說ajax是前端的第一次飛躍，那麽node可算作前端的第二次飛躍。它意味著JavaScript走出了瀏覽器的藩籬，邁出了全端化的第一步。
一種流行的組合就是利用Express和Mongo搭建服務端程序。
什麽是前端
-
前端：針對瀏覽器的開發，代碼在瀏覽器運行
-
後端：針對服務器的開發，代碼在服務器運行
前後端不分的時代
互聯網發展的早期，前後端開發是一體的，前端代碼是後端代碼的一部分。
-
後端收到瀏覽器的請求
-
生成靜態頁面
-
發送到瀏覽器
後端 MVC 的開發模式
那時的網站開發，采用的是後端 MVC 模式。
-
Model（模型層）：提供/保存數據
-
Controller（控制層）：數據處理，實現業務邏輯
-
View（視圖層）：展示數據，提供用戶界面
前端只是後端 MVC 的 V。
以 PHP 框架 Laravel 為例。
前端工程師的角色
那時的前端工程師，實際上是模板工程師，負責編寫頁面模板。
後端代碼讀取模板，替換變量，渲染出頁面。
典型的 PHP 模板
<html>
<head>
<title>Car {{ $car->id }}</title>
</head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->produced_on }}</li>
</ul>
</body>
</html>
Ajax
Ajax 技術誕生，改變了一切。
-
2004年：Gmail
-
2005年：Google 地圖
前端不再是後端的模板，可以獨立得到各種數據。
Web 2.0
Ajax 技術促成了 Web 2.0 的誕生。
-
Web 1.0：靜態網頁，純內容展示
-
Web 2.0：動態網頁，富交互，前端數據處理
從那時起，前端變得復雜了，對前端工程師的要求越來越高。
前端 MVC 框架
前端通過 Ajax 得到數據，因此也有了處理數據的需求。
前端代碼變得也需要保存數據、處理數據、生成視圖，這導致了前端 MVC 框架的誕生。
-
2010年，Backbone.js
Backbone.js
Backbone 將前端代碼分成兩個基本部分。
-
Model：管理數據
-
View：數據的展現
前端 Controller
Backbone 只有 M 和 V，沒有 C。因為，前端 Controller 與後端不同。
-
不需要，也不應該處理業務邏輯
-
只需要處理 UI 邏輯，響應用戶的一舉一動
所以，前端 Controller 相對比較簡單。Backbone 沒有 C，只用事件來處理 UI 邏輯。
var AppView = Backbone.View.extend({ // ...
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
});
Router
前端還有一種天然的方法，可以切換視圖，那就是 URL。
通過 URL 切換視圖，這就是 Router（路由）的作用。以 Backbone 為例。
App.Router = Backbone.Router.extend({
routes: { ‘‘: ‘index‘,
‘show‘: ‘show‘
},
index: function() {
$(document.body).append("調用了 Index 路由");
},
show: function() {
$(document.body).append("調用了 Show 路由");
},
});
MVVM 模式
另一些框架提出 MVVM 模式，用 View Model 代替 Controller。
-
Model
-
View
-
View-Model：簡化的 Controller，唯一作用就是為 View 提供處理好的數據，不含其他邏輯。
本質：view 綁定 view-model，視圖與數據模型強耦合。數據的變化實時反映在 view 上，不需要手動處理。
SPA
前端可以做到：
讀寫數據
切換視圖
用戶交互
這意味著，網頁其實是一個應用程序。
SPA = Single-page application
2010年後，前端工程師從開發頁面，變成了開發”前端應用“（跑在瀏覽器裏面的應用程序）。
傳統的架構
單頁應用的架構
多了一個前端 MVC 層
Angular
Google 公司推出的 Angular 是最流行的 MVVM 前端框架。
它的風格屬於 HTML 語言的增強，核心概念是雙向綁定。
示例：Angular 的雙向綁定
<div ng-app="">
<p>
姓名 :
<input type="text" ng-model="name" placeholder="在這裏輸入您的大名">
</p>
<h1>你好，{{name}}</h1></div>
Vue
Vue.js 是現在很熱門的一種前端 MVVM 框架。
它的基本思想與 Angular 類似，但是用法更簡單，而且引入了響應式編程的概念。
示例：Vue 的雙向綁定
HTML 代碼
<div id="journal">
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
JS 代碼
var journal = new Vue({
el: ‘#journal‘,
data: {
message: ‘Your first entry‘
}
});
前後端分離
-
Ajax -> 前端應用興起
-
智能手機 -> 多終端支持
這兩個原因，導致前端開發方式發生根本的變化。
前端不再是後端 MVC 中的 V，而是單獨的一層。
REST 接口
前後端分離以後，它們之間通過接口通信。
後端暴露出接口，前端消費後端提供的數據。
後端接口一般是 REST 形式，前後端的通信協議一般是 HTTP。
Node
2009年，Node 項目誕生，它是服務器上的 JavaScript 運行環境。
Node = JavaScript + 操作系統 API
Node 的意義
-
JavaScript 成為服務器腳本語言，與 Python 和 Ruby 一樣
-
JavaScript 成為唯一的瀏覽器和服務器都支持的語言
-
前端工程師可以編寫後端程序了
前端開發模式的根本改變
-
Node 環境下開發
-
大量使用服務器端工具
-
引入持續集成等軟件工程的標準流程
-
開發完成後，編譯成瀏覽器可以運行的腳本，放上 CDN
全棧工程師
前端工程師正在轉變為全棧工程師
-
一個人負責開發前端和後端
-
從數據庫到 UI 的所有開發
全棧技能
怎樣才能稱為全棧工程師？
-
傳統前端技能：HTML、JavaScript、CSS
-
一門後端語言
-
移動端開發：iOS / Android / HTML5
-
其他技能：數據庫、HTTP 等等
軟件行業的發展動力
歷史演變：前後端不分 -> 前後端分離 -> 全棧工程師
動力：更加產業化、大規模地生產軟件
-
效率更高
-
成本更低
通用性好、能夠快速產出的技術最終會贏，單個程序員的生產力要求越來越高。
H5 就是一個最好的例子
為什麽 H5 技術會贏得移動端？
-
開發速度快：Native 需要重新編譯才能看到結果，H5 是即時輸出
-
開發成本低：Native 需要兩個開發團隊，H5 只要一個
-
快速發布：安卓 Native 新版本需要24小時，iOS 需要 3 ～ 4 天，H5 可以隨時更新
未來軟件的特點
-
聯網
-
高並發
-
分布式
-
跨終端
現在基於 Web 的前端技術，將演變為未來所有軟件的通用的 GUI 解決方案。
未來只有兩種軟件工程師
-
端工程師
-
手機端
-
PC 端
-
TV 端
-
VR 端
-
……
-
雲工程師
推薦閱讀：前端發展史
前端發展史
前端的“前世今生”