資訊專欄INFORMATION COLUMN
摘要：前段時(shí)間我針對手頭上的項(xiàng)目前端配置進(jìn)行了反思以及總結(jié)并且寫了兩篇文章傳統(tǒng)后端渲染的項(xiàng)目前端配置配置之前后端不分離很顯然這些配置能滿足一時(shí)的需求但是也有不足今天繼續(xù)總結(jié)這里應(yīng)該不涉及到具體后端語言只對前端配置進(jìn)行描述畢竟配置工程師逃靜態(tài)資源管
前段時(shí)間我針對手頭上的項(xiàng)目前端配置進(jìn)行了反思以及總結(jié)并且寫了兩篇文章: webpack傳統(tǒng)后端渲染的項(xiàng)目前端配置, webpack配置之前后端不分離, 很顯然這些配置能滿足一時(shí)的需求, 但是也有不足. 今天繼續(xù)總結(jié), 這里應(yīng)該不涉及到具體后端語言, 只對前端配置進(jìn)行描述. 畢竟配置工程師(逃
靜態(tài)資源管理傳統(tǒng)后端主導(dǎo)的項(xiàng)目中對靜態(tài)資源很少處理, 畢竟后端主要還是處理業(yè)務(wù)邏輯, 但是這樣一來前端的命門就被后端抓在手里而且還不受重視, 這就導(dǎo)致這么一個情況: 前端寫好靜態(tài)頁面和css js扔給后端轉(zhuǎn)換為jsp之類的后端模板. 更大的問題是后端會在頁面中增加很多后端邏輯. 這就弊處. 后端看在頁面寫一段java代碼處理邏輯方便那就很自然的這樣干了. 后端寫完邏輯后前端發(fā)現(xiàn)自己看不懂了(這里就需要稍微懂一點(diǎn)后端了), 這里不能說誰錯了, 只是開發(fā)模式很不合理. 我們需要做的是盡量避免這種情況的出現(xiàn).
對于后端模板我們姑且不算靜態(tài)資源. 那么傳統(tǒng)后端對靜態(tài)資源的處理方式就如下圖所示:
很明顯, 靜態(tài)資源的處理都在后端. 但是靜態(tài)資源的不管呈現(xiàn)還是處理都應(yīng)該是前端的事情. 甚至極端情況下html文件也應(yīng)該是前端的事情, 所以spa(單頁應(yīng)用)誕生了:
后端不再直接參與前端邏輯和靜態(tài)資源的處理, 這樣當(dāng)然有好處: 前后端算是完全分離了, 頁面由前端渲染, 但是弊處也相當(dāng)明顯: seo的問題, 首次加載速度... 等等. 再者前端無法控制后端的接口質(zhì)量, 導(dǎo)致分工倒是分了, 但是項(xiàng)目進(jìn)度反而是慢了, 老項(xiàng)目也不可能進(jìn)行完全的分離, 我認(rèn)為操作性很強(qiáng)的web應(yīng)用(注意是應(yīng)用)完全可以直接spa, 好處也毋庸置疑. 但是對于一些展示性的網(wǎng)站, 比如知乎, 簡書等卻不一定非得這樣(知乎的問題后面會提到, 不完全是react).
對于上面的情況, 我們可能有個更好的開發(fā)模式, 也是我目前在用的, 如下圖所示:
看起來似乎第二個沒有明顯不一樣. 但是我們要知道, 對于很多列表展示類的網(wǎng)頁可能后端渲染很方便很多, 對于單頁應(yīng)用來說多入口的webpack配置可能是不常用的. 但是如果是后端渲染的網(wǎng)頁, 每個模板我們都需要提供一個接口: 就是之前我寫的文章, 有興趣可以回頭看看. 后端通過讀取資源表來獲取靜態(tài)資源, 也就是說后端基本不需要跟靜態(tài)資源打交道了. 更有趣的是我們可以在任意頁面引用任意框架, 對于某個操作性很強(qiáng)的頁面來說, 我們完全可以使用vue, react ng等. 或者使用某個組件.
關(guān)于seo其實(shí)seo我也不了解, 但是姑妄說之. 我們首先來看兩個網(wǎng)站: 掘金和知乎, 在baidu和google下的搜索表現(xiàn):
知乎在google:
掘金在google:
知乎在baidu:
掘金在baidu:
上面我們可以看到, 二者其實(shí)還是有點(diǎn)差距的吧, 當(dāng)然也有可能是掘金沒太關(guān)注這方面.
但是通過開發(fā)者工具其實(shí)我們可以看到二者分別用了react和vue, 那么二者差異到底在哪呢? 我們分別禁用兩個網(wǎng)站的js(此處無圖), 掘金一片空白, 知乎至少可以正常渲染.
掘金完全是前端渲染, 知乎做到這一點(diǎn)也很簡單就是后端渲染一遍前端再渲染一遍(貌似是多余的), 但是我認(rèn)為這是值得的, 后端不需要寫接口, 把需要渲染的數(shù)據(jù)作為INITIAL_STATE 賦值給window, 知乎點(diǎn)贊之類的操作都是框架進(jìn)行處理的.
其實(shí)蠻建議掘金也這樣處理得, 掘金網(wǎng)頁端訪問并不是很爽.
總結(jié)上面不涉及具體代碼以及配置, 但是思路在那里, 不管后端是什么, 我們前端可以都寫的很爽, 同樣, 前后端分離不是說什么都是給前端干, 完全可以協(xié)調(diào)工作量.
最后有問題可以加群討論以及歡迎關(guān)注我的公眾號:
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92019.html
摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...
摘要：文檔官網(wǎng)文檔演示是什么是一款頂級全棧開發(fā)框架。不重復(fù)造輪子，而是采用業(yè)界最新的開源技術(shù)，進(jìn)行全棧開發(fā)的最佳組合。漸進(jìn)式開發(fā)由于模塊的高度內(nèi)聚，可以將業(yè)務(wù)以模塊的形式沉淀，在多個項(xiàng)目中重復(fù)使用，既可貢獻(xiàn)到開源社區(qū)，也可部署到公司內(nèi)部私有倉庫。 文檔 官網(wǎng) && 文檔 演示 PC：https://admin.cabloy.com Mobile： showImg(https://seg...
摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標(biāo)準(zhǔn)，顧名思義，即的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標(biāo)準(zhǔn)讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標(biāo)準(zhǔn)，顧名思義，WebVR 即 web + VR 的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...
閱讀 677·2023-04-26 02:08
閱讀 2692·2021-11-18 10:02
閱讀 3494·2021-11-11 16:55
閱讀 2372·2021-08-17 10:13
閱讀 2928·2019-08-30 15:53
閱讀 709·2019-08-30 15:44
閱讀 2584·2019-08-30 11:10
閱讀 1785·2019-08-29 16:57
