Edit L07

Author: amelinagzz

Lessons/07-MVVM/README.md

@@ -25,38 +25,37 @@
 By the end of this lesson, you should be able to...
 
 1. Describe:
-- the **MVVM** design pattern
-- the software construction problem(s) it is intended to solve
+- the **MVVM** architectural pattern
+- the problems it is intended to solve
 - potential use cases for it
-3. Assess:
-- the suitability of a given design pattern to solve a given problem
-- the trade offs (pros/cons) inherent in choosing high-level (MVC, MVVM, etc.) design patterns
+3. Assess the trade offs (pros/cons) inherent in choosing high-level (MVC, MVVM, etc.) design patterns
 4. Implement basic examples of MVVM explored in this class
 
 
 <!-- > -->
 
 ### Model-View-ViewModel
 
-**MVVM** is a __*Structural*__ design pattern which introduces a *fourth* component to MVC — *the* __*View Model.*__
+**MVVM** is a __*Structural*__ pattern which introduces a *fourth* component to MVC...
 
-<!-- > -->
 
-The idea behind the MVVM pattern is that any **View** *with business logic specific to itself* should be backed by a **View Model** that represents and handles the data for the **View.**
+*the* __*View Model.*__
 
 <!-- > -->
 
-In MVVM, we implement *presentational* business logic - such as converting a Date into a date-formatted String - in the __*ViewModel*__ *instead* of in the View or the Controller.
+The idea behind the MVVM pattern is that any **View** *with business logic specific to itself* should be backed by a **View Model** that represents and handles the data for such view.
 
 <!-- > -->
 
-![mvvm](mvvm.png)
+In MVVM, we implement *presentational* business logic in the __*ViewModel*__.
+
+We would do this before in the View or in the Controller.
 
 <!-- > -->
 
 ### A Brief History
 
-MVVM was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify event-driven programming of user interfaces.
+MVVM was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify **event-driven** programming of user interfaces.
 
 MVVM was designed to make use of data binding functions in WPF (Windows Presentation Foundation) to better facilitate the separation of view layer development from the rest of the pattern, by removing virtually all GUI code ("code-behind") from the view layer.
 
