Our app also finds a new home: HOMESCREEN part I
written by Haitham Aboshahba
For quite some time, when users start using our app, instantly the app launches with a screen of what it does best: searching for a new home.
Having the search form as the app landing page tremendously helped users in finding quick results, or changing their search criteria to narrow down their results. Then we’ve decided to take it to the next level which was bringing content to you, whether based on our recommendation engine, user, current location or displaying latest properties added for last search performed. Basically we have fitted all these factors into our new home screen.
Upon app launch, the new home screen is shown and provides content that is custom to the user, the first section is Last Search, which contains latest properties added with the same criteria as last search performed, highlighting the new listings (which the user didn’t open yet ).
The Recommendations section, shows properties provided by our recommendation engine, which fits search parameters and highlights properties that are not in search results but have similar characteristics that user might be interested in. Nearby shows nearby properties based on the persumtion that users might be interested in finding a new home close to their current location. In this case it does not matter whether the user is searching from home or work.
Cool, so how did we build it from the iOS side of things?
At first sight it seemed to be a simple grid layout, but the more we dove the more we were convinced — it was a bit more complicated than what we expected it to be in the begining. So for example what if we want to have a different layout for each section content, such as full width property for example VS normal property layout in other sections? or how about adding, or having one section as full width map view with pins instead of normal property? or how about nested `UICollectionView`s?
And here is where [IGListKit](https://github.com/Instagram/IGListKit/) came into the game!
[IGListKit](https://github.com/Instagram/IGListKit/) is built on top of `UIKit`’s `UICollectionView` and it works in a data-driven way, so it provides an`Adapter` that maps data model to its relevant `IGListSectionController`, and then `IGListSectionController` picks up from there and handles how data should be displayed, so the logic goes here. That helps decoupling logic and different types of components.
Diffing is another advantage of IGListKit, it uses [Longest Common Subsequence Algorithm] (https://en.wikipedia.org/wiki/Longest_common_subsequence_problem) to perform comparison and updates to the `collectionView` which is a big win in case of large data set such as our result list screen for example, seamless fast comparison and applying updates comes for free with the package.
Nested components:
From higher level view, we needed to support different component types, such mentioned earlier in this post, but also when we go deeper we need a section to be able to contain different component types as needed and each one of them can control how it is displayed, which was achieved easily with the way `SectionController` works in `IGListKit`, considering that snippet:
```
func listAdapter(_: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
if object is PropertyModel {
return PropertyGallerySectionController()
} else if object is LoadMoreModel {
return LoadMoreSectionController()
} else if object is SectionErrorModel {
return ErrorSectionController()
} else {
return ListSectionController()
}
}
```
That’s easily nesting 2 child `sectionController`s inside a parent one, each one of the child controller completely controls how it should be displayed and handles it’s own data source wether local or fetched from our backend, also it handles a 3rd state which is the case of error, and the `ErrorSectionController` defines the way it should behave and retry fetching components again, and everything separated and driven by data model without putting a single centralized custom logic to handle each case/state of those.
That was part I of our new home screen making for iOS, part II will follow soon.
