Philosophy

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. CKFlexboxComponent is inspired by the flexbox model of the web and can easily be used to implement many layouts.