《從零構建前后分離web項目》：開篇 - 縱觀WEB歷史演變

songjz 發布于2019-08-19 11:06 / 1945人閱讀

摘要：更詳細的內容下一章開篇深入聊聊前后分離講述關于我目前在寫從零構建前后分離項目系列，修正和補充以此為準不斷更新的項目實踐地址彩蛋提前預覽下一章傳送門

開篇：縱觀WEB歷史演變

在校學習和幾年工作工作中不知不覺經歷了一半的 WEB 歷史演變、對近幾年的發展比較了解，結合經驗聊聊 WEB 發展歷史。

演變不易，但也是必然，因為為人始終要進步。

WEB 的發展史 一、開山鼻祖 - 石器時代 靜態網站

這是 1997 年 Apple 官網，那時的網站不如叫網頁，像一張浮夸的彩色報紙，那時是純粹的 HTML 時代，不管你是不是訪問這個網頁，每個頁面都是在服務器上存在的。

CGI技術

隨后技術性強一點的網站可能會通過 CGI Perl 運行一小段代碼與數據庫或文件系統進行交互。比如：

這是1998 年的 Google ，為了達到搜索條件，不可能用大量的人力去堆砌靜態頁面,所以使用這種方式“曲線救國”，但是 CGI 伸縮性不是太好：每個請求分配一個新的進程，不太安全(直接使用文件系統或者環境變量)，同時也沒提供一種結構化的方式去構造動態應用程序。

靜態網站是最受搜索引擎歡迎的網站，因為它相對固定，所以網站 SEO 非常好做，我猜測這也是為什么現在的文檔網站大部分都是靜態網頁的原因之一吧。

很可惜我沒能親眼看一看這樣的時代

二、前人種樹 - 文明時代 asp 和 jsp

2005 年左右，先后出現了微軟的 ASP 和 Java Server Pages [JSP] 等技術,取代了 CGI ，增強了 WEB 與服務端的交互的安全性、用起來也更加簡單，但隨著各個公司WEB業務的復雜性，缺點也逐漸暴露出來：

1、技術單一，難以維護

JSP頁面由HTML代碼和嵌入其中的Java代碼所組成,用一個比較常見的 JSP 代碼段舉例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <%@ page import="com.zifangsky.OnlineFriend.model.article.ShowByPage"%>

JSP = HTML+Java

上面的代碼 HTML 中大量耦合了JAVA代碼，通過JSP編譯之后可以在客戶端充當部分服務端的角色，這讓我們難以搞清服務端的角色，以及增加調試的復雜度。業務稍微復雜一點，試想一下：HTML中摻雜了太多java代碼，不論是開發還是維護都是一件痛苦的事情。

2、不不夠靈活
JSP與Java Servlet一樣，是在服務器端執行的，通常返回該客戶端的就是一個HTML文本。我們每次的請求：獲取的數據、內容的加載，都是服務器為我們返回染完成之后的 DOM，這也就使得我們開發網站的靈活度大打折扣，在這種情況下，同年：Ajax火了。

AJAX 的出現

為什么說 2005 年 Ajax 火了？因為 Ajax 技術并不是 2005 年出現的，他的雛形是 1999 年。

1999年，微軟公司發布IE5，第一次引入新功能：允許javascript腳本向服務器發起HTTP請求[這也就是今天萬惡的 ActiveX 原型]。這個功能當時并沒有引起注意，直到2004年Gmail發布和2005年Google Map發布，才引起廣泛重視

Google做了什么事兒？
在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來，他大概是這樣的事情：

現在看來很常見的技術手段，當時迅速燃爆了技術圈，以此來實現：異步交互
這樣既能增加用戶的體驗，又能替代掉頁面部分的服務端代碼，從此， AJAX 成為腳本發起 HTTP 通信的代名詞，次年 W3C 也在 2006 年發布了 AJAX 的國際標準

總結：

