Facebook has open sourced ComponentKit, a declarative library for creating native views on iOS.
After hitting some performance bottlenecks with their initial application created with HTML5, Facebook decided to go native both on iOS and Android. But after a while they encountered other performance issues on iOS. An important one was related to data modeling, the News Feed app initially using Core Data for storing information, which proved to be slower with each iteration. So, about six months ago Facebook moved away from Core Data and almost doubled the speed of their News Feed. At the same time, they introduced ComponentKit which is an Objective-C++ declarative view framework for iOS inspired by React. This simplified working with the News Feed UI on iOS, reducing the rendering code.
Instead of the usual process of creating components, adding them to a container, laying them out and setting up constraints, developers declare what they would like to have built up for them. The following example shows how to create a view with a header, content and footer layout vertically in a container:
[CKStackLayoutComponent
newWithView:{}
size:{}
style:{
.direction = CKStackLayoutDirectionVertical,
}
children:{
{[HeaderComponent newWithArticle:article]},
{[MessageComponent newWithMessage:article.message]},
{[FooterComponent newWithFooter:article.footer]},
}];
By using this framework Facebook has managed to downsize the rendering code by 70%, to see faster scrolling and improve test coverage because “ComponentKit made it easy to build modular UI for which each piece can then be tested in isolation.”
Besides its declarative nature, ComponentKit has a number of other features:
- Data objects passed to components are immutable, removing any possible data locks and making the components thread-safe. When data state changes the framework re-renders the view from root performing as fewer changes to the hierarchy as possible.
- Components can be created on any background thread.
- Components can be reused in different views.
- The layout engine is a simplified version of CSS Flexbox.
Facebook has now decided to open source ComponentKit on GitHub under a BSD license.
