[筆記] React vs Angular 大方向的差異

工作業務所需要學習 AngularJS，雖然使用上能依樣畫葫蘆，但對 React 使用者來說還是非常嶄新的概念，僅以筆記系列慢慢紀錄學習心得。

根本性的差異

React 是一套以建構 UI component 為目標的 JS library，Angular 是一套發展完整的 JS framework。library 與 framework 的差異在於：
當你呼叫 library 中的方法時，你是控制者，但使用 framework 的時候情況是反過來的，是 framework 在呼叫你。
framework 定義出一套 skeleton 讓 APP 去定義自己的功能，來填滿這個框架，使用者不需要太擔心其中的設計。framework 中通常包含著許多 libraries。framework 會提供一般性的功能，然後讓使用者按照自己的需求做調整。
library 是由其他開發者寫出來的一系列的內容，讓你在建立專案的時候可以使用，使用 library 的原因通常是為了良好的複用性。
因為這個根本性的差異，React 與 Angular 的有不同的特性，適合場景也不同。

自給自足的程度

React App 需要額外的 libraries。例如 data binding、component-based routing, project generation, form validation, or dependency injection 都需要另外引入，但在 Angular 裡是內建的。

效能

React 因為 virtual DOM 的設計而擁有良好效能，virtual DOM 本身輕巧，並且是被建構在 server 上的，可以減少瀏覽器的 loading。Angular 在複雜、動態的網頁情境下，效能不好。原因是雙向的 data-binding 設計（bidirectional），每一個 binding 都被指派一個 watcher 去監測改變是否有發生，造成整個流程變得笨重，Angular 更新中有不斷的針對效能調整，所以也許未來是可以期待的。

程式架構

React 的架構可以由開發者自由選擇，也因此設計一個好的 app 架構會墊高一開始進入專案的難度與時間。React 本身只提供 View 層，model 與 controller 需要額外使用 libraries。React APP 的架構是以元件為主，可以用兩個方式 functional & class-base 去創建。
Angular 架構是固定且複雜的， based on MVC 架構，負責 model 的物件會被 Controller 初始化，然後使用 View 來呈現。APP 是不同的 Angular components 的集合，各自寫成不同的檔案，TypeScript 用來 implement component、HTML 來定義 view、CSS 來定義樣式、以及為了測試用的檔案。這些檔案之間的連結會寫在 app directive 當中，directive 中可以看出整個 app 的結構邏輯。