隨后各種 JSP ASP 的改良模板引擎、全新的交互方式也如雨后春筍一般涌現。并且以 JAVA 作為服務端也出現了如 Struts 、 Spring、Hibernate 的老一代框架、采用后端 MVC 的方式讓構建 WEB 應用再一次更加健全, WEB 服務正在逐漸由石器時代走向文明時代。

三、化繁為簡 - 工業革命時代

時光啊不斷地飛逝，前端后端也出現了幾個潮流。

前端發展

移動端

手機已經發展出了一些苗頭，網頁也區分了web和移動應用兩種模式，但移動端限制于當時手機行業的技術，發展較慢。

Jquery的出現

出現了非常流行的JavaScript庫：jquery，能夠快速構建動態、美妙的web應用，完美的封裝了Ajax，讓開發者開發網頁變得優雅。

SPA的雛形

隨著文明時代 Ajax 正式提出，加上 CDN 開始大量用于靜態資源存儲，于是出現了 SPA （Single Page Application 單頁面應用），Backbone EmberJS AngularJS 這樣一批前端框架隨之出現，但以當時的配套技術來說，SPA 道路并不好走：例如 SEO 問題、SPA 過多的頁面、復雜場景下 VIEW 的綁定等，都沒有很好的處理。

后端發展

Struts 、 Spring、Hibernate 經過幾年的發展、SSM這個今天被我們說爛了的詞、當時幾乎成了當時 JAVA 服務端的首要選型，我想這也是為什么很多公司、或外包公司依然維護這樣一套架構的主要原因。

總結
這幾年的飛速發展，為我們節約了大量的經歷、降低了開發者和開發過程的門檻，極大提升了開發效率和迭代速度，我稱之為工業時代

經歷

說出來你可能不信：大三快結束時實習求得的第一份工作，一個人斷斷續續開發7、8個月，就是鉆研這些自技術棧，獨立開發出一款web應用微寶創業,慚愧的說：

項目架構從文明時代 -> 走到最后的工業時代！不斷的重構，不斷的上線 ，拼命的學習，我很感謝當時老板對我的信任和同事對我的幫助。

四、百家爭鳴 - 技術大爆炸時代

時光啊他一刻不停，直到今天 -- 技術只能用爆炸來形容。

前端爆炸

工業時代提出的 SPA 模型隨著 NODE 的興起、服務端、各種工具、容器的飛速發展、前端 MVC MVVM 模式逐漸清晰、前端涌現了相當一批優秀的開源項目：
包管理： npm yarn
打包：grunt gulp
模塊加載：RequireJS SeaJs
框架：VUE Angular React
hybrid ：ionic weex react-native electron
預處理器：less sass
數據可視化：echarts hcharts
以及提升用戶體驗的動畫，讓我們更有“面子”

甚至前端也可以使用 Node 來構建自己簡單的服務端、正在逐漸擺脫“客戶端開發者”的角色

后端爆炸

更適合面向服務器編程，以前你如果使用C或者C++做的那些事情，用Go來做很合適，例如、虛擬機處理、文件系統等，強如 docker Kubernetes（k8s）都是 GO 寫的

python

像一門生物語言，目前看來更容易處理算法、人工智能、網絡爬蟲、運維方向

java

一款20多年的語言，不斷的變強。涌現了很多高質量的庫，幾個有代表性的：

netty rebbitmq：輕松實現消息隊列
elasticSearch：輕松實現搜索引擎
spring-boot：面向配置，更加輕松的構建web服務端
spring-cloud、dubbo：輕松構建微服務

以及即將迎來的 強悍的JAVA11

還有 持續集成 云服務 devops 等運維相關

總結

go 和 python 的出現讓我們服務端開發者能做更多的事情，比如自動化運維、寫中間件。逐漸偏向全棧方向發展。而 JAVA 20多年來的生態圈子發展，能幫助我們寫出更健壯的服務。以及狠狠向我們砸來的：人工智能、devops、云服務等技術，令我們眼花繚亂，開源成為了一種潮流，技術分享成了每個人都想做的事情，我稱之為：技術爆炸的時代

