前端的發展歷程

時間 2019-11-18

標籤前端發展歷程简体版

原文原文鏈接

前端開發的歷史和趨勢

什麼是前端

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

先後端不分的時代

互聯網發展的早期，先後端開發是一體的，前端代碼是後端代碼的一部分。程序員

後端收到瀏覽器的請求數據庫
生成靜態頁面編程
發送到瀏覽器後端

後端 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 端
……

雲工程師

[說明] ：轉載自網絡日誌。

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。