《Architecting Modern Web Apps with ASP.NET Core2 and Azure》六

Common Client-Side Web Technologies

Websites should look good from the inside and out-------Paul Cookson

Summary

ASP.NET或其它Web应用程序一般都依赖于客户侧（client-side）的网络技术，比如HTML、CSS、JavaScript。利用关注点分离原则可以将一个复杂的网页内容分为样式和布局（CSS）和行为（JavaScript）。将来架构、设计、行为需要扩展时就会很方便，只要这几个关注点没有相互交织在一起。

然而HMTL和CSS是相对稳定的，Js取决于开发应用时所使用的框架和工具集，而且Js现在正以惊人的速度发展。这篇文章对于Augular和React提供了一个高级版的概述。

CSS Preprocessors（CSS预处理器）

css样式因为缺乏条件逻辑、变量等其它编程语言所具有的特性，在实际使用过程中会有很多颜色、字体等的重复定义。css预处理器可以解决这个问题。

最流行的预处理器是Sass和LESS，这两个都扩展自CSS并且向后兼容，意味着一个css文件也属于是合法的Sass或LESS文件。Sass基于Buby而LESS基于JavaScript，这两者都只存在于你本地的开发过程，在Visual Studio中可以使用Gulp或Grunt。

Legacy Web Apps with jQuery(基于jQuery的传统web应用程序)

虽然jQuery是一种古老的js框架标准，但是至今仍在被广泛的使用，用来与HTML/CSS协同工作和进行AJAX请求。jQuery的操作属于浏览器的DOM层，默认只提供了命令模型而不是声明模型。

例如，当输入框的值大于10时，页面上的一个元素应该被显示出来。如果使用jQuery，一般的做法就是创建一个event handler用来监测这个输入框，当值大于10时就显示那个元素，这就是命令模型。而其它的框架可能就是采用声明绑定的方法，将元素的可见性绑定到输入框的值上。这种方式不需要编写代码，但是需要在涉及到绑定操作的元素上增加额外的属性。随着客户侧行为变得越来越复杂，数据绑定的方法可以降低代码量和条件的复杂性。

jQuery和SPA框架的对比

特性	jQuery	Angular
抽象DOM	Y	Y
AJAX	Y	Y
声明式数据绑定	N	Y
MVC	N	Y
模板	N	Y
深层链接路由	N	Y

虽然jQuery的缺失的大多数特性可以通过添加其它的库来实现，但是像Angular这样的SPA框架以更全面的方式提供了这些功能，因为在设计之初就已经考虑到了这些。而且jQuery是一种非常具有命令性的库，这就意味着你让jQuery做一件事之前必须先要调用jQuery的方法。SAP框架可以通过声明完成许多工作和功能，而不需要编写任何实际的代码。

数据绑定就是一个很好的例子。在jQuery中，经常需要写一行代码来获取或设置DOM元素的值。而且在需要改变元素值的地方你都要这么写，修改元素可见性也是类似。如果使用数据绑定的话，你不需要编写任何代码。你只需要把元素的value或者visibility绑定到对应的viewModel上即可，更改viewModel时会自动更改value和visibility。

Angular SPAs

AngularJS很快成为了世界上最流行的JavaScript框架之一。从Angular2开始，团队用TypeScript重新设计了框架并将AngularJS重命名为了Angular。Angular应用程序是由组件（Componoents）构成的。组件将HTML模板和特殊的对象结合在一起来控制页面的显示内容。下面是一个简单的组件：

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

组件通过@Component的声明来定义，接收来自组件的元数据。selector属性标识了页面上这个元素的id，template属性就是简单的HTML，包括占位符和占位符内绑定的name属性，该属性的值最后一行有定义。

组件和模板的这么一结合，使得Angular相比于jQuery等传统框架，能够工作在更高层次的抽象级别和总体更少的代码。可以参考微软官方的例子，eShopOnContainers。

React

与Angular实现了完成MVC模式不同，React只关心view。它更像一个库而不是框架，所以在构建SPA程序的时候，你可能还需要引入其他的库。

React最重要的一个特性是使用了虚拟DOM。虚拟DOM有一些性能（可以优化实际DOM上的哪一部分进行更新）和测试（不需要使用浏览器测试）上的优势。

与严格的区分代码（code）和标记（markup）不同，React直接在JavaScript里添加HTML代码，这种被成为JSX。JSX语法类似于HTML，可以直接编译为纯粹的JavaScript。比如：

<ul>
{ authors.map(author =>
<li key={author.id}>{author.name}</li>
)}
</ul>

如果你之前熟悉JavaScript的话，学习React会比较简单。它不像Angular等其它框架一样有那么高的学习曲线。

因为React不是完整的框架，所以如果你需要处理路由、调用web API、依赖管理的话可能要再引入其它的library。好处是你可以为这些功能选择最好的或最合适的库，但是你也要确保这些库结合使用之后不能有太大的问题。如果你想有一个好的开始的话，可以参考React Slingshot。

Choosing a SPA Framework（选择一个SPA框架）

当考虑哪一个JavaScript框架能够更好的支撑你的SPA程序时，可以参考以下几点：

1. 你的团队是否熟悉这个框架和它的依赖（在某些情况下包括TypeScript）？
2. 框架的可修改性有多大，你是否认同框架对一件事情的默认处理方式？
3. 是否包括了你程序需要的所有特性？
4. 相关文档是否详细？
5. 社区活跃度如何？
6. 框架的核心团队活跃度如何？能否正常发布版本和处理issue。