Angular 16+ 高级教程 – Angular 和其它技术方案的比较

前言

上一篇我有提到 Angular 适合用于哪些项目，但讲的太含糊，什么大中小项目的...这篇我将更具体的去讲解，Angular 的定位，还有它和其它方案的优缺点。

Web 技术可以用来做许许多多不同种类的项目。这里我抽出 4 种最常见的，并且拿几种不同的方案来看看各自的优缺点。

 

企业网站

企业网站相对其它类型是最简单也是最早的 Web 技术应用。

它的主要功能是呈现企业的信息，如：产品、服务、公司规模、人员等等，访客如果对企业有兴趣，就填表格提交，等待企业回复，very simple，没有复杂的交互。

虽然简单，但如果我们只是单纯使用 HTML、CSS、JS，那可不一定能完成所有的功能，而且即便可以完成大部分功能，代码也不容易维护。

技术难题和解决方案

难题一：Duplicated HTML

比如，我们要显示企业的所有分行信息。它是一个 list + card 的设计。这时我们会发现每一张 card 的 HTML 都是重复的。只有中间的一些信息不同而已。

这就是 duplicated HTML。解决方案就是使用 template engine. 比如 ASP.NECT Core 的 Razor Pages

难题二：Duplicated Page

/products/product-a.html

/products/product-b.html

a 和 b 产品设计都是一样的，只是图片，名字，价钱不同而已。这就叫 duplicate page.

解决方案就是使用 router。比如 ASP.NECT Core 的 Razor Pages

难题三：数据库

template engine 不仅解决了 duplicated HTML 问题，它也顺带把设计和数据分开了。这对管理是加分了。

我们再进一步思考，是否要把数据和代码也分开管理呢？显然这也是加分的。解决方案是 SQL Server + EF Core

难题四：Handle HTTP POST

表单提交的解决方案是 ASP.NET Core Web API

难题五：游览器兼容和不友好的 DOM API 

这个是以前的问题，目前的游览器已经没有太多兼容问题了，而且 DOM API 也完善了很多。以前的解决方案是用 jQuery.

难题六：交互功能

企业网站主要功能是游览，由于信息多，空间少，所以在设计上会先做一些隐藏，然后通过交互来呈现。

比如：Slideshow、Modal Images。这些插件一般都是用 vanilla JS 来完成。

其它解决方案

Template Engine – ASP.NET Core Razor Pages

Router – ASP.NET Core Razor Pages

Database – SQL Server + EF Core

HTTP Post – ASP.NET Core Web API

交互体验 – Vanilla JS

除了 Vanilla JS 以外，其余的都是后端技术。ASP.NET Core 只是其中一种，你可以把它换成 PHP, Java 等等其它语言框架，其解决方式都大同小异。

这套方案我们给它个名字叫 backend + frontend 

它的优点是，职责分配的好。缺点是双语言。一个开发人员要掌握 2 套技术会有点吃力。

所以近年来，随着 Node.js 越来越普及。出现了单语言方案。我们可以叫它 frontend + frontend.

Template Engine – React

Router – Next.js

Database – MySql + Prisma

HTTP Post –  Express.js

交互体验 – React

这个技术方案的特点有 2 个，第一个是单语言，第二个是用 React 写交互体验会比 Vaniila JS 更好开发和管理。

我目前没有看到这个方案有哪些缺陷，可能唯一的缺陷是还不够成熟，正真用起来可能会发现还不如 ASP.NET Core 和 PHP 开发体验好。

虽然方案是好，但是我觉得针对企业网站领域很难有市场。因为企业网站更多的是用 Web Builder (Webflow、WordPress) 来开发的。除非有人先做一个基于 React + Next.js 的 Web Builder。

 

后台管理系统

上面我们提到，数据和代码是分离的，这也意味着我们可以在不修改代码的情况下修改网站内容，比如产品的价格。

直接修改数据库对程序员来说很容易，但这个难度太小，所以更好的方式是再往前一步，做一个网站内容管理系统 (CMS)，这样普通员工就可以修改网站内容了。

若我们依然采用 backend + frontend 方案来实现这个系统，我们会遇到一个问题。

难题一：动态 HTML 内容

管理系统有一个常见的交互体验 – 添加数据。用户填写表格，提交，页面的内容发生变化。

在 backend + fronend 方案中，template engine 是由 backend 技术实现的，这意味着当用户添加新数据后，要嘛 reload page 让后端重新渲染新页面，要嘛通过 Web API 返回局部的 HTML，前端用 DOM API 做插入修改页面。

