BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

FB ComponentKit: Declaratively Creating Native UIs on iOS

| by Abel Avram Follow 4 Followers on Mar 26, 2015. Estimated reading time: 1 minute |

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 Stage
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.

Tell us what you think

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

Email me replies to any of my messages in this thread
Community comments

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT