How I Accidentally Discovered MVVM

Slides for my talk, given at 360iDevMin in Greeneville, SC in October of 2014

Transcript

1. How I Accidentally Discovered MVVM No frameworks, no tricks, just good architectural decisions, come to honestly. 360iDevMin, October 2014
2. Bradford Dillon Senior iOS Developer / Mobile Arch bradford@doubleencore.com @jbradforddillon
3. How I Accidentally Discovered MVVM
4. Accidentally?
5. MVVM?
6. "The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View-Binder)."
7. "The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View-Binder)."
8. "The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View-Binder)."
9. "The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View-Binder)."
10. "The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. Largely based on the model–view–controller pattern (MVC), MVVM is a specific implementation targeted at UI development platforms which support the event-driven programming in Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View-Binder)."
12. Let’s Just Stick With Plain ol’ MVC
13. Model View Controller Controller View Model
14. Model View Controller Controller View Model UIViewController
15. Obligatory Massive View Controller Slide
18. Massive View Controller iPhone VC A Cautionary Tale
19. Massive View Controller iPhone VC Model A Cautionary Tale
20. Massive View Controller iPhone VC iPad VC A Cautionary Tale
21. Massive View Controller Shared Superclass iPhone VC iPad VC A Cautionary Tale
22. Massive View Controller Shared Superclass iPhone VC iPad VC Model A Cautionary Tale
23. Massive View Controller Shared Superclass iPhone VC iPad VC Model A Cautionary Tale
24. Massive View Controller Shared Superclass iPhone VC iPad VC Model A Cautionary Tale
25. Massive View Controller Shared Superclass iPhone VC iPad VC Model A Cautionary Tale
26. Massive View Controller Shared Superclass iPhone VC iPad VC Model A Cautionary Tale
27. What do we need? Controller View Model
28. What do we need? Controller View Model ???
29. <Interlude> A Word On Skinning Cats
30. I SKINNED THE CAT
31. And now it’s pissed...
32. “There’s more than one way to skin a cat”
35. CATS ARE BEAUTIFUL SNOWFLAKES
36. “I should use X because Y.”
37. “I should use ASIHTTPRequest because networking is hard.”
38. “I need to do Y, and X is the best solution.”
39. “I need to fetch a single file over HTTP, and _____ is the best solution.”
40. </Interlude> Back to the talk…
41. Design Patterns > Libraries
42. Brainstorming iPhone VC Model iPad VC View View
43. Brainstorming iPhone VC Model iPad VC View View
44. Brainstorming iPhone VC Model iPad VC View View
45. Brainstorming iPhone VC Model iPad VC View View
46. Brainstorming iPhone VC Model iPad VC View View
47. Brainstorming iPhone VC Model iPad VC Model Controller View View
48. Concern Separation of MVC Composition Over Inheritance “Glue” Like UIViewController NSFetchedResultsController
49. VVCMCM
50. VVCMCM Model Controller View Model View Controller
51. VVCMCM Shared Superclass iPhone VC iPad VC Model
52. VVCMCM iPhone VC Model iPad VC Model Controller
53. VVCMCM Model Controller • Easily Tested • Easily Composed • Easily Refactored • Easily Replaced
54. VVCMCM
55. “…an augmented version of MVC where we formally connect the view and controller, and move presentation logic out of the controller and into a new object, the view model.” Ash Furrow, June 2014
56. MVVM
57. Model-View-ViewModel View Model View Model View Controller
58. Model-View-ViewModel View Model View Model View Controller
59. Model-View-ViewModel View Model View Model
60. MVVM iPhone VC Model iPad VC View Model
61. VVCMCM Model Controller • Easily Tested • Easily Composed • Easily Refactored • Easily Replaced
62. MVVM View Model • Easily Tested • Easily Composed • Easily Refactored • Easily Replaced
63. MVVM
64. MVVM iPhone VC Model iPad VC View Model Widget VC
65. Example Table VC View Model
66. Example Table VC Table Cell Table Cell Table Cell View Model
67. Example Table VC Table Cell Table Cell Table Cell View Model View Model View Model View Model
68. Example Table VC Table Cell Table Cell Table Cell View Model View Model View Model View Model
69. Example Collection VC Cell Cell Cell View Model
70. Example Collection VC Cell Cell Cell View Model View Model View Model View Model
71. Example Widget VC View Model
72. What I Learned About MVVM
73. What I Learned About MVVM 1. Works Well With MVC.
74. What I Learned About MVVM 1. Works Well With MVC. 2. Naturally Pairs With View Controllers.
75. What I Learned About MVVM 1. Works Well With MVC. 2. Naturally Pairs With View Controllers. 3. Allows Better Refactoring and Reuse.
76. What I Learned About MVVM 1. Works Well With MVC. 2. Naturally Pairs With View Controllers. 3. Allows Better Refactoring and Reuse. 4. Helps Avoid Massive View Controllers.
77. What I Learned About MVVM 1. Works Well With MVC. 2. Naturally Pairs With View Controllers. 3. Allows Better Refactoring and Reuse. 4. Helps Avoid Massive View Controllers. 5. Unit Testable.
78. What I Learned About Cats
79. What I Learned About Cats 1. Avoid Massive View Controllers.
80. What I Learned About Cats 1. Avoid Massive View Controllers. 2. Understand Your Problem and Look for a Solution to THAT Problem.
81. What I Learned About Cats 1. Avoid Massive View Controllers. 2. Understand Your Problem and Look for a Solution to THAT Problem. 3. (Sometimes That Solution is a Bandwagon).
82. What I Learned About Cats 1. Avoid Massive View Controllers. 2. Understand Your Problem and Look for a Solution to THAT Problem. 3. (Sometimes That Solution is a Bandwagon). 4. Good Architecture is Future-Proof.
83. Bradford Dillon @jbradforddillon (bit.ly/tweetford)
84. Thank you