The MVC to MVVM Upgrade: Clintal Case Study

MVVMを使うメリットがわかるアプリを書いてきて、面接時に説明してください！

Transcript

1. The MVC to MVVM Upgrade: Clintal Case Study クリンタルのアプリがMVCからMVVMへ使う分析 Aaron Lee 2018/3/15
2. What is Clintal? クリンタルのアプリって何？
3. Codebase Small But Growing 現在のコードが段々複雑になった関⼼心事 • 35 ViewControllers • 17 Models • 1 App Engineer, more being hired • MVC
4. What’s wrong with MVC? 典型的なMVCに問題がありますか？
5. 「Massive View Controller」の略略だと よく揶揄されます
6. ChatViewController • Over 1000 lines! 肥⼤大化になり ました。 • Difficult to add new functionality like our chat bot. 開発者によって理理解や意⾒見見がバ ラバラで統⼀一的な実装ができな い
7. PlanViewController • Networking, presentation logic and data binding all in the View Controller! • ViewControllerはUIの表示やイ ベントのハンドリングを⾏行行って、 ここにもネットワークのことを 実⾏行行したが！
8. MVC Challenges 基本的なMVCのデメリットのは？ • Apple standard but… • Difficult to maintain • Difficult to unit test • Difficult separation of concerns • ViewControllerや特定のModelが 肥⼤大化し、ビジネスロジックの 本質を⾒見見失う
9. Why MVVM? MVVMの⽅方は？ • Better code separation for small- medium projects and startup teams like Clintal. ベンチャー会 社の中にエンジニアを⼀一⼈人として はコードの分離する構造しやすい • Easier to unit test your code • Familiar and similar to traditional Cocoa MVC. Also lighter and less boilerplate code than VIPER. VIPERよりも、MVCに似ている MVVMは把握しやすい
10. Let’s Refactor! MVCからMVVMへ PricePlanViewController MVC ➡ MVVM
11. Model Network calls, representation and persistence Modelはデータの⼀一時的な保持と永続化を責務としています。
12. View
13. Using ViewModels ViewController accesses model data through viewmodel data bindings ViewControllerはViewの保持とViewとViewModelのデータを主な責務。
14. Using ViewModels Business logic moved here! ViewModelはビジネスロジックを責務
15. Using ViewModels ViewModels handle presentation of model data instead of the view
16. Using ViewModels “import UIKit”! ViewModelはViewの参照が持ちません。
17. Old MVC View (╯°□°）╯︵ ┻━┻
18. New View with MVVC • View binds the values of the view model instead of the model • No more business logic in the Controller! Cレイヤがビジネス ロジック責務ならない！
19. Data Binding Techniques MVVMとデータバインディング • Key-Value Observation (via Objective-C NSObject) • Functional Reactive Programming (RxSwift, ReactiveCocoa) • Callback binding (see https://github.com/ ShengHuaWu/ MVVMInSwift)
20. More Unit Tests! E2Eテストの代わりに⼩小さな単位なUnitテスト出来ます！
21. ViewModel Unit Testing 簡単にUnit Testを記述することが可能となります
22. The Results リファクタリングの結果は？ ✅ Over ~40% less code in the ViewController! ✅ Testability - more unit tests! fewer E2E/UI tests! Time and money saved! ✅ Reusability - we can reuse views and viewmodels (we reused the PlanViewModel in 3 other parts of the app!) ✅ Scalability - easy to read and update for our new engineers ✅ VCのコードの記述量量は4割減 らすきがします！ ✅ Testability - UIテストよりUnit テストする可能性がある！ ✅ Reusability - MVVMアーキテ クチャはメンテナンスやテス トをしやすくなりそうです。 ✅ Scalability - 開発の⽣生産性は 向上すると思っています。
23. Improvements? MVVMではリファクタリングの後は？
24. MVVM-C Move routing out of the VC to the Coordinator! Routerとは？MVVMC⾵風って？
25. Should I use MVVM too? プロジェクトによって合ってるデザインパターンは違う • Depends on your project, team and time • Alternative architectures for bigger engineering teams • VIPER: https://github.com/apparition47/ ViperTaskManager • Clean: https://github.com/apparition47/clean-unsplash- photoviewer • 上記は私のMVVM以外のコードサンプル参考
26. Fin ご清聴ありがとうございました