經歷

我近兩年很煩惱：如何才能讓前后端更加優雅的通信？

曾經使用多種后端模板引擎直到完全摒棄，后到 node 做代理、渲染 + grunt 進行數處理，之后逐漸使用

vue + webpack ------>  Rest API

這樣如果不得不用 NODE 也只會成為 Rest 中的一員而不用經過 NODE 做繁瑣的通信了。這種前后分離的方式達到了滿意的效果，前端不必再管后端的事情，后端？寫好自己的服務就好了。

更詳細的內容下一章 《開篇：深入聊聊前后分離》 講述

關于我

目前在寫《從零構建前后分離項目》系列，修正和補充以此為準

不斷更新的項目實踐地址

彩蛋：提前預覽下一章傳送門

GPU云服務器云服務器前后端分離項目部署云服務器阿里云前后端分離項目怎么部署服務器 web服務器架構演變構建web服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/76998.html

《從零構建前后分離web項目》：開篇 - 縱觀WEB歷史演變

摘要：更詳細的內容下一章開篇深入聊聊前后分離講述關于我目前在寫從零構建前后分離項目系列，修正和補充以此為準不斷更新的項目實踐地址彩蛋提前預覽下一章傳送門開篇：縱觀WEB歷史演變在校學習和幾年工作工作中不知不覺經歷了一半的 WEB 歷史演變、對近幾年的發展比較了解，結合經驗聊聊 WEB 發展歷史。演變不易，但也是必然，因為為人始終要進步。 WEB 的發展史一、開山鼻祖 - 石器時代...

tracy 2019-08-23 11:44 評論0 收藏0
《從零構建前后分離web項目》探究 - 深入聊聊前后分離架構

摘要：什么是前后分離前后端分離并不是什么新鮮事，到處都是前后端分離的實踐。然而一些歷史項目在從一體化設計轉向前后端分離的架構時，不可避免的會遇到各種各樣的問題。搞了一個前后分離，需要分離部署。探究：深入聊聊前后分離架構前后分離，一直是一個相當泛泛的問題，前后分離到底好不好？沒有絕對的對，沒有絕對的錯，業界就這個問題已經激烈的探討幾年了.出現討論的點在于：分離當然是好的,但是以什么樣的服...

whinc 2019-08-23 11:44 評論0 收藏0
《從零構建前后分離web項目》探究 - 深入聊聊前后分離架構

摘要：什么是前后分離前后端分離并不是什么新鮮事，到處都是前后端分離的實踐。然而一些歷史項目在從一體化設計轉向前后端分離的架構時，不可避免的會遇到各種各樣的問題。搞了一個前后分離，需要分離部署。探究：深入聊聊前后分離架構前后分離，一直是一個相當泛泛的問題，前后分離到底好不好？沒有絕對的對，沒有絕對的錯，業界就這個問題已經激烈的探討幾年了.出現討論的點在于：分離當然是好的,但是以什么樣的服...

Corwien 2019-08-23 11:40 評論0 收藏0
《從零構建前后分離web項目》探究 - 深入聊聊前后分離架構

摘要：什么是前后分離前后端分離并不是什么新鮮事，到處都是前后端分離的實踐。然而一些歷史項目在從一體化設計轉向前后端分離的架構時，不可避免的會遇到各種各樣的問題。搞了一個前后分離，需要分離部署。探究：深入聊聊前后分離架構前后分離，一直是一個相當泛泛的問題，前后分離到底好不好？沒有絕對的對，沒有絕對的錯，業界就這個問題已經激烈的探討幾年了.出現討論的點在于：分離當然是好的,但是以什么樣的服...

lunaticf 2019-08-19 11:06 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？

摘要：前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點一提出自身業務的需求是 # 前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 評論0 收藏0