B/S 架構(gòu)軟件：Web APP開(kāi)發(fā)的技術(shù)框架和一體化解決方案

時(shí)間：2023-05-28 02:27:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-28 02:27:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

B/S 架構(gòu)軟件：Web APP開(kāi)發(fā)的技術(shù)框架和一體化解決方案：

1. 前言

1.1. 題記

本文將從下面三個(gè)方面對(duì)Web開(kāi)發(fā)技術(shù)進(jìn)行了梳理小結(jié)：

客戶端框架技術(shù)
服務(wù)端框架技術(shù)
Web應(yīng)用程序開(kāi)發(fā)的一體化解決方案。比如，低代碼開(kāi)發(fā)平臺(tái)：Wordpress，Outsystems

應(yīng)用程序開(kāi)發(fā)的發(fā)展有一個(gè)趨勢(shì)，C/S架構(gòu)的傳統(tǒng)桌面Apps正在和Web Apps融合。與 Electron（基于Web的桌面Apps的前端開(kāi)發(fā)框架） 結(jié)合，一些流行的Web前端框架例如 React、Angular、Vue ，可以用于開(kāi)發(fā)桌面Apps。

---

1.2. 知識(shí)產(chǎn)權(quán)和致謝

本文是對(duì)網(wǎng)絡(luò)資料的梳理和小結(jié)（詳情見(jiàn)參考資料），知識(shí)產(chǎn)權(quán)和其他相關(guān)權(quán)益歸資料著作者所有。特別感謝：

[1] 常用客戶端 Web 技術(shù) by Microsoft

2. 常見(jiàn)客戶端框架（技術(shù)）

Web Apps的客戶端技術(shù)涉及HTML、CSS 和 JavaScript：

HTML：頁(yè)面內(nèi)容
CSS：布局和樣式
JavaScript：行為

HTML 和 CSS 相對(duì)穩(wěn)定，但JavaScript正以驚人的速度發(fā)展。一般而言，Web開(kāi)發(fā)的客戶端框架指的是JavaScript框架技術(shù)（JavaScript Frameworks）。現(xiàn)代JavaScript框架的到來(lái)加快了打造高度動(dòng)態(tài)化和交互性強(qiáng)的應(yīng)用程序的速度。在 Web 應(yīng)用程序中使用 JavaScript 時(shí)，通常需要執(zhí)行以下幾項(xiàng)任務(wù)：

[1] 選擇 HTML 元素并檢索和/或更新其值。
[2] 查詢 Web API 以獲取數(shù)據(jù)。
[3] 向 Web API 發(fā)送命令（并使用其結(jié)果響應(yīng)回叫）。
[4] 執(zhí)行驗(yàn)證。

JavaScript 框架的發(fā)展簡(jiǎn)化了Web客戶端的開(kāi)發(fā)。 需要提到的是，jQuery是最成功的JavaScript庫(kù)，目前仍是簡(jiǎn)化客戶端開(kāi)發(fā)的熱門(mén)選擇，但它不是一個(gè)框架性的工具。

[1] 盡管 jQuery 基于古老的 JavaScript 框架標(biāo)準(zhǔn)，但它仍然是常用的庫(kù)，用于處理 HTML/CSS 和生成對(duì) Web API 進(jìn)行 AJAX 調(diào)用的應(yīng)用程序。 但是，jQuery 按瀏覽器文檔對(duì)象模型 (DOM) 級(jí)別操作，并默認(rèn)只提供命令性，而不是聲明性的模型。
[2] 本質(zhì)上，jQuery 缺少的大多數(shù)功能均可通過(guò)添加其他庫(kù)進(jìn)行添加。 但是，SPA 框架（如 Angular）以更集中的方式提供這些功能，因?yàn)樗鼜囊婚_(kāi)始設(shè)計(jì)的時(shí)候就考慮到了這一點(diǎn)。 此外，jQuery 是一種命令性庫(kù)，這意味著你需要調(diào)用 jQuery 函數(shù)才能使用 jQuery 執(zhí)行任何任務(wù)。 單頁(yè)應(yīng)用程序 (SPA) 框架提供的很多工作和功能都可以聲明的方式完成，無(wú)需編寫(xiě)任何實(shí)際代碼。

對(duì)于單頁(yè)應(yīng)用程序 (SPA)，jQuery 不會(huì)提供 Angular 和 React 提供的眾多所需功能。

---

常見(jiàn)的JavaScript 框架如下：

依據(jù)下面Number of stars on GitHub projects數(shù)據(jù)，可以看到React框架較為流行的。

2.1. Angular

Angular仍是世界上最常用的一種 JavaScript 框架。

