Web 進化

時間 2019-11-08

標籤 web 進化欄目 HTML 简体版

原文原文鏈接

來源於：http://xitu.github.io/2016/05/11/history-of-web/php

傳統後臺架構

上古時代

上古時代html

<!DOCTYPE html>
<html>
<body>

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
 echo "<div> id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "</div>";
 }
} else {
 echo "0 results";
}
$conn->close();
?>

</body>
</html>

這種模式很是適合創業型小項目，不分先後端，常常 3-5 人搞定全部開發。頁面由 JSP、PHP 等工程師在服務端生成，瀏覽器負責展示。基本上是服務端給什麼瀏覽器就展示什麼，展示的控制在Server 層。前端

後端MVC時代

e2.png
爲了下降複雜度，之後端爲出發點，有了 Web Server 層的架構升級，好比 thinkPHP 、Laravel、 Spring MVC 等。node

Ajax時代

e3.png
XMLHttpRequest異步調用服務器端來獲取數據，並將數據應用在客戶端，實現了無刷新的效果，這使得Google Maps依賴其極好的用戶體驗獲取了巨大的成功，Ajax這個概念開始火爆，SPA （Single Page Application 單頁面應用）時代就開始了。mysql

前端 MV* 時代

e4.png
爲了下降前端開發複雜度，除了 Backbone，還有大量框架涌現，好比 EmberJS、KnockoutJS、AngularJS、Vue、React等等。git

好處很明顯：
一、先後端職責很清晰。前端工做在瀏覽器端，後端工做在服務端。清晰的分工，可讓開發並行，測試數據的模擬不難，前端能夠本地開發。後端則能夠專一於業務邏輯的處理，輸出 RESTful 等接口。
二、前端開發的複雜度可控。前端代碼很重，但合理的分層，讓前端代碼能各司其職。這一塊蠻有意思的，簡單如模板特性的選擇，就有不少不少講究。並不是越強大越好，限制什麼，留下哪些自由，代碼應該如何組織，全部這一切設計，得花一本的厚度去說明。
三、部署相對獨立，產品體驗能夠快速改進。
但依舊有不足之處：
一、代碼不能複用。好比後端依舊須要對數據作各類校驗，校驗邏輯沒法複用瀏覽器端的代碼。若是能夠複用，那麼後端的數據校驗能夠相對簡單化。二、全異步，對 SEO 不利。每每還須要服務端作同步渲染的降級方案。
三、性能並不是最佳，特別是移動互聯網環境下。
四、SPA 不能知足全部需求，依舊存在大量多頁面應用。URL Design 須要後端配合，前端沒法徹底掌控。github

Node全棧&同構

前端爲主的 MV* 模式解決了不少不少問題，但如上所述，依舊存在很多不足之處。隨着 Node.js 的興起，JavaScript 開始有能力運行在服務端。web

React 同構渲染
975d4efef933f05fc62a68d27e36e11a_r.png
Koa+Reactsql

有了服務端渲染的基礎，後端和前端的路由也能夠作到統一。
同構的實現彌補了前面提到的單純前端實現的SPA的提到先後端代碼複用，SEO，URL Design這些問題。數據庫

引入NodeJS實現先後端分離

51d06ddc3f781892df0a19a053c249bb5d0a4108.jpg

爲何要先後端分離？

因爲以前的Web基本上都是基於後端的MVC框架，架構決定了前端只能依賴後端。前端寫好靜態demo，而後根據分工前端或者後端改寫成相應的模版語言，好比 blade，smarty等等。這種基於後端環境開發是很痛苦和低效率的，後端無法擺脫對展示的強關注，從而專心於業務邏輯層的開發，前端也吐槽後端亂改他們的代碼。因此加上一個nodejs中間層來分離。