Launching IGListKit 3.0

The Instagram engineering team in New York City are excited to announce the release of IGListKit 3.0! We’ve been baking this release on GitHub master branch for several months with the generous help of our open source contributors.

If you’ve used Instagram on iOS, you’ve used IGListKit. Instagram continues to use the latest IGListKit branch as we ship new features to hundreds of millions of users every week. Since open sourcing it, Instagram has introduced many new features backed by IGListKit to each tab of the app.

New Features

Among the 38 enhancements, changes, and fixes in the 3.0 release, there are a couple major additions that we’re excited to share.

Binding Section Controller

IGListBindingSectionController is a new tool that performs the same diffing magic that we use on sections, but now on the cells themselves. It unlocks the ability to dynamically animate changes (delete, insert, move) to individual cells instead of a cross-fade reload on all of the cells.

More importantly, it encourages modeling your lists with data, transformations, and view models which results in a one-way data flow architecture.

Let’s use a design like Instagram’s home tab as an example. Say you have a list of Post models that power an assortment of cells: PhotoCell, ActionCell, and CommentCell. With vanilla UICollectionView, you connect a data source that controls the sections, item count, cells, and sizes. Often this is done in a UIViewController alongside other business logic, leading to bloat commonly referred to as massive view controller.

Instead, with IGListKit, you can create an IGListBindingSectionController that receives a Post object and transforms it into view models, which then configure your cells. Whenever something changes, call -updateAnimated:completion: and cells will animate into place.

Check out our calendar example to see how it works!

Better Layout

IGListCollectionViewLayout is a new vertically-scrolling layout that positions sections next to each other when they don’t fill the full width. It mimics how UICollectionViewFlowLayout positions cells within the same section.

We spent a lot of time testing and tuning this layout to make it as fast and stable as possible!

Using IGListCollectionViewLayout is as simple as assigning it to a UICollectionView - and you’re done!

let layout = IGListCollectionViewLayout
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
// that's it!

Community

We are incredibly appreciative to all 47 contributors! A special thanks to everyone that made 3.0 possible: Adam Roberts, Adlai Holler, Bas Broek, Benny Wong, Bofei Zhu, Charles, Diogo Tridapalli, Hesham Salman, James Sherlock, Jeff Bailey, Jesse Squires, Nikolai Johan Heum, Phil Cai, Rune Madsen, Ryo Fukuda, Viktor Gardart, and Vincent Peng.

We’re sending out limited t-shirts to help show our appreciation!

If you’re interested in helping shape the future of IGListKit, we have starter tasks to help get your foot in the door. You can read more about the direction of the project in our new Vision document.

Stats

Finally, we’re proud of how IGListKit has grown both internally and externally, so we wanted to share a few interesting stats about the 3.0 release:

• Dozens of IGListKit-backed features in Instagram, with over 42,000 diffs executed per second
• Test coverage is at a whopping 98%
• 4 radars filed
• 5,700 stars on GitHub
• Over 3,500 app installs via CocoaPods