# 前端開發的歷史和趨勢
[TOC=2,2]
## 什么是前端
* 前端：針對瀏覽器的開發，代碼在瀏覽器運行
* 后端：針對服務器的開發，代碼在服務器運行
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/frontend.png)
## 前后端不分的時代
互聯網發展的早期，前后端開發是一體的，前端代碼是后端代碼的一部分。
1. 后端收到瀏覽器的請求
2. 生成靜態頁面
3. 發送到瀏覽器
## 后端 MVC 的開發模式
那時的網站開發，采用的是后端 MVC 模式。
* Model（模型層）：提供/保存數據
* Controller（控制層）：數據處理，實現業務邏輯
* View（視圖層）：展示數據，提供用戶界面
前端只是后端 MVC 的 V。
以 PHP 框架 Laravel 為例。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/laravel-mvc.png)
## 前端工程師的角色
那時的前端工程師，實際上是模板工程師，負責編寫頁面模板。
后端代碼讀取模板，替換變量，渲染出頁面。
## 典型的 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 的誕生。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/web20.gif)
* Web 1.0：靜態網頁，純內容展示
* Web 2.0：動態網頁，富交互，前端數據處理
從那時起，前端變得復雜了，對前端工程師的要求越來越高。
## 前端 MVC 框架
前端通過 Ajax 得到數據，因此也有了處理數據的需求。
前端代碼變得也需要保存數據、處理數據、生成視圖，這導致了前端 MVC 框架的誕生。
* 2010年，Backbone.js
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/backbone.png)
## Backbone.js
Backbone 將前端代碼分成兩個基本部分。
* Model：管理數據
* View：數據的展現
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/backbone-model-view.png)
## 前端 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"
},
}
~~~
## MVVM 模式
另一些框架提出 MVVM 模式，用 View Model 代替 Controller。
* Model
* View
* View-Model：簡化的 Controller，唯一作用就是為 View 提供處理好的數據，不含其他邏輯。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/mvvm.png)
## Router
前端還有一種天然的方法，可以切換視圖，那就是 URL。
通過 URL 切換視圖，這就是 Router（路由）的作用。以 Backbone 為例。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/backbone-routing.png)
~~~
App.Router = Backbone.Router.extend({
routes: {
'': 'index',
'show': 'show'
},
index: function () {
$(document.body).append("調用了 Index 路由");
},
show: function () {
$(document.body).append("調用了 Show 路由");
},
});
~~~
## 示例：Backbone Router
打開`demos/backbone-demo/index.html`，按照[《操作說明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#backbone)，查看示例。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/backbone-demo.png)
## SPA
前端可以做到：
> * 讀寫數據
> * 切換視圖
> * 用戶交互
這意味著，網頁其實是一個應用程序。
> SPA = Single-page application
2010年后，前端工程師從開發頁面，變成了開發”前端應用“（跑在瀏覽器里面的應用程序）。
## Angular
Google 公司推出的 Angular 是最流行的 MVC 前端框架。
它的風格屬于 HTML 語言的增強，核心概念是雙向綁定。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/angular.png)
## 示例：Angular 的雙向綁定
瀏覽器打開`demos/angular-demo/index.html`，可以看到一個輸入框。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/angular-demo.png)
~~~
<div ng-app="">
<p>
姓名 :
<input
type="text"
ng-model="name"
placeholder="在這里輸入您的大名"
>
</p>
<h1>你好，{{name}}</h1>
</div>
~~~
## Vue
Vue.js 是現在很熱門的一種前端 MVC 框架。
它的基本思想與 Angular 類似，但是用法更簡單，而且引入了響應式編程的概念。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/vue-logo.png)
## 示例：Vue 的雙向綁定
Vue 的模板與數據，是雙向綁定的。
打開`demos/vue-demo/index1.html`，按照[《操作說明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#vue)，查看示例。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/vue-demo.png)
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
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/node-logo.png)
## Node 的意義
* JavaScript 成為服務器腳本語言，與 Python 和 Ruby 一樣
* JavaScript 成為唯一的瀏覽器和服務器都支持的語言
* 前端工程師可以編寫后端程序了
## 前端開發模式的根本改變
* Node 環境下開發
* 大量使用服務器端工具
* 引入持續集成等軟件工程的標準流程
* 開發完成后，編譯成瀏覽器可以運行的腳本，放上 CDN
## 全棧工程師
前端工程師正在轉變為全棧工程師
* 一個人負責開發前端和后端
* 從數據庫到 UI 的所有開發
## 全棧技能
怎樣才能稱為全棧工程師？
* 傳統前端技能：HTML、JavaScript、CSS
* 一門后端語言
* 移動端開發：iOS / Android / HTML5
* 其他技能：數據庫、HTTP 等等
## 軟件行業的發展動力
歷史演變：前后端不分 -> 前后端分離 -> 全棧工程師
動力：更加產業化、大規模地生產軟件
* 效率更高
* 成本更低
通用性好、能夠快速產出的技術最終會贏，單個程序員的生產力要求越來越高。
## 未來軟件的特點
* 聯網
* 高并發
* 分布式
* 跨終端
現在基于 Web 的前端技術，將演變為未來所有軟件的通用的 GUI 解決方案。
## 未來只有兩種軟件工程師
* 端工程師
* 手機端
* PC 端
* TV 端
* VR 端
* ……
* 云工程師
