前端開發的歷史.md

時間  2019-11-22
標籤 前端 開發 歷史 简体版
原文   原文鏈接

前端開發的歷史

前端和後端

前端（英語：front-end）和後端（英語：back-end）是描述進程開始和結束的通用詞彙。前端做用於採集輸入信息，後端進行處理。計算機程序的界面樣式，視覺呈現屬於前端。javascript

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

frontend
frontend

先後端不分的時代

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

  1. 後端收到瀏覽器的請求
  2. 生成靜態頁面
  3. 發送到瀏覽器

後端 MVC 的開發模式

那時的網站開發，採用的是後端 MVC 模式。MVC模式（Model–view–controller）是軟件工程中的一種軟件架構模式，把軟件系統分爲三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。css

  • 模型（Model） - 程序員編寫程序應有的功能（實現算法等等）、數據庫專家進行數據管理和數據庫設計(能夠實現具體的功能)；提供/保存數據
  • 視圖（View） - 界面設計人員進行圖形界面設計；展現數據，提供用戶界面
  • 控制器（Controller）- 負責轉發請求，對請求進行處理；數據處理，實現業務邏輯

前端只是後端 MVC 的 V。
經過JavaScript所實現的基於 MVC 模型，須要注意的是：MVC 不是一種技術，而是一種理念:html

/** 模擬 Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model 負責存放資料 */
M.data = "hello world";

/** View 負責將資料輸出到螢幕上 */
V.render = (M) => { alert(M.data); }

/** Controller 做為一個 M 和 V 的橋樑 */
C.handleOnload = () => { V.render(M); }

/** 在網頁讀取的時候呼叫 Controller */
window.onload = C.handleOnload;

以 PHP 框架 Laravel 爲例。前端

laravel-mvc
laravel-mvc

前端工程師的角色

那時的前端工程師，其實是模板工程師，負責編寫頁面模板。後端代碼讀取模板，替換變量，渲染出頁面。vue

典型的 PHP 模板:html5

<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>

HTML、Cookie、CSS、JS

1991年10月HTML標籤，一個非正式CERN文件首次公開18個HTML標籤，2014年10月28日，HTML 5做爲W3C推薦標準發佈java

Cookie（複數形態Cookies），又稱爲「小甜餅」。類型爲「小型文本文件」，指某些網站爲了辨別用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。由網景公司的前僱員盧·蒙特利在1993年3月發明。node

1994年，哈肯·維姆·萊和伯特·波斯合做設計CSS。層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來爲結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言，由W3C定義和維護。當前最新版本是CSS2.1，爲W3C的推薦標準。CSS3如今已被大部分現代瀏覽器支持，而下一版的CSS4仍在開發中。css3

JavaScript（一般縮寫爲JS）是一種高級的、解釋型的編程語言。JavaScript是一門基於原型、函數先行的語言，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。它提供語法來操控文本、數組、日期以及正則表達式等，不支持I/O，好比網絡、存儲和圖形等，但這些均可以由它的宿主環境提供支持。它已經由ECMA（歐洲電腦製造商協會）經過ECMAScript實現語言的標準化。JavaScript最初開發於1996年，被使用於Netscape Navigator網頁瀏覽器。

Ajax

AJAX即「Asynchronous JavaScript and XML」（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出。

1995年，JAVA語言的初版發佈，隨之發佈的的Java applets（JAVA小程序）首次實現了異步加載。瀏覽器經過運行嵌入網頁中的Java applets與服務器交換數據，沒必要刷新網頁。1996年，Internet Explorer將iframe元素加入到HTML，支持局部刷新網頁。1998年先後，Outlook Web Access小組寫成了容許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件。2004年：Gmail；2005年：Google 地圖。

前端再也不是後端的模板，能夠獨立獲得各類數據。

Web 2.0

Web 1.0 最先的概念包括常更新的靜態HTML頁面。而.com時代的成功則是依靠一個更加動態的Web（指代「Web 1.5」），其中CMS（內容管理系統）能夠從不斷變化的內容數據庫中即時生成動態HTML頁面。

Web 2.0是一種新的互聯網方式，經過網絡應用（Web Applications）促進網絡上人與人間的信息交換和協同合做，其模式更加以用戶爲中心。典型的Web 2.0站點有：網絡社區、網絡應用程序、社交網站、博客、Wiki等等。動態網頁，富交互，前端數據處理。

Ajax 技術促成了 Web 2.0 的誕生。

從那時起，前端變得複雜了，對前端工程師的要求愈來愈高。

前端 MVC 框架

前端經過 Ajax 獲得數據，所以也有了處理數據的需求。前端代碼變得也須要保存數據、處理數據、生成視圖，這致使了前端 MVC 框架的誕生。

2010年，Backbone.js。Backbone.js是一套JavaScript框架與RESTful JSON的應用程序接口。也是一套大體上符合MVC架構的編程範型。常被用來開發單頁的互聯網應用程序，以及用來維護網絡應用程序的各類部分（例如多用戶與服務端）的同步。Backbone.js是由Jeremy Ashkenas所開發，他同時也是CoffeeScript的開發者。

