Swift MVVM embedded network fetching with image URL - swift

Question

I'm building a simple app with swift by using MVVM binding.
What my app does is simply fetching data from a url and get a json response, and show the info on a table view.
Each cell contains a title, a subtitle, and an image.
However, the image is showing as a string in the json response. So I will need an extra network fetch to get the image for each cell after the 1st network call.
"articles": [
{
"title": "Wall Street tumbles with Nasdaq leading declines Reuters",
"description": "Wall Street's main indexes tumbled on Monday with Nasdaq leading the declines as technology stocks dropped on expectations of a sooner-than-expected rate hike that pushed U.S. Treasury yields to fresh two-year highs.",
"url": "https://www.reuters.com/markets/europe/wall-street-tumbles-with-nasdaq-leading-declines-2022-01-10/",
"urlToImage": "https://www.reuters.com/resizer/2cEiuwViTo_kOe7eWg4Igm8pm_Q=/1200x628/smart/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/POAM3MQFAJJX3MRXQW772WYKCA.jpg",
}]
My question is, how should I modify my code to make the tableCellView more "pure"? Currently it's calling network fetch to get the image. Where should I move that image fetching part from the tableviewcell config function to?
Should I change my Model to to contains the UIImage but NOT the string?
My Model:
struct Articles: Codable {
let articles: [Article]
}
struct Article: Codable {
let title: String
let description: String?
let urlToImage: String?
}
My ViewModel:
struct ViewMode {
var articles: Observable<[Article]> = Observable([])
}
Main functions in my ViewController:
override func viewDidLoad() {
super.viewDidLoad()
tableView.dataSource = self
tableView.delegate = self
viewModel.articles.bind { [weak self] _ in
DispatchQueue.main.async {
self?.tableView.reloadData()
}
}
fetchArticlesFromLocal(fileNmae: "response")
}
func fetchArticlesFromLocal(fileNmae: String) {
networkManager.fetchLocalJson(name: fileNmae) { [weak self] result in
switch result {
case.success(let data):
guard let data = data else {return}
do {
let articles = try JSONDecoder().decode(Articles.self, from: data)
self.viewModel.articles.value = articles.articles.compactMap({
Article(title: $0.title, description: $0.description, urlToImage: $0.urlToImage)
})
} catch {
print(error.localizedDescription)
}
case .failure(let error):
print(error.localizedDescription)
}
}
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return viewModel.articles.value?.count ?? 0
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: ImageTableViewCell.cellID, for: indexPath) as? ImageTableViewCell {
if let articles = viewModel.articles.value {
cell.config(with: articles[indexPath.row])
}
}
return UITableViewCell()
}
}
My tableCellView:
func config(with article: Article) {
titleView.text = article.title
descriptionView.text = article.description
networkManager.fetchImage(url: article.urlToImage) { [weak self] result in
switch result {
case .success(let image):
DispatchQueue.main.async {
self?.iconView.image = image
}
case .failure(let error):
return
}
}
}
My binding:
class Observable<T> {
var value: T? {
didSet {
listener?(value)
}
}
typealias Listener = ((T?) -> Void)
var listener: Listener?
init(_ value: T?) {
self.value = value
}
func bind(_ listener: #escaping Listener) {
self.listener = listener
listener(value)
}
}

Answer 1

First of all, you say you use MVVM but I see some issues in implementation: you are passing a Model (Article instance) to the cell, but it should be a ViewModel (ArticleViewModel instance, but you didn't create that struct) since views should not have a direct reference to models in this architecture.
You also seem to add async/networking code inside the custom cell, which also violates the architecture and separation of concerns (even in MVC, that code should not be there, since Network Requests are part of the Service Layer and not the UI layer). The cell/view should know how to configure itself: 1. when image is available and 2. when image is not available... (you call reload on the cell from VC whenever the image becomes available, for instance)
Regarding your question, a better place to add the image downloading code would be cellForRowAt method. ViewModels should not be tied to UIKit generally speaking, so having a URL or String property for the image is fine.
To make the UI display smoothly on scrolling, you probably want to cancel the request: 1. when the image is prepared for reuse aka thrown in the reuse pool or 2. when it disappears from the visible area of the screen.
Here is a good article that uses approach #1: https://www.donnywals.com/efficiently-loading-images-in-table-views-and-collection-views/
Note that it caches the images in memory, but you may also want to cache them on disk.
View Controller is generally also considered to be more of a View, so technically we are still mixing Networking with UI. Perhaps it's better to use repository pattern either directly as a dependency of the View Controller when using MVC or a dependency of VC's View Model. View Model should not be aware if the Repository uses web requests to get the images or has them cached in memory or on disk, so use a protocol and Dependency Injection for that (also View Model may have to calculate the size/height of the cell based on the image size, before the cell is actually configured with that image).
Using this approach would work, but you will again violating some principles, and it's all your choice. Some people say it's ok to have UIKit/UIImage references inside view models (https://lickability.com/blog/our-view-on-view-models/, not sure if their argument should be considered valid though...).
Otherwise, you'll have to use some kind of auxiliary class/object to pass the image urls and do the networking part and keep track of what was already downloaded, what requests should be cancelled etc.
Remember, you don't have to follow MVC or MVVM strictly. Some object has to download those images anyway, and that object ideally should not be none of the view, view model or the data model. Name it as you want, ImageLoadingCoordinator, ImageRepository etc. and make sure it downloads asynchronously and has callbacks and gives the possibility to cancel requests and cache images. Generally speaking, try not to give any object to much responsibility or mix networking code with view code.