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程序時，可以參考以下幾點：
- 你的團隊是否熟悉這個框架和它的依賴（在某些情況下包括TypeScript）？
- 框架的可修改性有多大，你是否認同框架對一件事情的默認處理方式？
- 是否包括了你程序需要的所有特性？
- 相關文檔是否詳細？
- 社區活躍度如何？
- 框架的核心團隊活躍度如何？能否正常發佈版本和處理issue。