Hello Brian, this was a tough video because all the conceptual layers, after watching the video twice and studying the code, I think I have a grasp of the architecture (let me know if I am even close):
1. The first thing that happens is that the home controller creates and add the three views (top, middle, and bottom); the top and bottom, since they are static, are just built in their classes and presented as is. For the middle view, the card-view, the process is a little more involved...
2. For the card view the home controller first creates an array with three card view models, with two users and an advertiser (the user model and advertiser model define the format that each piece of information will be presented, for example; bottom left alignment for the user text and center text alignment for the advertiser ), which can be thought of as three buckets, each with the information from each user/advertiser (along with the format), and a little bit of logic (the ability to increase and decrease the index on demand).
3. the home controller then feeds each of the buckets to the card view via the cardViewModel variable inside of the card view.
4. For Each instance of the card view made from each of the buckets, the card view takes the information from each card view model in each bucket and lays it ; creating a frame for the image, adding the bars, adding the gradient, choosing the first image of the user, adding the ability to receive gestures and how to behave with each gesture etc... It is important to note that the card view does not define how each piece of information (text attributes, alignment) is laid out, the User and Advertiser model already do that, the card view just puts in place.
5. Now, the tap gestures are connected back to the card view model via the .advanceToNextPhoto() or cardViewModel.goToPreviousPhoto() functions. When the card view recognizes that the left or right of it's view are tapped, it tells the card view model that it has happened, the card view model does the calculations of increasing or decreasing the index.
6. when the index changes in the card view model, the didSet func for the index fires, in turn changing the image, and providing that information to the imageIndexObserver Variable.
7. (this is the part I am not a 100% certain about) When the card view model index change that causes the didSet for the card view model in the card view to also fire, in turn firing the setUpImageIndexObserver(), allowing it to capture the information in the ImageIndexObserver from the card view model, completing the loop.
8. So the structure set in this video is that the user taps the right of the card view -> cardViewModel.advanceToNextPhoto() -> card view model adds + 1 to the index -> imageIndex didSet fires -> next image and new index get saved in imageIndexObserver variable -> didSet for the card view model in the card view fires -> setUpImageIndexObserver() fires -> which grabs the images from the imageIndexObserver and gives to the card imageView to present and to set up which bar is white.