B/S 架构软件：Web APP开发的技术框架和一体化解决方案

时间：2023-05-28 02:27:02 | 来源：网站运营

时间：2023-05-28 02:27:02 来源：网站运营

B/S 架构软件：Web APP开发的技术框架和一体化解决方案：

1. 前言

1.1. 题记

本文将从下面三个方面对Web开发技术进行了梳理小结：

客户端框架技术
服务端框架技术
Web应用程序开发的一体化解决方案。比如，低代码开发平台：Wordpress，Outsystems

应用程序开发的发展有一个趋势，C/S架构的传统桌面Apps正在和Web Apps融合。与 Electron（基于Web的桌面Apps的前端开发框架） 结合，一些流行的Web前端框架例如 React、Angular、Vue ，可以用于开发桌面Apps。

---

1.2. 知识产权和致谢

本文是对网络资料的梳理和小结（详情见参考资料），知识产权和其他相关权益归资料著作者所有。特别感谢：

[1] 常用客户端 Web 技术 by Microsoft

2. 常见客户端框架（技术）

Web Apps的客户端技术涉及HTML、CSS 和 JavaScript：

HTML：页面内容
CSS：布局和样式
JavaScript：行为

HTML 和 CSS 相对稳定，但JavaScript正以惊人的速度发展。一般而言，Web开发的客户端框架指的是JavaScript框架技术（JavaScript Frameworks）。现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度。在 Web 应用程序中使用 JavaScript 时，通常需要执行以下几项任务：

[1] 选择 HTML 元素并检索和/或更新其值。
[2] 查询 Web API 以获取数据。
[3] 向 Web API 发送命令（并使用其结果响应回叫）。
[4] 执行验证。

JavaScript 框架的发展简化了Web客户端的开发。 需要提到的是，jQuery是最成功的JavaScript库，目前仍是简化客户端开发的热门选择，但它不是一个框架性的工具。

[1] 尽管 jQuery 基于古老的 JavaScript 框架标准，但它仍然是常用的库，用于处理 HTML/CSS 和生成对 Web API 进行 AJAX 调用的应用程序。 但是，jQuery 按浏览器文档对象模型 (DOM) 级别操作，并默认只提供命令性，而不是声明性的模型。
[2] 本质上，jQuery 缺少的大多数功能均可通过添加其他库进行添加。 但是，SPA 框架（如 Angular）以更集中的方式提供这些功能，因为它从一开始设计的时候就考虑到了这一点。 此外，jQuery 是一种命令性库，这意味着你需要调用 jQuery 函数才能使用 jQuery 执行任何任务。 单页应用程序 (SPA) 框架提供的很多工作和功能都可以声明的方式完成，无需编写任何实际代码。

对于单页应用程序 (SPA)，jQuery 不会提供 Angular 和 React 提供的众多所需功能。

---

常见的JavaScript 框架如下：

依据下面Number of stars on GitHub projects数据，可以看到React框架较为流行的。

2.1. Angular

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

从 Angular 2 开始，团队彻底重建了框架（使用 TypeScript），并从最初的 AngularJS 名称重新命名为 Angular。 经过数年的发展，重新设计的 Angular 仍是用于生成单页应用程序的可靠框架。

Angular 应用程序基于组件构建。 组件通过特殊对象与 HTML 模板进行组合，并控制页面的一部分。 下面是 Angular 文档中的简单组件。

2.2. React

与 Angular 不同，Angular 提供完整的模型 - 视图 - 控制器模式实现，而 React 仅关注视图。 它不是一个框架，只是一个库，因此需要利用其他库才能生成 SPA。 有许多库旨在与 React 一起使用，以生成丰富的单页应用程序。

React 最重要的特征之一是使用虚拟 DOM。 虚拟 DOM 可向 React 提供多项好处，包括性能（虚拟 DOM 可优化实际 DOM 的哪部分需要更新）和可测试性（无需使用浏览器即可测试 React 和它与虚拟 DOM 的交互）。

React 很少使用与 HTML 配合的方式。 React 直接在其 JavaScript 代码中以 JSX 的形式添加 HTML，而没有代码和标记（可能引用 HTML 属性中出现的 JavaScript）之间的严格分离。 JSX 是类似 HTML 的语法，可向下编译为纯 JavaScript。

