Philosophy Edit on GitHub

Components are immutable objects that specify how to configure views.

A simple analogy is to think of a component as a stencil: a fixed description that can be used to paint a view but that is not a view itself. A component is often composed of other components, building up a component hierarchy that describes a user interface.

Let’s see some sample code for rendering an article in a news app:

@implementation ArticleComponent

+ (instancetype)newWithArticle:(ArticleModel *)article
{
  return [super newWithComponent:
          [CKFlexboxComponent
           newWithView:{}
           size:{}
           style:{
             .direction = CKFlexboxDirectionVertical,
           }
           children:{
             {[HeaderComponent newWithArticle:article]},
             {[MessageComponent newWithMessage:article.message]},
             {[FooterComponent newWithFooter:article.footer]},
           }];
}

@end

Components have three characteristics:

  • Declarative: Instead of implementing -sizeThatFits: and -layoutSubviews and positioning subviews manually, you declare the subcomponents of your component (here, we say “stack them vertically”).

  • Functional: Data flows in one direction. Methods take data models and return totally immutable components. When state changes, ComponentKit re-renders from the root and reconciles the two component trees from the top with as few changes to the view hierarchy as possible.

  • Composable: Here FooterComponent is used in an article, but it could be reused for other UI with a similar footer. Reusing it is a one-liner. CKStackLayoutComponent is inspired by the flexbox model of the web and can easily be used to implement many layouts.