構建現代Web應用時究竟是選擇傳統web應用還是SPA

来源:https://www.cnblogs.com/yilezhu/archive/2019/03/30/10626459.html
-Advertisement-
Play Games

在大前端盛行的今天,似乎前後端分離的開發模式才是大勢所趨,而SPA的概念更是應運而生。現在隨便構建一個web應用程式如果你不是使用SPA的話,就會感覺有點low,但是真的是這樣嗎?今天這篇文章我們就來一起探討下,構建現代web應用時該如何進行選擇。 作者:依樂祝 博客園鏈接:https://www. ...


在大前端盛行的今天,似乎前後端分離的開發模式才是大勢所趨,而SPA的概念更是應運而生。現在隨便構建一個web應用程式如果你不是使用SPA的話,就會感覺有點low,但是真的是這樣嗎?今天這篇文章我們就來一起探討下,構建現代web應用時該如何進行選擇。

作者:依樂祝
博客園鏈接:https://www.cnblogs.com/yilezhu/p/10626459.html

目前大伙都知道的是可通過兩種通用方法來構建 Web 應用程式:在伺服器上執行大部分應用程式邏輯的傳統 Web 應用程式,以及在 Web 瀏覽器中執行大部分用戶界面邏輯的單頁應用程式 (SPA),後者主要使用 Web API 與 Web 伺服器通信。 也可以將兩種方法混合使用,最簡單的方法是在更大型的傳統 Web 應用程式中承載一個或多個豐富 SPA 類子應用程式。
但合適使用傳統 Web 應用程式,何時使用SPA呢?針對這個問題最近在看微軟《使用 ASP.NET Core 和 Azure 構建新式 Web 應用程式》白皮書的時候。裡面如是說:

何時應使用傳統 Web 應用程式:

  • 應用程式的客戶端要求簡單,甚至要求只讀。
  • 應用程式需在不支持 JavaScript 的瀏覽器中工作。
  • 團隊不熟悉 JavaScript 或 TypeScript 開發技術。

何時應使用 SPA:

  • 應用程式必須公開具有許多功能的豐富的用戶界面。
  • 團隊熟悉 JavaScript 或 TypeScript 開發。
  • 應用程式已為其他(內部或公共)客戶端公開 API。

此外,SPA 框架還需要更強的體繫結構和安全專業知識。 相較於傳統 Web 應用程式,SPA 框架需要進行頻繁的更新和使用新框架,因此改動更大。 相較於傳統 Web 應用,SPA 應用程式在配置自動化生成和部署過程以及利用部署選項(如容器)方面的難度更大。

所以如果你要使用 SPA 模型改進用戶體驗時必須權衡這些註意事項。

Razor 組件

ASP.NET Core 3.0 引入了一種新模型,用於構建稱為 Razor 組件的豐富的、互動式和可組合的 UI。 Razor 組件允許開發者在伺服器上使用 Razor 構建 UI,並使用名為 WebAssembly 的 JavaScript 庫將此代碼傳遞到瀏覽器和執行客戶端。 ASP.NET Core 3.0 仍在開發中,但你應該會期望在本電子書的 3.0 更新中看到有關此技術的詳細信息。 有關 Razor 組件(名為 Blazor 的代碼)的詳細信息,請參閱 Blazor 入門

何時選擇傳統 Web 應用

以下內容詳細介紹前面提到的選擇傳統 Web 應用程式的原因。

應用程式的客戶端要求簡單,可能要求只讀

對許多 Web 應用程式而言,其大部分用戶的主要使用方式是只讀。 只讀(或以讀取為主)應用程式往往比那些維護和操作大量狀態的應用程式簡單得多。 例如,搜索引擎可能由一個帶有文本框的入口點和用於顯示搜索結果的第二頁組成。 匿名用戶可以輕鬆提出請求,並且很少需要使用客戶端邏輯。 同樣,一般而言,博客或內容管理系統中面向公眾的應用程式主要包含的內容與客戶端行為關係不大。 此類應用程式容易構建為基於伺服器的傳統 Web 應用程式,在 Web 伺服器上執行邏輯,並呈現要在瀏覽器中顯示的 HTML。事實上,網站的每個獨特頁面都有自己的 URL,搜索引擎可以將其存為書簽和編入索引(預設設置,無需將其添加為應用程式的單獨功能),這也是此類情況的一個明顯優勢。

應用程式需在不支持 JavaScript 的瀏覽器中工作

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

團隊不熟悉 JavaScript 或 TypeScript 開發技術

如果團隊不熟悉 JavaScript 或 TypeScript,但熟悉伺服器端 Web 應用程式開發,那相較於 SPA,他們交付傳統 Web 應用的速度可能更快。 除非以學習 SPA 編程為目的,或需要 SPA 提供用戶體驗,否則對已經熟悉構建傳統 Web 應用的團隊而言,選擇傳統 Web 應用的工作效率更高。

何時選擇 SPA

以下內容詳細介紹何時為 Web 應用選擇單頁應用程式開發樣式。