backbone
backbone

Backbone 將前端代碼分紅兩個基本部分。

  • Model：管理數據
  • View：數據的展示

backbone-model-view
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 爲例。

backbone-routing
backbone-routing 

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。

MVVM（Model–view–viewmodel）是一種軟件架構模式。MVVM有助於將圖形用戶界面的開發與業務邏輯或後端邏輯（數據模型）的開發分離開來，這是經過標記語言或GUI代碼實現的。

  • Model
  • View
  • View-Model：簡化的 Controller，惟一做用就是爲 View 提供處理好的數據，不含其餘邏輯。

本質：view 綁定 view-model，視圖與數據模型強耦合。數據的變化實時反映在 view 上，不須要手動處理。

mvvm
mvvm

SPA

前端能夠作到：

  • 讀寫數據
  • 切換視圖
  • 用戶交互

這意味着，網頁實際上是一個應用程序。SPA = Single-page application

2010年後，前端工程師從開發頁面，變成了開發「前端應用」（跑在瀏覽器裏面的應用程序）。

傳統的架構：

architecture-old
architecture-old

單頁應用的架構（多了一個前端 MVC 層）：

architecture-new
architecture-new

Angular

Google 公司推出的 Angular 是最流行的 MVVM 前端框架。它的風格屬於 HTML 語言的加強，核心概念是雙向綁定。

angular
angular 

<div ng-app="">
  <p>
    姓名 :
    <input type="text" ng-model="name" placeholder="在這裏輸入您的大名" >
  </p>
  <h1>你好，{{name}}</h1>
</div>

Vue

Vue.js 是如今很熱門的一種前端 MVVM 框架。它的基本思想與 Angular 相似，可是用法更簡單，並且引入了響應式編程的概念。

vue
vue 

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>
<script> var journal = new Vue({ el: '#journal', data: { message: 'Your first entry' } }); </script>

先後端分離

  • Ajax -> 前端應用興起
  • 智能手機 -> 多終端支持

這兩個緣由，致使前端開發方式發生根本的變化。前端再也不是後端 MVC 中的 V，而是單獨的一層。

REST 接口

表現層狀態轉換（英語：Representational State Transfer，縮寫：REST）是Roy Thomas Fielding博士於2000年在他的博士論文中提出來的一種萬維網軟件架構風格，目的是便於不一樣軟件/程序在網絡（例如互聯網）中互相傳遞信息。

先後端分離之後，它們之間經過接口通訊。
後端暴露出接口，前端消費後端提供的數據。
後端接口通常是 REST 形式，先後端的通訊協議通常是 HTTP。

GET http://www.store.com/products  // 列舉全部商品

GET http://www.store.com/products/12345  // 呈現某一件商品

POST http://www.store.com/orders  // 下單購買
<purchase-order>
  <item> ... </item>
</purchase-order>

Node

2009年，Node 項目誕生，它是服務器上的 JavaScript 運行環境。Node = JavaScript + 操做系統 API

node
node

Node 的意義:

  • JavaScript 成爲服務器腳本語言，與 Python 和 Ruby 同樣
  • JavaScript 成爲惟一的瀏覽器和服務器都支持的語言
  • 前端工程師能夠編寫後端程序了

前端開發模式的根本改變:

  • Node 環境下開發
  • 大量使用服務器端工具
  • 引入持續集成等軟件工程的標準流程
  • 開發完成後，編譯成瀏覽器能夠運行的腳本，放上 CDN

全棧工程師

前端工程師正在轉變爲全棧工程師

  • 一我的負責開發前端和後端
  • 從數據庫到 UI 的全部開發

軟件行業的發展動力

歷史演變：先後端不分 -> 先後端分離 -> 全棧工程師

動力：更加產業化、大規模地生產軟件

  • 效率更高
  • 成本更低

通用性好、可以快速產出的技術最終會贏，單個程序員的生產力要求愈來愈高。

H5

爲何 H5 技術會贏得移動端？

  • 開發速度快：Native 須要從新編譯才能看到結果，H5 是即時輸出
  • 開發成本低：Native 須要兩個開發團隊，H5 只要一個
  • 快速發佈：安卓 Native 新版本須要24小時，iOS 須要 3 ～ 4 天，H5 能夠隨時更新

Hybrid App，Hybrid技術指的是利用Web開發技術，調用Native相關的API，實現移動與Web兩者的有機結合。

歷史概覽

1991 年 HTML 誕生了
1993 年 cookie 的誕生
1998 年 ajax 的誕生
2005 年 「web工程師」 的誕生
2006 年 jQuery 的誕生
2009 年 Node 的誕生
2012 年 MVVM 的時代拉開序幕
2014年 html5 css3 的誕生
2015年6月，ECMAScript 6.0發佈

參考資料：

  1. 前端和後端
  2. MVC
  3. Cookie
  4. HTML
  5. 層疊樣式表
  6. JavaScript
  7. Web_2.0
  8. Backbone.js
  9. MVVM
  10. 表現層狀態轉換
  11. 前端開發的歷史和趨勢
  12. 回顧前端歷史，明晰前端將來
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程