從 Angular 2 開(kāi)始，團(tuán)隊(duì)徹底重建了框架（使用 TypeScript），并從最初的 AngularJS 名稱重新命名為 Angular。 經(jīng)過(guò)數(shù)年的發(fā)展，重新設(shè)計(jì)的 Angular 仍是用于生成單頁(yè)應(yīng)用程序的可靠框架。

Angular 應(yīng)用程序基于組件構(gòu)建。 組件通過(guò)特殊對(duì)象與 HTML 模板進(jìn)行組合，并控制頁(yè)面的一部分。 下面是 Angular 文檔中的簡(jiǎn)單組件。

2.2. React

與 Angular 不同，Angular 提供完整的模型 - 視圖 - 控制器模式實(shí)現(xiàn)，而 React 僅關(guān)注視圖。 它不是一個(gè)框架，只是一個(gè)庫(kù)，因此需要利用其他庫(kù)才能生成 SPA。 有許多庫(kù)旨在與 React 一起使用，以生成豐富的單頁(yè)應(yīng)用程序。

React 最重要的特征之一是使用虛擬 DOM。 虛擬 DOM 可向 React 提供多項(xiàng)好處，包括性能（虛擬 DOM 可優(yōu)化實(shí)際 DOM 的哪部分需要更新）和可測(cè)試性（無(wú)需使用瀏覽器即可測(cè)試 React 和它與虛擬 DOM 的交互）。

React 很少使用與 HTML 配合的方式。 React 直接在其 JavaScript 代碼中以 JSX 的形式添加 HTML，而沒(méi)有代碼和標(biāo)記（可能引用 HTML 屬性中出現(xiàn)的 JavaScript）之間的嚴(yán)格分離。 JSX 是類似 HTML 的語(yǔ)法，可向下編譯為純 JavaScript。

由于React 不是完整的框架，因此通常需要其他庫(kù)來(lái)處理路由、Web API 調(diào)用和依賴關(guān)系管理等任務(wù)。 好處是可為每個(gè)任務(wù)選擇最合適的庫(kù)，但壞處時(shí)需要進(jìn)行所有決策，并在完成后驗(yàn)證所有選定庫(kù)是否可以很好地協(xié)同工作。 如果想要一個(gè)好的開(kāi)端，可使用初學(xué)者工具包（如 React Slingshot）,它可使用 React 預(yù)先打包一組可兼容庫(kù)。

2.3. Vue

在其入門(mén)指南中，“Vue 是用于生成用戶界面的漸進(jìn)式框架。 與其他單一框架不同，Vue 旨在從頭開(kāi)始逐漸采用。 核心庫(kù)僅集中在視圖層，易于提取并與其他庫(kù)或現(xiàn)有項(xiàng)目集成。 另一方面，與新式工具和支持庫(kù)結(jié)合使用時(shí)，Vue 完全有能力為復(fù)雜的單頁(yè)應(yīng)用程序提供支持

2.4. Blazor WebAssembly

與其他 JavaScript 框架不同，Blazor WebAssembly 是單頁(yè)應(yīng)用 (SPA) 框架，用于使用 .NET 生成交互式客戶端 Web 應(yīng)用。 Blazor WebAssembly 使用無(wú)插件或?qū)⒋a重新編譯為其他語(yǔ)言的開(kāi)放式 Web 標(biāo)準(zhǔn)。 Blazor WebAssembly 適用于所有新式 Web 瀏覽器，包括移動(dòng)瀏覽器。

通過(guò) WebAssembly（縮寫(xiě)為 wasm），可在 Web 瀏覽器內(nèi)運(yùn)行 .NET 代碼。 WebAssembly 是針對(duì)快速下載和最大執(zhí)行速度優(yōu)化的壓縮字節(jié)碼格式。 WebAssembly 是開(kāi)放的 Web 標(biāo)準(zhǔn)，且支持無(wú)插件的 Web 瀏覽器。

WebAssembly 代碼可通過(guò) JavaScript（稱為 JavaScript 互操作性，通常簡(jiǎn)稱為 JavaScript 互操作或 JS 互操作）訪問(wèn)瀏覽器的完整功能 。 通過(guò)瀏覽器中的 WebAssembly 執(zhí)行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運(yùn)行，沙盒提供的保護(hù)可防御客戶端計(jì)算機(jī)上的惡意操作。

2.5. The best place to build, test, and discover front-end code

Attention Required! | Cloudflare

3. 常見(jiàn)服務(wù)端框架（技術(shù)）

沒(méi)什么可說(shuō)的，常見(jiàn)的就是：

PHP
Python/Django
Java

4. Web應(yīng)用程序開(kāi)發(fā)的一體化解決方案

