Xamarin Forms 之 MVVMCross vs. Prism 對抗戰

講解MVVM歷史演進歷程，比較兩種MVVM框架：MVVMCross & Prism for Xamarin Forms的差異。

Transcript

1. XAMARIN.FORMS 之 對抗戰 搞懂MMVM其實不難
2. Xamarin Forms流行的兩大MVVM框架：MvvmCross & Prism MvvmCross  https://www.mvvmcross.com/  由第三方熱心開源人士在開發一個交流Xbox遊 戲”Kinect for Star Wars”社群資訊的跨平台手機 app而起，為了解決跨平台UI程式碼共用。  最新版v5.7，還沒支援 .NET Standard 2.0  可不套用Xamarin Forms，直接在Xamarin iOS/Android/MacOS專案上使用。  Visual StudioTemplate擴充套件還沒配合最新版。 Prism for Xamarin Forms  https://github.com/PrismLibrary/Prism  由Microsoft Pattern & Practice Library中的Prism guidelines演變而生，最早是為了開發架構良好一 擴充功能的Desktop環境應用程式(WPF)。  最新版v7.0，已支援 .NET Standard 2.0  Data-Binding使用Xamarin Forms的XAML data- binding技術，因此必須使用Xamarin Forms專案。  Visual Studio Template擴充套件支援良好。
3. 等等，啥是”MVVM”(MODEL-VIEW-VIEWMODEL)？  一種UI設計模式： https://en.wikipedia.org/wiki/Model–view– viewmodel  最早為了配合XAML的Data-binding功能而提出： https://msdn.microsoft.com/en- us/library/hh848246.aspx  後來一些支援雙向Data-binding的前端網頁開發 框架也有採用(ex: AngularJs) 。 From https://msdn.microsoft.com/en-us/library/hh848246.aspx
4. MV？的UI設計模式演進歷程 MV C MV P MVVM
5. MV？的UI設計模式演進歷程－MVC(Model, View, Controller)  UI畫面顯示、使用者輸入(Event Handler)、 Business Logic拆開  →程式碼分離(Separation of Concerns)  現在還會聽到的”MVC”(Spring MVC, Asp.NET MVC) 其實早就不是長這個樣子了(Model2 pattern) From https://manojjaggavarapu.wordpress.com/2012/05/02/presentation-patterns-mvc-mvp-pm-mvvm/
6. MV？的UI設計模式演進歷程－MVP(Model, View, Presenter)  UI顯示元件化、可reuse、UI元件本身有狀態且可 接收輸入事件(只是丟給Presenter處理)  View和Presenter之間以Interface做函式呼叫媒介  開始強調程式碼可測試性(testability)的重要  →與顯示有關/無關的程式碼分離 From http://www.bradoncode.com/blog/2012/04/mvp-design-pattern-survival-kit.html
7. MV？的UI設計模式演進歷程－MVVM(Model, View, ViewModel)  View與ViewModel之間是一種『弱連結』  Data: (one-way/two-way) data-binding  Event: 使用binding的Command Object傳遞 (http://www.oodesign.com/command-pattern.html)  View能有ViewModel的參考，但反過來不行  由於使用Data-binding和Command Object，更容易 抽換前端顯示(View)元件  進一步強化MVP模式的概念，可測程式碼更多  在後端model程式還沒正式建立好之前，前端就能 根據mock data的ViewModel開始施作UI細節 From https://msdn.microsoft.com/en-us/library/gg405484.aspx
8. 千言萬語不如自幹一次－MVVM BY HAND(不套框架)
9. 千言萬語不如自幹一次－MVVM BY HAND(不套框架)  程式碼：http://bit.ly/2pHUq9c  很快就會發現有幾個坑： 1. INotifiyPropertyChanged介面的實作很煩，setter很容易 忘記寫呼叫資料改變事件的程式碼 2. 有些UI元件的觸發事件沒有 Command(http://bit.ly/2pJ9NgE)可用，解法：  Event to Command Behavior: http://bit.ly/2pJFrf2  Behaviors.Forms Nuget套件: http://bit.ly/2pMl3ZV 3. 如何在不『強連結UI(View)』的架構下，在ViewModel 內執行的Command程式碼或binding屬性資料改變時， 可以切換到不同的顯示頁面？ 4. 同上的情況，怎樣從ViewModel上叫View顯示對話方塊？
10. 千言萬語不如自幹一次－MVVM BY HAND(不套框架)  從自行手工打造的經驗，一個MVVM框架最起碼要提供：  Easy Data-Binding syntax  Command Object Pattern for wrapping UI Events  UI(View) Navigation Mechanism invokable from ViewModel  UI(Presentation) API service for ViewModel  再來就是一些ViewModel起始時能夠DI注入物件/服務的機制，才能便於寫測試
11. 套用MVVMCross的寫法  程式碼…..( 失敗 )  使用安裝的最新版VisualStudio外掛，專案範本精靈產生的共通程式 碼專案格式是.Net Standard 1.6，配上最新的Xamarin Forms Nuget套 件會編譯錯誤！ (聽說v6.0會支援.Net Standard 2.0)  有已經打底加上MVVMCross套件的範例專案： https://github.com/martijn00/MvxForms (不過這個是用MVVMCross v5.3.1，升v5.7會被Android support library 升級失敗卡住無法成功)  另外官方文件說明( http://bit.ly/2E0PqRu )安裝Nuget Starter Pack方式 執行起來會有Runtime錯誤說ViewModel重複註冊？！  App、ContentPage都自己多包裝一層Mvx名稱開頭的類別，一定得用 這些類別來做  View和ViewModel的繫結經由View建立時塞給建構子的type parameter  Data-Binding使用MVVMCross提供SetProperty()一行寫法，也有其他 除了Xamarin Forms機制之外的ValueConverter  提供MvxCommand做Command Object
12. 套用Prism的寫法  程式碼：http://bit.ly/2IVmVbz  View和ViewModel的連結使用類別命名慣例自動連 (AutowrieMode=true時)  Data-Binding使用Prism提供SetProperty()一行寫法  Command使用Prism的DelegateCommand物件，包裝 Event成Command的API也有提供：http://bit.ly/2IcoEbo  Navigation Library使用Uri指定active tab的寫法： http://bit.ly/2IXhCbu  有Page Dialog Service可從ViewModel發動UI的API http://bit.ly/2GgxeJC  專案範本在建立時就可選取三種不同DI框架，預設 DI框架的寫法跟Asp.NET Core內建DI框架寫法雷同
13. 總結比較表 MVVMCross Prism for Xamarin Forms 易上手度 勝 跨平台支援度 勝 流行度 勝 跟隨Xamarin/.NET更新進度 勝 可自行魔改的客製化程度 勝 Support Community Official