如何運用TodoMVC 架構將後端寫到前端的？
就以生活中大家都使用的LINE通訊軟體為例。
Line 裡面有不同的主題呈現套件、有社群討論區、有LINE PAY功能、有LINE Today 新聞區…等等。
然後你當使用不同的功能來設定按照它的指示操作後，即可呈現出你想要的效果，這樣就有每個人不同訂製化呈現出的LINE APP。
TodoMVC 就像是一個 Line APP。
這是一個知名的開源專案，我們可以透過熟悉 Vue.js 、React 的基本語法、web component 的基本概念，並且熟悉 Vue.js 、React 的專案開發流程，從 CodePen 的環境過渡到本地開發環境。
TodoMVC 可以在用各種框架實現TodoList的增、刪、改、查功能，麻雀雖小，五臟俱全，是提供給大家學習、練習、再學習的最好範本。
我們先來了解何謂 「MVC架構」🦉 Model：後端資料庫進行運作
View：前端畫面與邏輯顯示
Controller：處理控制流程和回應，以路由以傳遞資料為主`模型檢視控制器 (Model-View-Controller，MVC)， 這三個套用在 Web 分別為前端 HTML+CSS(View)，後端 API 資料庫(Model)，控制後端資料庫的接口 JavaScript (Controller)
模型檢視控制器 (Model-View-Controller，MVC)， 這三個套用在 Web 分別為前端 HTML+CSS(View)，後端 API 資料庫(Model)，控制後端資料庫的接口 JavaScript (Controller)MVC 是許多開發人員熟悉的標準設計模式。有些類型的 Web 應用程式將受益於 MVC 架構。 有些則繼續使用仰賴 Web Form 和回傳的傳統 ASP.NET 應用程式模式。 還有一些類型的 Web 應用程式將合併兩種方式；兩種方式並不互斥。
模型(Model) — 邏輯層
Model 主要管理與資料邏輯有關的事項，若使用者想要對資料進行「新增、修改、刪除、瀏覽」的動作，都需要透過 Model 中的 JavaScript 來操作，如電商網站的免運費、計算訂單總額…等等。
****模型物件是實作應用程式資料欄邏輯的應用程式部分。 通常，模型物件會擷取和儲存資料庫中的模型狀態。
例如：Product 物件可能會從資料庫擷取資訊、操作它，然後將更新的資訊寫回SQL Server中的 Products 資料表。
在小型應用程式中，模型通常是概念上的分隔而不是實體分隔。
例如，如果應用程式唯讀取資料集並將它傳送至檢視，則應用程式沒有實體模型層和相關聯的類別。 在此情況下，資料集會採用模型物件的角色。介面檢視(View) — 表現層
View 主要管理第一線與使用者互動的介面，也就是 HTML 樣板，若是動態網站，他則會依照 Model 取出的資料內容，動態呈現使用者需要的網頁內容。
****View是顯示應用程式使用者介面的元件， (UI) 。 通常此 UI 是從模型資料建立。
例如，Products 資料表的編輯檢視會根據 Products 物件的目前狀態顯示文字方塊、下拉式清單和核取方塊。事件控制器(Controller) — 事件層
Controller 是整個運作過程中的核心，掌握與瀏覽器之間的互動行為，也負責收發 Request 與 Response，因此，通常會在 Controller 設置不同的事件 Event，進而觸發不同指令完成後續動作。
****可以處理使用者互動、使用模型並且在最後選擇可以轉譯要顯示 UI的檢視。在 MVC 應用程式中，檢視只會顯示資訊，而控制器則會處理及回應使用者輸入和互動。
例如：控制器會處理查詢字串值，並將這些值傳遞至模型，接著會使用值來查詢資料庫。當 Controller 收到請求後，Controller 會通知 Model 調度資料，接著再把資料傳遞給 View 來產生樣板，最終將呈現資料的 HTML 頁面回傳到客戶端的瀏覽器。
MVC 模式可幫助您建立分隔應用程式不同方面 (輸入邏輯、商務邏輯和 UI 邏輯) 的應用程式，同時在這些項目之間提供鬆散的結合。
此模式會指定每一種邏輯必須出現在應用程式中的位置。 UI 邏輯位於檢視，輸入邏輯位於控制器， 商務邏輯則位於模型。 此分隔可幫助您在建置應用程式時管理複雜性，因為它可讓您一次專注於實作的一個方面。
例如，您可以專注在檢視上，而不需倚賴商務邏輯。💁🏻
邏輯小測驗:1.MVC與 API差異？
Ans: MVC是個架構，之下可透過RESTful API 進行資料存取、方便管理路由及API
2. React 是 MVC架構嗎？
Ans: React 應該是只有V，因為到資料庫存取資料仍是透過node.js。
3. 但是加入了 Redux 應該也可以算是 MVC 架構？
Ans: React扮演的是View的角色，Redux 則是Controller，至於Model就是Redux Store中儲存的State。
4. node.js express 框架比較符合 MVC？
Ans: Client透過路由發送請求controller，路由到資料庫拿資料model，將資料output 到views ejs 樣板選染畫面給client。
🦔
參考資料**以前的工程師是如何使用MVC架構完成進行全端開發的?**使用 Express.js 框架進行全端開發，也就是運用 MVC 架構，一口氣從後端寫到前端，用這樣的方式完成了一個又一個的 app。
然而，在實際開發的場景，愈來愈不太可能看見一個人打全場，或一個工具套全部的狀況，後端工程師、前端工程師、甚至 UI 設計師會共同合作完成產品，視專案的規模，說不定還會把資料庫與 API 分拆成不同的團隊處理。
這件事被稱為「前後分離 (separate frontend from backend)」，在解釋前後分離的概念之前，我們先簡單回顧一下「前端」的發展簡史，才能瞭解「前端框架」是在什麼樣的背景下產生的。
該如何使用TodoMVC架構來進行全端開發呢?什麼是TodoMVC ?TodoMVC 是一個協助網頁應用程式開發者挑選 MVC 架構工具，透過範例程式讓你可以很快的比較各種架構之間實質上的差異所在。
拜網路雲端化的趨勢所賜，全世界有非常多的開發者陸續發展出非常多適用於網頁應用程式的 MVC
架構（framework），其中更有許多優質的開放原始碼架構，無論是功能性與穩定性都非常好，網頁開發者可以利用這些豐富又免費的資源開發各種應用程式，省去自己設計架構的精力與時間。**TodoMVC 網站**但是由於這樣的 MVC 架構實作品實在太多了，如何從中挑選一個適合自己的架構，又是一個令人頭痛的問題，有時後光去蒐集這類的資訊就已經很費時了，更何況還要消化它們。
TodoMVC 將各種常見的網頁 MVC 架構整理出來，並且使用每一個架構實作一個 Todo List 示範程式，開發者可以從這些示範程式的原始碼很快的（應該說比起自己看各種官方網站要快一些）看出每個 MVC 架構的特性與差異，幫助開發者選擇適合自己專案的架構。
如果以一個網頁應用程式的開發者的角度，強烈建議一定要參考一下這個網站，你可能聽過 Backbone.js、AngularJS 與 Ember.js，但是你可能不知道類似的架構常見的就有數十種，如果你要的東西別人已經寫好了，直接拿來用是可以輕鬆很多的。
TodoMVC 將各種架構區分為 JavaScript Apps、Compile To JavaScript、MVC Extension Frameworks、Module Loaders 與 Real-time 這幾類，對於有興趣的架構你可以直接動手修改 GitHub 上的原始碼，感覺一下架構是如何運作的，我想這是一般的開發者在學習一個新技術時常會做的事情。
另外 TodoMVC 也蒐集了每一種架構的一些網路資源（例如官方文件、社群的教學文件與討論區等），方便開發者查閱，使用起來很方便。
💁🏻 **主要學習的目的：
快速認識基本語法
理解在框架裡寫前端，與過去的方式有何不同理解「網站組件化」的概念
透過 Vue Component 或 React 實作來理解組件之間如何傳遞資料，以及傳遞資料時會涉及哪些議題實作一個 SPA 網站
在本機建立開發環境
建立 Component 並設定網站邏輯
體驗開發與 debug 的流程
處理 Routing 和 Model 的對應串接後端 API
體驗什麼是前後分離**🦔
**參考資料**