在大前端盛行的今天，似乎前后端分離的開發(fā)模式才是大勢(shì)所趨，而SPA的概念更是應(yīng)運(yùn)而生?，F(xiàn)在隨便構(gòu)建一個(gè)web應(yīng)用程序如果你不是使用SPA的話，就會(huì)感覺有點(diǎn)low，但是真的是這樣嗎？今天這篇文章我們就來一起探討下，構(gòu)建現(xiàn)代web應(yīng)用時(shí)該如何進(jìn)行選擇。

目前大伙都知道的是可通過兩種通用方法來構(gòu)建 Web 應(yīng)用程序：在服務(wù)器上執(zhí)行大部分應(yīng)用程序邏輯的傳統(tǒng) Web 應(yīng)用程序，以及在 Web 瀏覽器中執(zhí)行大部分用戶界面邏輯的單頁應(yīng)用程序 (SPA)，后者主要使用 Web API 與 Web 服務(wù)器通信。 也可以將兩種方法混合使用，最簡單的方法是在更大型的傳統(tǒng) Web 應(yīng)用程序中承載一個(gè)或多個(gè)豐富 SPA 類子應(yīng)用程序。
但合適使用傳統(tǒng) Web 應(yīng)用程序，何時(shí)使用SPA呢？針對(duì)這個(gè)問題最近在看微軟《使用 ASP.NET Core 和 Azure 構(gòu)建新式 Web 應(yīng)用程序》白皮書的時(shí)候。里面如是說：

何時(shí)應(yīng)使用傳統(tǒng) Web 應(yīng)用程序：

• 應(yīng)用程序的客戶端要求簡單，甚至要求只讀。

• 應(yīng)用程序需在不支持 JavaScript 的瀏覽器中工作。

• 團(tuán)隊(duì)不熟悉 JavaScript 或 TypeScript 開發(fā)技術(shù)。

何時(shí)應(yīng)使用 SPA：

• 應(yīng)用程序必須公開具有許多功能的豐富的用戶界面。

• 團(tuán)隊(duì)熟悉 JavaScript 或 TypeScript 開發(fā)。

• 應(yīng)用程序已為其他（內(nèi)部或公共）客戶端公開 API。

此外，SPA 框架還需要更強(qiáng)的體系結(jié)構(gòu)和安全專業(yè)知識(shí)。 相較于傳統(tǒng) Web 應(yīng)用程序，SPA 框架需要進(jìn)行頻繁的更新和使用新框架，因此改動(dòng)更大。 相較于傳統(tǒng) Web 應(yīng)用，SPA 應(yīng)用程序在配置自動(dòng)化生成和部署過程以及利用部署選項(xiàng)（如容器）方面的難度更大。

所以如果你要使用 SPA 模型改進(jìn)用戶體驗(yàn)時(shí)必須權(quán)衡這些注意事項(xiàng)。

Razor 組件

ASP.NET Core 3.0 引入了一種新模型，用于構(gòu)建稱為 Razor 組件的豐富的、交互式和可組合的 UI。 Razor 組件允許開發(fā)者在服務(wù)器上使用 Razor 構(gòu)建 UI，并使用名為 WebAssembly 的 JavaScript 庫將此代碼傳遞到瀏覽器和執(zhí)行客戶端。 ASP.NET Core 3.0 仍在開發(fā)中，但你應(yīng)該會(huì)期望在本電子書的 3.0 更新中看到有關(guān)此技術(shù)的詳細(xì)信息。 有關(guān) Razor 組件（名為 Blazor 的代碼）的詳細(xì)信息，請(qǐng)參閱?Blazor 入門。

何時(shí)選擇傳統(tǒng) Web 應(yīng)用

以下內(nèi)容詳細(xì)介紹前面提到的選擇傳統(tǒng) Web 應(yīng)用程序的原因。

應(yīng)用程序的客戶端要求簡單，可能要求只讀

對(duì)許多 Web 應(yīng)用程序而言，其大部分用戶的主要使用方式是只讀。 只讀（或以讀取為主）應(yīng)用程序往往比那些維護(hù)和操作大量狀態(tài)的應(yīng)用程序簡單得多。 例如，搜索引擎可能由一個(gè)帶有文本框的入口點(diǎn)和用于顯示搜索結(jié)果的第二頁組成。 匿名用戶可以輕松提出請(qǐng)求，并且很少需要使用客戶端邏輯。 同樣，一般而言，博客或內(nèi)容管理系統(tǒng)中面向公眾的應(yīng)用程序主要包含的內(nèi)容與客戶端行為關(guān)系不大。 此類應(yīng)用程序容易構(gòu)建為基于服務(wù)器的傳統(tǒng) Web 應(yīng)用程序，在 Web 服務(wù)器上執(zhí)行邏輯，并呈現(xiàn)要在瀏覽器中顯示的 HTML。事實(shí)上，網(wǎng)站的每個(gè)獨(dú)特頁面都有自己的 URL，搜索引擎可以將其存為書簽和編入索引（默認(rèn)設(shè)置，無需將其添加為應(yīng)用程序的單獨(dú)功能），這也是此類情況的一個(gè)明顯優(yōu)勢(shì)。