这两个方案都有缺陷，reload page 体验差，ajax + response HTML + append 代码繁琐。

解决方案

既然问题出在渲染，那就把渲染让前端负责呗。Angular、React 都可以替代后端的 template engine 技术。

另外 Angular 也可以替代后端的 Router 技术。

至此后端技术就只负责 Web API 输出数据就好。其它的都让前端负责。

这个就是经典的前后端分离方案。Angular 就超级适合这个方案。你看看 Gmail、Google Ads、Google Analytics、Google Cloud Console 等等，

哪一个不是这类的管理系统？

这套方案有 3 个弱点

1. 双语言。这个是老问题了。

如果想单语言，也可以考虑 Blazor。

2. SEO 差。因为把渲染搬到前端负责了，而有些爬虫是不运行 JS 的。

但巧的是，管理系统不需要 SEO，所以无感。

3. 首屏渲染慢，也是因为渲染搬到前端的关系，首屏渲染变慢了。不过巧的是，管理页面一般不关心首屏渲染速度。

难题二：JS 多了需要被管理

我们加重前端的职责，可能导致 JS 变得复杂。这时就需要引入 TypeScript、Sass、Webpack 等等工具。幸好 Angular 已经 build-in 了。

如果用 React 则需要在社区找到对应的方案。

总结

管理页面目前是 Angular 的最佳使用场景。Google 自己也是这样用的。

 

电子商务网站

企业网站做大以后通常会晋升成为电子商务网站。不管是卖产品，还是预约服务，都可以称为电子商务。

电商网站比起企业网站多了一些交互，比如 add to cart。

不要小看这一个 add to cart。它可是动态 HTML 内容哦。也就是说，我们会遇到和管理页面一样的难题。

那我们可以用同样的前后端分离方案来解决吗？Angular + Web API？

很遗憾，上面我们提到了这个方案有几个弱点。

1. SEO 问题，要解决这个问题就必须在服务端渲染。哪怕你用的是前端技术做 template engine。

ASP.NET Core 可以启动 Node.js 并且使用 Angular server side render 来完成这个任务。只是这个方案不是很热门。所以正真操作时很可能会遇到很多鬼问题。

2. 首屏渲染慢，Angular 也有一些技术是针对首屏渲染的。

显然，目前 Angular 用于电商还不是很稳定。可能 React + Next.js 会更理想。但是不管怎么样，我觉得大部分电子商务网站并没有那么复杂。

我们可以退回到企业网站 backend + frontend 的方法。它的缺陷只是在 ajax + response HTML + append 代码非常烂而已，只要不要太多那么还是可以接受的。

 

应用程序

比如 e-learning system，老师学生线上教课。学习做题等等。这样的系统就是应用程序。

显然它比电子商务复杂 (交互多)，比管理系统稍微简单一些。这类项目也蛮适合前后端分离方案。

同样的，它们对 SEO 和 首屏渲染速度不那么重要。

 

总结

我的选择

企业网站

我个人觉得用 ASP.NET Core + JS 就够了. 

你可以配上 Webpack / Vite、TypeScript、Sass、RxJS 等等相关技术。但核心就是让后端技术负责 template engine。

如果要单语言，可以考虑 React + Next.js

后台管理系统

Angular 的最佳战场，如果要单语言则可以考虑 Blazor。

电子商务网站

我个人会选择 React + Next.js 方案，或者 ASP.NET Core + JS。其次才会考虑 Blazor 或 Angular。

应用程序

我个人会选 React + React Native，大于 Angular + Native Script，最后是 Blazor。

我的感想

上面几种类型的项目，笼统的看都是交互页面。只是大家注重的点不一样。而且很多技术其实是重叠的，

它们只是语言不一样，实现手法不一样而已。

每个技术都想占领市场，都想让更多开发者使用。

像 Blazor 想吃 Angular / React 管理系统的蛋糕，React 结合 Next.js 想吃 ASP.NET Core / PHP 企业网站的蛋糕。

React Native / Angular Native Script 想吃 IOS / Android 的蛋糕。

Angular server side render 想吃电商网站的蛋糕。

每种技术的起点都不一样，但都慢慢去吃其它人的蛋糕。对于只会 C# 的人来说，Blazor 是个好东西。因为随着它的成长你的能力也在提升。

但对于会 C# 也会 JS 的人来说。用 C# 去搞 JS 的东西反而会让 C# 变得很奇怪。倒不如分开 2 种技术去实现。

同样的，IOS 和 Android 本来是 2 套技术，但为了让开发者少学一点，搞出了 Flutter，Native Script，Ionic。

这到底是好还是不好呢？我也说不上。