原文地址：前端開發(fā)的歷史和趨勢(shì)
作者：阮一峰
前端開發(fā)的歷史和趨勢(shì)
什么是前端
- 前端：針對(duì)瀏覽器的開發(fā)窖认，代碼在瀏覽器運(yùn)行
- 后端：針對(duì)服務(wù)器的開發(fā)戳玫，代碼在服務(wù)器運(yùn)行
前后端不分的時(shí)代
互聯(lián)網(wǎng)發(fā)展的早期福澡，前后端開發(fā)是一體的阐枣，前端代碼是后端代碼的一部分驳糯。
- 后端收到瀏覽器的請(qǐng)求
- 生成靜態(tài)頁面
- 發(fā)送到瀏覽器
后端 MVC 的開發(fā)模式
那時(shí)的網(wǎng)站開發(fā)，采用的是后端 MVC 模式慷彤。
- Model（模型層）：提供/保存數(shù)據(jù)
- Controller（控制層）：數(shù)據(jù)處理娄蔼，實(shí)現(xiàn)業(yè)務(wù)邏輯
- View（視圖層）：展示數(shù)據(jù)怖喻，提供用戶界面
前端只是后端 MVC 的 V底哗。
以 PHP 框架 Laravel 為例。
前端工程師的角色
那時(shí)的前端工程師锚沸，實(shí)際上是模板工程師跋选，負(fù)責(zé)編寫頁面模板。
后端代碼讀取模板哗蜈，替換變量前标，渲染出頁面坠韩。
典型的 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 技術(shù)誕生，改變了一切炼列。
- 2004年：Gmail
- 2005年：Google 地圖
前端不再是后端的模板只搁，可以獨(dú)立得到各種數(shù)據(jù)。
Web 2.0
Ajax 技術(shù)促成了 Web 2.0 的誕生俭尖。
- Web 1.0：靜態(tài)網(wǎng)頁氢惋，純內(nèi)容展示
- Web 2.0：動(dòng)態(tài)網(wǎng)頁，富交互稽犁，前端數(shù)據(jù)處理
從那時(shí)起焰望，前端變得復(fù)雜了，對(duì)前端工程師的要求越來越高已亥。
前端 MVC 框架
前端通過 Ajax 得到數(shù)據(jù)熊赖，因此也有了處理數(shù)據(jù)的需求。
前端代碼變得也需要保存數(shù)據(jù)虑椎、處理數(shù)據(jù)震鹉、生成視圖，這導(dǎo)致了前端 MVC 框架的誕生捆姜。
- 2010年足陨，Backbone.js
Backbone.js
Backbone 將前端代碼分成兩個(gè)基本部分。
- Model：管理數(shù)據(jù)
- View：數(shù)據(jù)的展現(xiàn)
前端 Controller
Backbone 只有 M 和 V娇未，沒有 C墨缘。因?yàn)椋岸?Controller 與后端不同零抬。
- 不需要镊讼，也不應(yīng)該處理業(yè)務(wù)邏輯
- 只需要處理 UI 邏輯，響應(yīng)用戶的一舉一動(dòng)
所以平夜，前端 Controller 相對(duì)比較簡(jiǎn)單蝶棋。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("調(diào)用了 Index 路由");
},
show: function () {
$(document.body).append("調(diào)用了 Show 路由");
},
});
示例：Backbone Router
打開demos/backbone-demo/index.html决侈，按照《操作說明》，查看示例喧务。
MVVM 模式
另一些框架提出 MVVM 模式赖歌，用 View Model 代替 Controller枉圃。
- Model
- View
- View-Model：簡(jiǎn)化的 Controller，唯一作用就是為 View 提供處理好的數(shù)據(jù)庐冯，不含其他邏輯孽亲。
本質(zhì)：view 綁定 view-model，視圖與數(shù)據(jù)模型強(qiáng)耦合展父。數(shù)據(jù)的變化實(shí)時(shí)反映在 view 上墨林，不需要手動(dòng)處理。
SPA
前端可以做到：
- 讀寫數(shù)據(jù)
- 切換視圖
- 用戶交互
這意味著犯祠，網(wǎng)頁其實(shí)是一個(gè)應(yīng)用程序旭等。
SPA = Single-page application
2010年后，前端工程師從開發(fā)頁面衡载，變成了開發(fā)“前端應(yīng)用”（跑在瀏覽器里面的應(yīng)用程序）搔耕。
傳統(tǒng)的架構(gòu)
單頁應(yīng)用的架構(gòu)
多了一個(gè)前端 MVC 層
Angular
Google 公司推出的 Angular 是最流行的 MVVM 前端框架。
它的風(fēng)格屬于 HTML 語言的增強(qiáng)痰娱，核心概念是雙向綁定弃榨。
示例：Angular 的雙向綁定
瀏覽器打開demos/angular-demo/index.html，可以看到一個(gè)輸入框梨睁。
<div ng-app="">
<p>
姓名 :
<input
type="text"
ng-model="name"
placeholder="在這里輸入您的大名"
>
</p>
<h1>你好鲸睛，{{name}}</h1>
</div>
Vue
Vue.js 是現(xiàn)在很熱門的一種前端 MVVM 框架。
它的基本思想與 Angular 類似坡贺，但是用法更簡(jiǎn)單官辈，而且引入了響應(yīng)式編程的概念。
示例：Vue 的雙向綁定
Vue 的模板與數(shù)據(jù)遍坟，是雙向綁定的拳亿。
打開demos/vue-demo/index1.html，按照《操作說明》愿伴，查看示例肺魁。
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 -> 前端應(yīng)用興起
- 智能手機(jī) -> 多終端支持
這兩個(gè)原因，導(dǎo)致前端開發(fā)方式發(fā)生根本的變化隔节。
前端不再是后端 MVC 中的 V鹅经，而是單獨(dú)的一層。
REST 接口
前后端分離以后怎诫，它們之間通過接口通信瘾晃。
后端暴露出接口，前端消費(fèi)后端提供的數(shù)據(jù)刽虹。
后端接口一般是 REST 形式酗捌，前后端的通信協(xié)議一般是 HTTP呢诬。
Node
2009年涌哲，Node 項(xiàng)目誕生胖缤，它是服務(wù)器上的 JavaScript 運(yùn)行環(huán)境。
Node = JavaScript + 操作系統(tǒng) API
Node 的意義
- JavaScript 成為服務(wù)器腳本語言阀圾，與 Python 和 Ruby 一樣
- JavaScript 成為唯一的瀏覽器和服務(wù)器都支持的語言
- 前端工程師可以編寫后端程序了
前端開發(fā)模式的根本改變
- Node 環(huán)境下開發(fā)
- 大量使用服務(wù)器端工具
- 引入持續(xù)集成等軟件工程的標(biāo)準(zhǔn)流程
- 開發(fā)完成后哪廓，編譯成瀏覽器可以運(yùn)行的腳本，放上 CDN
全棧工程師
前端工程師正在轉(zhuǎn)變?yōu)槿珬９こ處?/p>
- 一個(gè)人負(fù)責(zé)開發(fā)前端和后端
- 從數(shù)據(jù)庫到 UI 的所有開發(fā)
全棧技能
怎樣才能稱為全棧工程師初烘？
- 傳統(tǒng)前端技能：HTML涡真、JavaScript、CSS
- 一門后端語言
- 移動(dòng)端開發(fā)：iOS / Android / HTML5
- 其他技能：數(shù)據(jù)庫肾筐、HTTP 等等
軟件行業(yè)的發(fā)展動(dòng)力
歷史演變：前后端不分 -> 前后端分離 -> 全棧工程師
動(dòng)力：更加產(chǎn)業(yè)化哆料、大規(guī)模地生產(chǎn)軟件
- 效率更高
- 成本更低
通用性好、能夠快速產(chǎn)出的技術(shù)最終會(huì)贏吗铐，單個(gè)程序員的生產(chǎn)力要求越來越高东亦。
H5 就是一個(gè)最好的例子
為什么 H5 技術(shù)會(huì)贏得移動(dòng)端？
- 開發(fā)速度快：Native 需要重新編譯才能看到結(jié)果唬渗，H5 是即時(shí)輸出
- 開發(fā)成本低：Native 需要兩個(gè)開發(fā)團(tuán)隊(duì)典阵，H5 只要一個(gè)
- 快速發(fā)布：安卓 Native 新版本需要24小時(shí)，iOS 需要 3 ～ 4 天镊逝，H5 可以隨時(shí)更新
未來軟件的特點(diǎn)
- 聯(lián)網(wǎng)
- 高并發(fā)
- 分布式
- 跨終端
現(xiàn)在基于 Web 的前端技術(shù)壮啊，將演變?yōu)槲磥硭熊浖耐ㄓ玫?GUI 解決方案。
未來只有兩種軟件工程師
- 端工程師
- 手機(jī)端
- PC 端
- TV 端
- VR 端
- ……
- 云工程師