應(yīng)用程序需在不支持 JavaScript 的瀏覽器中工作

如需在有限或不支持 JavaScript 的瀏覽器中工作的 Web 應(yīng)用程序，則應(yīng)使用傳統(tǒng)的 Web 應(yīng)用工作流編寫（或至少可以回退到此類行為）。 SPA 需要客戶端 JavaScript 才能正常工作；如果沒有客戶端 JavaScript，SPA 不是好的選擇。

團(tuán)隊(duì)不熟悉 JavaScript 或 TypeScript 開發(fā)技術(shù)

如果團(tuán)隊(duì)不熟悉 JavaScript 或 TypeScript，但熟悉服務(wù)器端 Web 應(yīng)用程序開發(fā)，那相較于 SPA，他們交付傳統(tǒng) Web 應(yīng)用的速度可能更快。 除非以學(xué)習(xí) SPA 編程為目的，或需要 SPA 提供用戶體驗(yàn)，否則對(duì)已經(jīng)熟悉構(gòu)建傳統(tǒng) Web 應(yīng)用的團(tuán)隊(duì)而言，選擇傳統(tǒng) Web 應(yīng)用的工作效率更高。

何時(shí)選擇 SPA

以下內(nèi)容詳細(xì)介紹何時(shí)為 Web 應(yīng)用選擇單頁應(yīng)用程序開發(fā)樣式。

應(yīng)用程序必須公開具有許多功能的豐富用戶界面

SPA 可支持豐富客戶端功能，當(dāng)用戶執(zhí)行操作或在應(yīng)用的各區(qū)域間導(dǎo)航時(shí)無需重新加載頁面。 SPA 很少需要重新加載整個(gè)頁面，因此加載速度更快，可在后臺(tái)提取數(shù)據(jù)，并且對(duì)單個(gè)用戶操作的響應(yīng)更快。 SPA 支持增量更新，可保存尚未完成的窗體或文檔，而無需用戶單擊按鈕提交窗體。 SPA 支持豐富的客戶端行為，例如拖放，比傳統(tǒng)應(yīng)用程序更容易操作。 可以將 SPA 設(shè)計(jì)為在斷開連接的模式下運(yùn)行，對(duì)客戶端模型進(jìn)行更新，并在重新建立連接后將更新最終同步回服務(wù)器。 如果應(yīng)用要求包括豐富的功能，且超出了典型 HTML 窗體提供的功能，則應(yīng)選擇 SPA 樣式應(yīng)用程序。

請(qǐng)注意，SPA 通常需要實(shí)現(xiàn)內(nèi)置于傳統(tǒng) Web 應(yīng)用中的功能，例如在反映當(dāng)前操作的地址欄中顯示有意義的 URL（并允許用戶將此 URL 存為書簽或?qū)ζ溥M(jìn)行深層鏈接以便返回此 URL）。 SPA 還應(yīng)允許用戶使用瀏覽器的后退和前進(jìn)按鈕尋找用戶意料之中的結(jié)果。

團(tuán)隊(duì)熟悉 JavaScript 和/或 TypeScript 開發(fā)

編寫 SPA 需要熟悉 JavaScript 和/或 TypeScript 以及客戶端編程技術(shù)和庫。 團(tuán)隊(duì)?wèi)?yīng)有能力像使用 Angular 一樣使用 SPA 框架編寫新式 JavaScript。

參考 - SPA 框架

• Angular
  https://angular.io

• JavaScript 框架的比較
  https://jsreport.io/the-ultimate-guide-to-javascript-frameworks/

應(yīng)用程序已為其他（內(nèi)部或公共）客戶端公開 API

如果已提供一個(gè) Web API 供其他客戶端使用，則相較于在服務(wù)器端窗體中復(fù)制邏輯，創(chuàng)建一個(gè)利用這些 API 的 SPA 實(shí)現(xiàn)更加容易。用戶與應(yīng)用程序交互時(shí)，SPA 廣泛使用 Web API 來查詢和更新數(shù)據(jù)。

決策表 - 選傳統(tǒng) Web 或 SPA

下面的決策表總結(jié)了在傳統(tǒng) Web 應(yīng)用程序和 SPA 之間進(jìn)行選擇時(shí)要考慮的一些基本因素。

因素傳統(tǒng) Web 應(yīng)用單頁面應(yīng)用程序

需要團(tuán)隊(duì)熟悉 JavaScript/TypeScript	最低	必需
支持不帶腳本的瀏覽器	支持	不支持
客戶端應(yīng)用程序行為極少	適合	不必要
豐富而復(fù)雜的用戶界面要求	受限	適合

總結(jié)

今天給大家介紹了在構(gòu)建現(xiàn)代Web應(yīng)用時(shí)究竟是選擇傳統(tǒng)web應(yīng)用還是spa的一些參考，希望對(duì)大家在進(jìn)行現(xiàn)代web開發(fā)時(shí)技術(shù)選型時(shí)有所幫助。如果你有不同的看法可以在下面留言。

總結(jié)

以上是生活随笔為你收集整理的构建现代Web应用时究竟是选择传统web应用还是SPA的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。