Design Instagram News Feed - iOS System Design Interview
ฝัง
- เผยแพร่เมื่อ 21 พ.ค. 2024
- We’ll be talking about how to build an Instagram news feed. So we’ll be going through an iOS system design interview question. It is similar to the interview questions you might be asked at big tech companies.
Chapters:
0:00 Intro
1:19 Requirements
2:30 Plan
3:10 Data Model
4:55 API
9:28 Storage
11:38 Architecture
14:28 UI
16:43 Discussion - วิทยาศาสตร์และเทคโนโลยี
![CAMPปลิ้น | EP.75[1/2] ชวนแร็ปเปอร์เที่ยวประแสแบบไม่ต้องตามกระแส](http://i.ytimg.com/vi/J5ds2AxDp24/mqdefault.jpg)
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
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!
Well explained video Thanks a lot.
Really helpful! Thank you!
Great video. Thank you 🙏
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
Thank you for your time in making this informative video and posting it.
Glad it was helpful!
Thanks for sharing, a very good design video for iOS/Mobile.
Thank you for the nice videos! Liked and subed!
Thanks and welcome 👍
I really like your structure
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 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.
very nice video
Quick question, for storing metadata, why do we need to choose a framework specifically for managing object graphs?
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
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
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
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
What is the IDE / software tool that was used to draw and illustrate the design process?
Hey, it's draw.io =)
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
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.
почему аймидж а не имидж (image)? ['ɪmɪʤ] а так класс, понравилось, английский хороший и понятный.
Absolutely support this comment - please please please improve your English pronunciation just a little bit, that would make your videos even better! The video itself is great, I'm gonna watch other videos as well
haha thanks for the feedback
Only Russian speakers pay attention on this Image ;))))) me too :)