BT

InfoQ Homepage News FB ComponentKit: Declaratively Creating Native UIs on iOS

FB ComponentKit: Declaratively Creating Native UIs on iOS

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.