從一體化的解決方案來(lái)看，Web開(kāi)發(fā)平臺(tái)似乎可以分為三類：

重代碼開(kāi)發(fā)平臺(tái)：Django，
低代碼開(kāi)發(fā)平臺(tái)：Outsystems, Servicenow
零代碼開(kāi)發(fā)平臺(tái)：PHP WordPress

4.1. Outsystems低代碼開(kāi)發(fā)平臺(tái)

Outsystems的時(shí)代特征

This is OutSystems - the most complete full-stack application development platform. Quickly create mobile and web applications, chatbots, and reactive web apps for any device. Build your data models, workflows, logic and pixel-perfect user interfaces and interactions, and even add your custom code.
OutSystems是快速應(yīng)用開(kāi)發(fā)的頭號(hào)低代碼平臺(tái)，并且是2018年Gartner高生產(chǎn)力平臺(tái)即服務(wù)魔力象限的領(lǐng)導(dǎo)者。OutSystems是將低代碼功能與高級(jí)移動(dòng)功能相結(jié)合的唯一解決方案，支持整個(gè)應(yīng)用程序組合的可視化開(kāi)發(fā)，可輕松與現(xiàn)有系統(tǒng)集成。

OutSystems成功案例 | 美敦力使用低代碼平臺(tái)提供心臟遠(yuǎn)程隨訪數(shù)字化服務(wù)

"我們希望選擇一個(gè)確保數(shù)據(jù)安全的平臺(tái)，使我們能夠迅速、便捷地開(kāi)發(fā)我們所需的功能，而這正是OutSystems所能提供的。" 由于OutSystems在數(shù)字醫(yī)療領(lǐng)域的實(shí)踐積累，和極為重要的內(nèi)置安全特性，成為了美敦力選擇的合作伙伴。

Application Development: Fast, Right and for the Future | OutSystems

https://www.servicenow.com/

5. 補(bǔ)充

5.1. CSS和CSS預(yù)處理器

CSS（級(jí)聯(lián)樣式表）

CSS用于控制 HTML 元素的外觀和布局。 CSS 樣式可直接應(yīng)用于 HTML 元素，單獨(dú)對(duì)相同頁(yè)面進(jìn)行定義，或在單獨(dú)文件中定義或由頁(yè)面引用。 樣式根據(jù)用于選擇給定 HTML 元素的方式進(jìn)行級(jí)聯(lián)。 例如，樣式可應(yīng)用于整個(gè)文檔，但會(huì)由應(yīng)用于特定元素的樣式覆蓋。 同樣，特定于元素的樣式會(huì)由應(yīng)用于 CSS 類的樣式（曾應(yīng)用于該元素）覆蓋，后者反過(guò)來(lái)會(huì)由指向該元素的特定實(shí)例（通過(guò)其 ID）的樣式覆蓋。

CSS 預(yù)處理器

CSS 樣式表缺少對(duì)條件邏輯、變量以及其他編程語(yǔ)言功能的支持。 因此，大型樣式表通常包含很多重復(fù)，如將相同的顏色、字體或其他設(shè)置應(yīng)用于 HTML 元素和 CSS 類的多個(gè)不同的變體。 通過(guò)添加對(duì)變量和邏輯的支持，CSS 預(yù)處理器可幫助樣式表遵循 DRY 原則。

最常用的 CSS 預(yù)處理器是 Sass 和 LESS。 兩者均可擴(kuò)展 CSS 并與其后向兼容，表示無(wú)格式 CSS 文件即為有效的 Sass 或 LESS 文件。 Sass 基于 Ruby，而 LESS 基于 JavaScript，二者通常作為本地部署過(guò)程的一部分運(yùn)行。 兩者都提供命令行工具，以及 Visual Studio 中的內(nèi)置支持，可使用 Gulp 或 Grunt 任務(wù)運(yùn)行它們。

6. 參考資料

[1] 學(xué)習(xí)Web開(kāi)發(fā)：客戶端和服務(wù)端框架 - 掘金

[2] 常用客戶端 Web 技術(shù)

[3] The Top JavaScript Frameworks For Front-End Development in 2020

[4] Angular vs React vs Vue: Which Framework to Choose in 2022

[5] ivx-ih5master：低代碼現(xiàn)狀：0代碼和低代碼的對(duì)比

[6] Outsystems - 搜索結(jié)果 - 本站

[7] 如何評(píng)價(jià)低代碼開(kāi)發(fā)平臺(tái)「OutSystems」獲 KKR 和高盛 3.6 億美元融資？

[8] See Our Leading Development Platform in Action

[9] https://www.outsystems.com/