昨天完成了從 Firebase 讀取待辦清單，但是 SideEffect 沒有完全地處理完

SideEffect 是什麼?

中文解釋是 副作用

在這個 TodoList 中 Side Effect 有

1. 讀取列表時，提示告訴使用者目前正在讀取
2. 當讀取失敗的時候要告訴使用者目前狀態
3. 當做任何當作(新增，刪除，更新)時應該要有狀態的顯示
4. 失敗或成功都要告知使用者

而目前的 TodoController 的狀況要做到其實要花滿大的工夫，而程式碼邏輯也會變得非常的不簡單

像是更新時要做到更新ing 的狀態可能就要做像這樣的程式碼

document.querySelector('#notification-loading').style.visibility = 'visible';

失敗時也許要加上(以下沒有實測，只是大致想一下情境)

HTML 的某處

<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

checkItem(index) {
  const item = this.data[index];
  TodoService.updateTodo(item.id, item).then((updatedItem) => {
    this.render();
  }, (error) => {
    // depends on which error type
    $('#error-modal').modal('show');
    $('#error-modal-title').text('更新失敗，請檢查網路連線問題');
  });
}

會發現程式碼寫得越來越大，而且 TodoList 只是個小小的功能而已，未來要擴充功能，只會越來越難加

而且感覺要在 Todo 加上 細項或 due date 我們的 template 也越來越難加

加個新功能 template 和 controller 要一起改，十分痛苦，也許是這樣的 MVC 設計得不夠好導致的結果

在 Day09的時候有提到目前改的效能會不好，因為每個操作都要重新繪製一遍 DOM List

但其實有很多 Framework 致力於解決開發者踩到的雷，持續地做到關注點分離，好維護的前端程式碼架構，和效能的問題，使得我們開發上不用去想那麼複雜的架構。

前端重要的事情就是將後端的資料做呈現，和讓使用者對資料做一些操作然後與後端做溝通

所以網頁上資料與頁面的綁定就變得十分重要，讓我們來看看有什麼模式在做資料綁定吧

MVVM

參考:

淺談MVVM架構

MVVM是Model-View-ViewModel的縮寫，透過將使用者介面(View)、商業邏輯(ViewModel)與資料(Model)分離的設計模式，達到降低介面設計與程式設計彼此的影響，進而使各別的開發人員能專注於本身的設計，並更加方便測試與整合。

1. View: 使用者介面區塊，介面設計人員只需要透過Expression Blend工具進行編輯，並利用Binding的方式與ViewModel進行溝通連結。
2. ViewModel: 商業邏輯區塊，程式設計人員可在此實作商業邏輯，並透過公開的屬性提供給View進行Binding使用。
3. Model: 資料區塊，用以描述資料實體的簡單類別，也可在此實作商業邏輯及資料庫存取相關功能。
   MVVM設計架構中，上層的物件可以向下存取，但是下層的物件並不會知道上層物件，透過此原則得以做到乾淨的分層與鬆散耦合。

Vue

Vue 是基於 MVVM 的設計架構上做的

1. Template 樣板(View)

<div id="app-todo">
    <input v-model="todoInput" >
    <button v-on:click="addTodo">新增</button>
  <ol>
    <todo-item
      v-for="item in list"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

2. Model data
3. 在 Vue 裡面設定好 data 或讀取資料做 data 設定

data: {
  todoInput: '',
  list: [
    { id: 0, text: '第一個' },
    { id: 1, text: '明天要吃什麼' },
    { id: 2, text: '想看雷低咖咖' }
  ]
}

3. ViewModel

將 model 和 view 做雙向綁定，只要資料變動 view 就會更動

View 被使用者改變，資料也會被改變

寫起來感覺輕便好寫

參考官方文件寫出的 TodoList

Angular

最新的 Angular 我不太熟悉，不過跟 Vue 一樣是可以很容易做到雙向資料流的綁定

Angular在呈現和資料中間，可以簡單建立雙向的資料綁定。一旦建立雙向綁定，使用者輸入，會由Angular自動傳到一個變數中，再自動讀到所有綁到它的內容，更新它。效果上就是立即的資料同步。在程式碼中修改變數，也會直接反應到呈現的外觀上。不僅內容可以雙向綁定，其他諸如類別、寬度、高度等等，都可以和變數與使用者的輸入，綁定起來。

結語

使用 Framework 可以幫做我們解決資料與呈現的處理，用的好可以讓我們事半功倍，但如果頁面沒有那麼多資料需要處理，也許簡易的模板和 scss 會比較適合

從 Vue 的 TodoList 程式碼可以簡易的發現之前寫 TodoList 的代碼又臭又長，而且非常難以維護，程式碼效能還不是最好

使用 Framework 輕鬆解決了關注點分離，渲染效能(需要才對 DOM 做更新)，開發者也就很容易專心開發功能上的事情了！