Last month I had a system design interview for the first time in my life. I watched all your system design videos to prepare for it and drew them out by hand. Now I received a job offer! cannot thank you enough for sharing these, as I did not even know where to start. Keep up the great work!
Great video! 1. Why do we need user-id in API requests? Backend already knows client's identity. (from access token) 2. In payload, why do we send postID to server? We already send "page" for pagination. 3. On 10:27, what do you mean by "user unloads app from memory and loads it back?". You mean navigating to another screen or killing app or sending it background? How can user achieves unloading and reloading on memory? 4. On diagram (11:40), instead of viewModel, it should be viewController to connect S3 imho, since we locate SDWebImage on UI. Am I correct? 5. On (15:30) Photo and Album seems duplicated imho. Photo can be treated as an album with only one photo. so, we don't need any new cell class for photo. Bcs on UI, the only difference is a dot indicator. No need to duplicate them imho. 6. On 15:30, ViewModel is conforming UITableViewDataSource and UITableViewDelegate. Do you think is it a violation of Separation of Concerns? Instead, what if we define a CustomDataSource that conforms those protocols and keeps data inside and define an instance of CustomDataSource in ViewModel? 7. Also, on 15:30, since we use CollectionView, protocols must be UICollectionViewDataSource, UICollectionViewDelegateFlowLayout. 8. I see http instead of https. Is interviewer gonna take this as a negative signal for security or he would ask me if it's a typo? (I mean in real world Meta SD interview.) Thanks.
Thanks for the video, Andrei. I have one observation: ViewModel should not implement UITableViewDataSource or UITableViewDelegate. Those two belong to the View camp, and in MVVM - ViewModel should be independent of UIKit (even UIImage should be represented as Data inside ViewModel, generally speaking). Creating a CellsController class that implements UITableViewDataSource and UITableViewDelegate would be more appropriate. And CellsController can also contain ViewModel dependencies, of course.
Or the ViewControll can simply be the delegate and data source for the uicollectionview. The VC can have a copy of all the displayable data, then sends actions to the VM
Really nice video. I think rather than simple tutorials these types of videos are really good for learning concepts in a better way. Thanks for your effort behind it and also expecting more from you.
Thanks for this awesome video. Can you explain more about the pagination API parameter page - prev / next. I am still not quite understand how they relate to the two case you mentioned in the video. Thanks!
Hi, thanks. If you're scrolling downwards, you need to use an API request with the "prev" parameter to get posts that were posted earlier. I you're doing pull-to-refresh to get newer posts, you need to do an API request with the "next" parameter. So these parameters are used to distinguish between headfetch and tailfetch of data.This is just one of the possible ways of implementation.
Great Video, thank you. I'm wondering about the choice to have the ViewModel serve as the table/collectionView datasource and delegate. Wouldn't this require importing UIKit into the ViewModel? What would you think about having the ViewModel remain completely agnostic of UI implementation, and, for example, using an observable array in the ViewModel and then subscribing to changes in that array in the UIViewController, which would serve as the table/collectionveiw datasource and delegate? This would seem to be better for both modularity and unit testing, what do you think?
Thanks for a video. ViewModel directly communicating with S3 bucket. I am thinking, can we use some service between ViewModel & Image Storage S3. ViewModel get data from service & that service can communicate with Image Storage S3.
Good point. This decision was made because SDWebImage API is implemented as a category on UIImageView. It works like this: imageView.sd_setImage(with: URL(string: "www.domain.com/path/to/image.jpg"), placeholderImage: UIImage(named: "placeholder.png")) So it's just convenient to pass the url directly to the UIImageView without additional layers of abstraction. But as an alternative option we could create an image loading service, yes.
@@andrey_tech w.r.t to above image loading service, I wanna take your opinion I have created an UIImage extension that calls the *sd_setImage* method of *SDWebImage* Framework, is this okay? or is there any other way to make it more modularize import SDWebImage public protocol ImageLoader { func loadImage(from url: URL, placeholder: UIImage?) } extension UIImageView: ImageLoader { public func loadImage(from url: URL, placeholder: UIImage?) { self.sd_setImage(with: url, placeholderImage: placeholder) } } // Usage imageView.loadImage(from: url, placeholder: placeholderImage)
@@TheSajalGupta Yes, this is definitely a good solution. Because it enables you to change the framework or the download logic easily. Also, UI layer shouldn't know about the existance of the SDWebImage framework. I should have mentioned this in the video. Thanks
funny real Instagram app actually has this like offline option (never knew). the "cache" function is very limited though... i can only see very last few posts, so it kind of funny they bothered implementing this "like offline" ))). regarding pagination being naive, this is not true. on mobile side, both are implemented with same "ease", both approaches have there use cases, when you loop videos on you-tube search api, or flickr images search, there is no point what so ever for "cache", and when cache of network calls is not needed, there is no point in "timestamps", so it not that is is "naive", it just dont suite for cache post history, on the other hand "timestamp" approach, will not feet flickr api. or any api, that dont need cache for that matter.
Very helpful stuff. Do you have plans of making more Android focused content perhaps? I was able to still follow quite well and think about Android equivalents every step of the way but I'm curious if you have experience in the space, how you would approach the same/similar problem focusing on Android. Thanks!
There won't be a gap, because we're using postID as a cursor. But with slow internet connection you would have a lag when you reach bottom of the currently loaded feed. If you want to improve this, there is a solution. You can create 2 separate requests for the news feed. One for loading small metadata objects and another one for loading detailed data. Alternatively, you can just change the limit from 20 to 200. That should be enough = )
Hi Andrey, nice work! i have question about the storage part though, you were mentioned use s3 bucket store real image file and save url inside dataModel at first, and then talked about you will be saving metadata in core data and images in Cache? so its like we still need to use the url to download the image and save its metadata and image file into cache for local use is that correct? also can you expand little bit how the pagination work when we want to show the most recent post to user while user is slide the post?
Also in DataModel we have more than metadata and images, why we only covered those two in storage? do we need to store the Post and User data into sqlDB as well?
Hey, that's correct. We can store image urls in CoreData or other storage. Then separately download images using those urls. It doesn't make sense to download images every time so usually they're are disk cached.
Last month I had a system design interview for the first time in my life. I watched all your system design videos to prepare for it and drew them out by hand. Now I received a job offer! cannot thank you enough for sharing these, as I did not even know where to start. Keep up the great work!
Wow congrats! Thanks for the comment, it is very inspiring for me =)
Great video!
1. Why do we need user-id in API requests? Backend already knows client's identity. (from access token)
2. In payload, why do we send postID to server? We already send "page" for pagination.
3. On 10:27, what do you mean by "user unloads app from memory and loads it back?". You mean navigating to another screen or killing app or sending it background? How can user achieves unloading and reloading on memory?
4. On diagram (11:40), instead of viewModel, it should be viewController to connect S3 imho, since we locate SDWebImage on UI. Am I correct?
5. On (15:30) Photo and Album seems duplicated imho. Photo can be treated as an album with only one photo. so, we don't need any new cell class for photo. Bcs on UI, the only difference is a dot indicator.
No need to duplicate them imho.
6. On 15:30, ViewModel is conforming UITableViewDataSource and UITableViewDelegate. Do you think is it a violation of Separation of Concerns? Instead, what if we define a CustomDataSource that conforms those protocols and keeps data inside and define an instance of CustomDataSource in ViewModel?
7. Also, on 15:30, since we use CollectionView, protocols must be UICollectionViewDataSource, UICollectionViewDelegateFlowLayout.
8. I see http instead of https. Is interviewer gonna take this as a negative signal for security or he would ask me if it's a typo? (I mean in real world Meta SD interview.)
Thanks.
Thanks for the video, Andrei. I have one observation: ViewModel should not implement UITableViewDataSource or UITableViewDelegate. Those two belong to the View camp, and in MVVM - ViewModel should be independent of UIKit (even UIImage should be represented as Data inside ViewModel, generally speaking). Creating a CellsController class that implements UITableViewDataSource and UITableViewDelegate would be more appropriate. And CellsController can also contain ViewModel dependencies, of course.
Or the ViewControll can simply be the delegate and data source for the uicollectionview. The VC can have a copy of all the displayable data, then sends actions to the VM
Really nice video. I think rather than simple tutorials these types of videos are really good for learning concepts in a better way. Thanks for your effort behind it and also expecting more from you.
I'm glad to hear that, thanks
very well explained and I literally couldn't found specific ios design videos...Thank you so much Andrey
Happy to help!
Now I understand much better, thanks a lot for sharing! Hope you'll keep at it
Thanks!
thank you, I am an android developer, your iOS system design courses have great reference value also.
Good to know! Thank a lot. I was actually wondering about this...
Hi, Nice video. can you make a system design video using TCA architecture?
Hmmm The Composable Architecture... interesting. I took a note of this. Thanks
awesome video. I really like how you gave reasoning for cursor based pagination.
nit: its not "i mage" it is "image" sounds something like 'emage'
Thanks for a video, can you please tell more about REST API next?
Hi, I'll add smth about it in future videos
Thanks for this awesome video. Can you explain more about the pagination API parameter page - prev / next. I am still not quite understand how they relate to the two case you mentioned in the video. Thanks!
Hi, thanks. If you're scrolling downwards, you need to use an API request with the "prev" parameter to get posts that were posted earlier. I you're doing pull-to-refresh to get newer posts, you need to do an API request with the "next" parameter. So these parameters are used to distinguish between headfetch and tailfetch of data.This is just one of the possible ways of implementation.
Well explained video Thanks a lot.
Thanks for sharing, a very good design video for iOS/Mobile.
Thank you for your time in making this informative video and posting it.
Glad it was helpful!
Great Video, thank you. I'm wondering about the choice to have the ViewModel serve as the table/collectionView datasource and delegate. Wouldn't this require importing UIKit into the ViewModel? What would you think about having the ViewModel remain completely agnostic of UI implementation, and, for example, using an observable array in the ViewModel and then subscribing to changes in that array in the UIViewController, which would serve as the table/collectionveiw datasource and delegate? This would seem to be better for both modularity and unit testing, what do you think?
Thanks for a video. ViewModel directly communicating with S3 bucket. I am thinking, can we use some service between ViewModel & Image Storage S3. ViewModel get data from service & that service can communicate with Image Storage S3.
Good point. This decision was made because SDWebImage API is implemented as a category on UIImageView. It works like this: imageView.sd_setImage(with: URL(string: "www.domain.com/path/to/image.jpg"), placeholderImage: UIImage(named: "placeholder.png"))
So it's just convenient to pass the url directly to the UIImageView without additional layers of abstraction. But as an alternative option we could create an image loading service, yes.
@@andrey_tech Thanks 🙏
@@andrey_tech w.r.t to above image loading service, I wanna take your opinion
I have created an UIImage extension that calls the *sd_setImage* method of *SDWebImage* Framework, is this okay? or is there any other way to make it more modularize
import SDWebImage
public protocol ImageLoader {
func loadImage(from url: URL, placeholder: UIImage?)
}
extension UIImageView: ImageLoader {
public func loadImage(from url: URL, placeholder: UIImage?) {
self.sd_setImage(with: url, placeholderImage: placeholder)
}
}
// Usage
imageView.loadImage(from: url, placeholder: placeholderImage)
@@TheSajalGupta Yes, this is definitely a good solution. Because it enables you to change the framework or the download logic easily. Also, UI layer shouldn't know about the existance of the SDWebImage framework. I should have mentioned this in the video. Thanks
funny real Instagram app actually has this like offline option (never knew). the "cache" function is very limited though... i can only see very last few posts, so it kind of funny they bothered implementing this "like offline" ))).
regarding pagination being naive, this is not true.
on mobile side, both are implemented with same "ease", both approaches have there use cases, when you loop videos on you-tube search api, or flickr images search, there is no point what so ever for "cache", and when cache of network calls is not needed, there is no point in "timestamps", so it not that is is "naive", it just dont suite for cache post history, on the other hand "timestamp" approach, will not feet flickr api. or any api, that dont need cache for that matter.
Very helpful stuff. Do you have plans of making more Android focused content perhaps? I was able to still follow quite well and think about Android equivalents every step of the way but I'm curious if you have experience in the space, how you would approach the same/similar problem focusing on Android. Thanks!
Thanks! Honestly, I don't plan any Android videos soon, but probably will do more "universal" ones
Regarding the cursor scrolling: what happens if the user scrolls quickly up or down? There will be a gap in the data fetched.
There won't be a gap, because we're using postID as a cursor. But with slow internet connection you would have a lag when you reach bottom of the currently loaded feed.
If you want to improve this, there is a solution. You can create 2 separate requests for the news feed. One for loading small metadata objects and another one for loading detailed data.
Alternatively, you can just change the limit from 20 to 200. That should be enough = )
@@andrey_tech Thank you very much for the proposed solution. Now I believe everything is clear.
I really like your structure
Really helpful! Thank you!
Great video. Thank you 🙏
Thank you for the nice videos! Liked and subed!
Thanks and welcome 👍
Quick question, for storing metadata, why do we need to choose a framework specifically for managing object graphs?
Writing out "dependency injection" on a high level design does just seem like filler
very nice video
Hi Andrey, nice work! i have question about the storage part though, you were mentioned use s3 bucket store real image file and save url inside dataModel at first, and then talked about you will be saving metadata in core data and images in Cache? so its like we still need to use the url to download the image and save its metadata and image file into cache for local use is that correct? also can you expand little bit how the pagination work when we want to show the most recent post to user while user is slide the post?
Also in DataModel we have more than metadata and images, why we only covered those two in storage? do we need to store the Post and User data into sqlDB as well?
Hey, that's correct. We can store image urls in CoreData or other storage. Then separately download images using those urls. It doesn't make sense to download images every time so usually they're are disk cached.
Yes. Post and User data is stored in DB as well
There is a chance that you can show how to resolve the problem of infinite scroll cancelling the request that are not showing?
Probably in the future
What is the IDE / software tool that was used to draw and illustrate the design process?
Hey, it's draw.io =)