@@ -66,7 +65,11 @@ MVVM was designed to make use of data binding functions in WPF (Windows Presenta
 
 It can be seen as an extension of MVC's primary intent: separating the View from the Model and utilizing the Controller as a central "manager" between View and Model.
 
-MVVM takes the principle of **Separation of Concerns** one step further &mdash; it adds a __*special layer*__ between the View and the Model (called the `ViewModel`) which __*allows Controllers to delegate data presentation responsibilities to the View Model.*__
+MVVM takes the principle of **Separation of Concerns** one step further &mdash; it adds a __*special layer*__ between the View and the Model (called the View Model) which __*allows Controllers to delegate data presentation responsibilities to the View Model.*__
+
+<!-- > -->
+
+![mvvm](mvvm.png)
 
 <!-- > -->
 
@@ -77,34 +80,33 @@ Here is how the major components of MVVM relate to each other (and to MVC):
 
 <!-- > -->
 
-**Model** &mdash; Objects that hold app data; typically, `structs` or simple `classes`. (Same as in MVC)
+**Model** &mdash; Objects that hold app data; typically, structs or simple classes. (Same as in MVC)
 
 <!-- > -->
 
 **View Controller** &mdash; In MVVM, VCs still set up UIView objects, but *they do not interact with the model.* Instead, the VC uses the View Model as a *mediator* and asks for what it needs in a format that will be ready for presentation. In MVVM, Controllers should have absolutely no business logic.
 
 <!-- > -->
 
-**View Model** &mdash; Transforms Model data into values that can be displayed on a View. Sits between the View Controller and Model. Can be a `class` or a `struct`, but it is *typically a class* so that references of the same instance can be passed around in code.
+**View Model** &mdash; Transforms Model data into values that can be displayed on a View. Sits between the View Controller and Model. Can be a class or a struct, but it is **typically a class** so that references of the same instance can be passed around in code.
 
 <!-- > -->
 
 ### Problems Addressed
 
-Discuss with a partner:
+Share in the chat:
 
 - Why do you think developers turn to this architecture?
 
 - What are some limitations you've noticed while using MVC?
 
-
 <!-- > -->
 
 MVVM can be used to solve two related development issues:
 
 **"MVC: Massive View Controller"** &mdash; In MVC, where do you put functionality that does not belong neatly in either the View or the Model?
 
-For expediency, iOS developers are too often tempted to use View Controllers as a "catch-all" component for such code, which results in bloated View Controllers.
+iOS developers are too often tempted to use View Controllers as a "catch-all" component for such code, which results in bloated View Controllers.
 
 <!-- > -->
 
@@ -146,9 +148,17 @@ When the View Model knows nothing about View layout, testing each - separately o
 
 <!-- > -->
 
-## Identifying MVVM
+## Identifying MVVM - 20 min
+
+In pairs, check out [this project](https://github.com/amelinagzz/mvvm-notes).
+
+1. **Complete** the only TODO pending in the project.
+
+1. [Jamboard Link](https://jamboard.google.com/d/11kLepZI3XqhEYFh83bLxxSppFTI2A7NAbnt4f6oLscA/edit?usp=sharing) **Draw a diagram** to demonstrate what elements act as the Model, View Model and View.
+
+1. **Describe the responsibilities** of each component, below their names.
 
-Individually complete [this activity](assignments/activity1.md)
+1. **Identify the role** played by callbacks.
 
 <!-- > -->
 
@@ -250,9 +260,9 @@ Whenever possible, it is recommended to implement a data binding mechanism (KVO,
 
 <!-- > -->
 
-## Implementing MVVM
+## Implementing MVVM - 25 min
 
-In pairs complete [this activity](assignments/activity1.md)
+Individually complete [this activity](https://github.com/amelinagzz/mvvm-starter/tree/main)
 
 <!-- > -->
 

Slides/07-MVVM/README.html

@@ -42,62 +42,64 @@
 By the end of this lesson, you should be able to...
 
 1. Describe:
-- the **MVVM** design pattern
-- the software construction problem(s) it is intended to solve
+- the **MVVM** architectural pattern
+- the problems it is intended to solve
 - potential use cases for it
-3. Assess:
-- the suitability of a given design pattern to solve a given problem
-- the trade offs (pros/cons) inherent in choosing high-level (MVC, MVVM, etc.) design patterns
+3. Assess the trade offs (pros/cons) inherent in choosing high-level (MVC, MVVM, etc.) design patterns
 4. Implement basic examples of MVVM explored in this class
 
 </script></section><section data-markdown><script type="text/template">
 ### Model-View-ViewModel
 
-**MVVM** is a __*Structural*__ design pattern which introduces a *fourth* component to MVC — *the* __*View Model.*__
-</script></section><section data-markdown><script type="text/template">
-The idea behind the MVVM pattern is that any **View** *with business logic specific to itself* should be backed by a **View Model** that represents and handles the data for the **View.**
+**MVVM** is a __*Structural*__ pattern which introduces a *fourth* component to MVC...
+
+
+*the* __*View Model.*__
 </script></section><section data-markdown><script type="text/template">
-In MVVM, we implement *presentational* business logic - such as converting a Date into a date-formatted String - in the __*ViewModel*__ *instead* of in the View or the Controller.
+The idea behind the MVVM pattern is that any **View** *with business logic specific to itself* should be backed by a **View Model** that represents and handles the data for such view.
 </script></section><section data-markdown><script type="text/template">
-![mvvm](mvvm.png)
+In MVVM, we implement *presentational* business logic in the __*ViewModel*__.
+
+We would do this before in the View or in the Controller.
 </script></section><section data-markdown><script type="text/template">
 ### A Brief History
 
-MVVM was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify event-driven programming of user interfaces.
+MVVM was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify **event-driven** programming of user interfaces.
 
 MVVM was designed to make use of data binding functions in WPF (Windows Presentation Foundation) to better facilitate the separation of view layer development from the rest of the pattern, by removing virtually all GUI code ("code-behind") from the view layer.
 </script></section><section data-markdown><script type="text/template">
 ### Components of MVVM
 
 It can be seen as an extension of MVC's primary intent: separating the View from the Model and utilizing the Controller as a central "manager" between View and Model.
 
-MVVM takes the principle of **Separation of Concerns** one step further &mdash; it adds a __*special layer*__ between the View and the Model (called the `ViewModel`) which __*allows Controllers to delegate data presentation responsibilities to the View Model.*__
+MVVM takes the principle of **Separation of Concerns** one step further &mdash; it adds a __*special layer*__ between the View and the Model (called the View Model) which __*allows Controllers to delegate data presentation responsibilities to the View Model.*__
+</script></section><section data-markdown><script type="text/template">
+![mvvm](mvvm.png)
 </script></section><section data-markdown><script type="text/template">
 Here is how the major components of MVVM relate to each other (and to MVC):
 
 **View** &mdash; Responsible for displaying visual elements and controls on the screen. Typically, subclasses of `UIView`. </br>
 (Same as in MVC)
 </script></section><section data-markdown><script type="text/template">
-**Model** &mdash; Objects that hold app data; typically, `structs` or simple `classes`. (Same as in MVC)
+**Model** &mdash; Objects that hold app data; typically, structs or simple classes. (Same as in MVC)
 </script></section><section data-markdown><script type="text/template">
 **View Controller** &mdash; In MVVM, VCs still set up UIView objects, but *they do not interact with the model.* Instead, the VC uses the View Model as a *mediator* and asks for what it needs in a format that will be ready for presentation. In MVVM, Controllers should have absolutely no business logic.
 </script></section><section data-markdown><script type="text/template">
-**View Model** &mdash; Transforms Model data into values that can be displayed on a View. Sits between the View Controller and Model. Can be a `class` or a `struct`, but it is *typically a class* so that references of the same instance can be passed around in code.
+**View Model** &mdash; Transforms Model data into values that can be displayed on a View. Sits between the View Controller and Model. Can be a class or a struct, but it is **typically a class** so that references of the same instance can be passed around in code.
 </script></section><section data-markdown><script type="text/template">
 ### Problems Addressed
 
-Discuss with a partner:
+Share in the chat:
 
 - Why do you think developers turn to this architecture?
 
 - What are some limitations you've noticed while using MVC?
-
 </script></section><section data-markdown><script type="text/template">
 MVVM can be used to solve two related development issues:
 
 **"MVC: Massive View Controller"** &mdash; In MVC, where do you put functionality that does not belong neatly in either the View or the Model?
 
-For expediency, iOS developers are too often tempted to use View Controllers as a "catch-all" component for such code, which results in bloated View Controllers.
+iOS developers are too often tempted to use View Controllers as a "catch-all" component for such code, which results in bloated View Controllers.
 </script></section><section data-markdown><script type="text/template">
 __*Example*__ </br>
 Data formatting is a common task. Imagine your app needs data &mdash; dates, currency, etc. &mdash; *formatted differently* for various user locales.
@@ -127,9 +129,17 @@
 
 When the View Model knows nothing about View layout, testing each - separately or together - is much easier.
 </script></section><section data-markdown><script type="text/template">
-## Identifying MVVM
+## Identifying MVVM - 20 min
+
+In pairs, check out [this project](https://github.com/amelinagzz/mvvm-notes).
+
+1. **Complete** the only TODO pending in the project.
+
+1. [Jamboard Link](https://jamboard.google.com/d/11kLepZI3XqhEYFh83bLxxSppFTI2A7NAbnt4f6oLscA/edit?usp=sharing) **Draw a diagram** to demonstrate what elements act as the Model, View Model and View.
+
+1. **Describe the responsibilities** of each component, below their names.
 
-Individually complete [this activity](assignments/activity1.md)
+1. **Identify the role** played by callbacks.
 </script></section><section data-markdown><script type="text/template">
 ### Benefits
 
@@ -209,9 +219,9 @@
 
 Whenever possible, it is recommended to implement a data binding mechanism (KVO, Notifications) to automatically **handle data state changes** between the View and the View Model.
 </script></section><section data-markdown><script type="text/template">
-## Implementing MVVM
+## Implementing MVVM - 25 min
 
-In pairs complete [this activity](assignments/activity1.md)
+Individually complete [this activity](https://github.com/amelinagzz/mvvm-starter/tree/main)
 </script></section><section data-markdown><script type="text/template">
 ## After Class