由于React 不是完整的框架，因此通常需要其他库来处理路由、Web API 调用和依赖关系管理等任务。 好处是可为每个任务选择最合适的库，但坏处时需要进行所有决策，并在完成后验证所有选定库是否可以很好地协同工作。 如果想要一个好的开端，可使用初学者工具包（如 React Slingshot）,它可使用 React 预先打包一组可兼容库。

2.3. Vue

在其入门指南中，“Vue 是用于生成用户界面的渐进式框架。 与其他单一框架不同，Vue 旨在从头开始逐渐采用。 核心库仅集中在视图层，易于提取并与其他库或现有项目集成。 另一方面，与新式工具和支持库结合使用时，Vue 完全有能力为复杂的单页应用程序提供支持

2.4. Blazor WebAssembly

与其他 JavaScript 框架不同，Blazor WebAssembly 是单页应用 (SPA) 框架，用于使用 .NET 生成交互式客户端 Web 应用。 Blazor WebAssembly 使用无插件或将代码重新编译为其他语言的开放式 Web 标准。 Blazor WebAssembly 适用于所有新式 Web 浏览器，包括移动浏览器。

通过 WebAssembly（缩写为 wasm），可在 Web 浏览器内运行 .NET 代码。 WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。 WebAssembly 是开放的 Web 标准，且支持无插件的 Web 浏览器。

WebAssembly 代码可通过 JavaScript（称为 JavaScript 互操作性，通常简称为 JavaScript 互操作或 JS 互操作）访问浏览器的完整功能 。 通过浏览器中的 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行，沙盒提供的保护可防御客户端计算机上的恶意操作。

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

Attention Required! | Cloudflare

3. 常见服务端框架（技术）

没什么可说的，常见的就是：

PHP
Python/Django
Java

4. Web应用程序开发的一体化解决方案

从一体化的解决方案来看，Web开发平台似乎可以分为三类：

重代码开发平台：Django，
低代码开发平台：Outsystems, Servicenow
零代码开发平台：PHP WordPress

4.1. Outsystems低代码开发平台

Outsystems的时代特征

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是快速应用开发的头号低代码平台，并且是2018年Gartner高生产力平台即服务魔力象限的领导者。OutSystems是将低代码功能与高级移动功能相结合的唯一解决方案，支持整个应用程序组合的可视化开发，可轻松与现有系统集成。

OutSystems成功案例 | 美敦力使用低代码平台提供心脏远程随访数字化服务

"我们希望选择一个确保数据安全的平台，使我们能够迅速、便捷地开发我们所需的功能，而这正是OutSystems所能提供的。" 由于OutSystems在数字医疗领域的实践积累，和极为重要的内置安全特性，成为了美敦力选择的合作伙伴。

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

https://www.servicenow.com/

5. 补充

5.1. CSS和CSS预处理器

CSS（级联样式表）

CSS用于控制 HTML 元素的外观和布局。 CSS 样式可直接应用于 HTML 元素，单独对相同页面进行定义，或在单独文件中定义或由页面引用。 样式根据用于选择给定 HTML 元素的方式进行级联。 例如，样式可应用于整个文档，但会由应用于特定元素的样式覆盖。 同样，特定于元素的样式会由应用于 CSS 类的样式（曾应用于该元素）覆盖，后者反过来会由指向该元素的特定实例（通过其 ID）的样式覆盖。

CSS 预处理器

CSS 样式表缺少对条件逻辑、变量以及其他编程语言功能的支持。 因此，大型样式表通常包含很多重复，如将相同的颜色、字体或其他设置应用于 HTML 元素和 CSS 类的多个不同的变体。 通过添加对变量和逻辑的支持，CSS 预处理器可帮助样式表遵循 DRY 原则。

最常用的 CSS 预处理器是 Sass 和 LESS。 两者均可扩展 CSS 并与其后向兼容，表示无格式 CSS 文件即为有效的 Sass 或 LESS 文件。 Sass 基于 Ruby，而 LESS 基于 JavaScript，二者通常作为本地部署过程的一部分运行。 两者都提供命令行工具，以及 Visual Studio 中的内置支持，可使用 Gulp 或 Grunt 任务运行它们。

6. 参考资料

[1] 学习Web开发：客户端和服务端框架 - 掘金

[2] 常用客户端 Web 技术

[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：低代码现状：0代码和低代码的对比

[6] Outsystems - 搜索结果 - 本站

[7] 如何评价低代码开发平台「OutSystems」获 KKR 和高盛 3.6 亿美元融资？

[8] See Our Leading Development Platform in Action

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