應用程式必須公開具有許多功能的豐富用戶界面

SPA 可支持豐富客戶端功能,當用戶執行操作或在應用的各區域間導航時無需重新載入頁面。 SPA 很少需要重新載入整個頁面,因此載入速度更快,可在後臺提取數據,並且對單個用戶操作的響應更快。 SPA 支持增量更新,可保存尚未完成的窗體或文檔,而無需用戶單擊按鈕提交窗體。 SPA 支持豐富的客戶端行為,例如拖放,比傳統應用程式更容易操作。 可以將 SPA 設計為在斷開連接的模式下運行,對客戶端模型進行更新,併在重新建立連接後將更新最終同步回伺服器。 如果應用要求包括豐富的功能,且超出了典型 HTML 窗體提供的功能,則應選擇 SPA 樣式應用程式。

請註意,SPA 通常需要實現內置於傳統 Web 應用中的功能,例如在反映當前操作的地址欄中顯示有意義的 URL(並允許用戶將此 URL 存為書簽或對其進行深層鏈接以便返回此 URL)。 SPA 還應允許用戶使用瀏覽器的後退和前進按鈕尋找用戶意料之中的結果。

團隊熟悉 JavaScript 和/或 TypeScript 開發

編寫 SPA 需要熟悉 JavaScript 和/或 TypeScript 以及客戶端編程技術和庫。 團隊應有能力像使用 Angular 一樣使用 SPA 框架編寫新式 JavaScript。

參考 - SPA 框架

應用程式已為其他(內部或公共)客戶端公開 API

如果已提供一個 Web API 供其他客戶端使用,則相較於在伺服器端窗體中複製邏輯,創建一個利用這些 API 的 SPA 實現更加容易。用戶與應用程式交互時,SPA 廣泛使用 Web API 來查詢和更新數據。

決策表 - 選傳統 Web 或 SPA

下麵的決策表總結了在傳統 Web 應用程式和 SPA 之間進行選擇時要考慮的一些基本因素。

因素 傳統 Web 應用 單頁面應用程式
需要團隊熟悉 JavaScript/TypeScript 最低 必需
支持不帶腳本的瀏覽器 支持 不支持
客戶端應用程式行為極少 適合 不必要
豐富而複雜的用戶界面要求 受限 適合

總結

今天給大家介紹了在構建現代Web應用時究竟是選擇傳統web應用還是spa的一些參考,希望對大家在進行現代web開發時技術選型時有所幫助。如果你有不同的看法可以在下麵留言。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 題意 "題目鏈接" Sol 線性基+線段樹分治板子題。。 調起來有點自閉。。 cpp include define fi first define se second define pb push_back define bit bitset using namespace std; const i ...
  • 老牌.NET控制項服務商,專註微軟.Net平臺的表示層與內容管理控制項 ...
  • Private Sub DS按鈕1_ButtonClick(Sender As Object) Handles DS按鈕1.ButtonClick Dim T As New Threading.Thread(AddressOf Doit) T.IsBackground = True T.Start(... ...
  • 裝飾器模式簡介 裝飾器模式是動態的向一個對象添加新的功能,並且保持其類方法簽名的完整性,換言之,其方法及繼承結構將不會被改變。這種模式一種結構型模式,是對現有類的包裝。這種模式,比生成子類更加靈活,更重要的是,裝飾者模式裝飾的是特定的行為或者或是職責,也沒有必要通過子類實現。 在日常生活中,裝飾器模 ...
  • [TOC] 最近在倒騰 的項目,試著搜一下微軟官方提供的 , 結果找到了. 當然還發現了 相關的開源資料和 資源. 微軟Github開源項目入口 當你訪問網址時,會自動跳轉到,於是可知微軟開源項目入口即為或. 微軟開源項目受歡迎程度排名 打開主頁,將排序條件從預設的 切換到 , 即可看到Star最多 ...
  • 獲取毫秒大家都經常用到。大家應該都知道怎麼用。但是,毫秒下麵還有微秒。其實這個方法也已經在c#中。只不過很少有人用到,所以查找資料也很少有人說。下麵代碼就是獲取微秒的方式:DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss:fff:ffffff"))fff 是 毫秒... ...
  • C#中的List集合在排序的時候,如果不使用Lambda表達式進行排序的話,一般調用Sort()方法進行排序,如果希望Sort()方法排序後的結果跟我們預想的效果一致或者按照我們自定義的規則排序,則需要將對應的實體繼承IComparable介面來實現。 MSDN上給IComparable介面的定義為 ...
  • 阿裡雲突發性能伺服器1核2G的t5伺服器在高資源利用率的情況下運行一段時間後,發現伺服器反應變得很慢,通過windows遠程桌面連接上伺服器後查看到CPU性能一直在90%到100%之間,無法降下來。前期剛上線應用的時候不卡頓,運行一段時間後出現伺服器卡頓,CPU利用率居高不下,此種情況很有可能是因為 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...