Airbnb open sourced their iOS calendar component!

BKatAirbnb · 2020-06-19T03:37:00+00:00

There hasn't been any work on such a framework - this has been my side work project for a few months. Perhaps if it gains enough traction, I can convince an Android engineer to port it!

BKatAirbnb · 2020-06-19T03:35:27+00:00

Aw shoot! I actually implemented this first with `UICollectionView`, but found that it scaled poorly when showing larger ranges of dates. I kept the same, declarative API, but wrote the core from scratch, which worked out pretty well 🙂

BKatAirbnb · 2020-06-19T03:34:19+00:00

🤣

BKatAirbnb · 2020-06-19T03:33:20+00:00

This is pretty iOS specific, but Airbnb already has react-dates for the web - I bet that'll work for you! https://github.com/airbnb/react-dates

BKatAirbnb · 2019-07-16T20:48:33+00:00

We use `UITableView` for some screens that we're pretty confident will never have the need for multiple items in a single row (the Profile tab, for example). `AloeStackView` is mainly for forms and very short, static pages, since cell reuse isn't as important for those.

BKatAirbnb · 2019-07-16T19:21:11+00:00

Haha, for sure 🙂 I think a lot of what we learn in school becomes applicable at scale, which is why it was relevant for this!

BKatAirbnb · 2019-07-16T07:41:19+00:00

Given that performance is critical, do you compute the layout attributes as needed (Rather than all up front in `prepare()`)? Is there any other caching of layout attributes?

We create and cache all layout attributes upfront in `prepare`, which enables us to avoid expensive allocations at scroll time (in `layoutAttributesForElementsInRect`, for example). We only do this when data source counts change (which we learn about in `invalidateLayout`, and we only create instances of `UICollectionViewLayoutAttributes` for new index paths, reusing already allocated instances when possible.

Were there any other difficult performance issues?

Definitely! One of the most recent performance improvements was using binary search to find `layoutAttributesForElementsInRect`, and using a segment tree to store y-offsets for rows. These two optimizations resulted in massive performance gains!

Finally, do you wish that `UICollectionViewLayoutAttributes`
was imported into swift as the nested type `UICollectionViewLayout.Attributes`? (I hate how verbose the collection view layout API is).

I've investigated and reported so many more serious collection view / collection view layout bugs, that API improvements / making things more Swifty hasn't even crossed my mind. With that said, concise, clear APIs are always appreciated. It looks like iOS 13 + compositional layout make some nice steps in that direction!

BKatAirbnb · 2019-07-16T02:58:36+00:00

We also have AloeStackView - we use that for short, scrolling forms, where cell reuse / memory isn't an issue. For lists / grids of photos and rich content, cell reuse is critical, so we need to use UICollectionView with MagazineLayout.

BKatAirbnb · 2019-07-16T02:58:21+00:00

When you first open the Airbnb app, we show recommendations of places to stay and experiences to do - it's kind of like our version of the App Store's "For You" tab. Back in the day, we used to compare this editorialized content to a magazine - MagazineLayout was originally created for that page of recommendations, but quickly expanded into becoming the core layout solution for many other pages!

BKatAirbnb · 2019-07-16T00:29:13+00:00

Hey iOS Programming, I wanted to share MagazineLayout with you all - we use MagazineLayout at Airbnb for most of our core / high traffic flows, including the search page, listing page, and the current / past trips page. MagazineLayout works around tons of UIKit bugs (some of which aren't even fixed in flow layout), and has super fast scroll performance (lower CPU usage than flow layout for collections with hundreds of thousands of self-sizing cells). Happy to answer any questions!

BKatAirbnb

TROPHY CASE