Top Related Projects
A data-driven UICollectionView framework for building fast and flexible lists.
Epoxy is an Android library for building complex screens in a RecyclerView
Cocoa framework and Obj-C dynamism bindings for ReactiveSwift.
A Swift Autolayout DSL for iOS & OS X
Quick Overview
ComponentKit is a declarative UI framework for iOS developed by Facebook. It allows developers to build complex user interfaces using a component-based architecture, focusing on immutability and functional programming concepts to improve performance and maintainability.
Pros
- Improved performance through efficient rendering and layout calculations
- Encourages modular and reusable UI components
- Reduces state management complexity with immutable models
- Facilitates easier testing of UI components
Cons
- Steep learning curve for developers accustomed to traditional iOS development
- Limited adoption outside of Facebook's ecosystem
- Requires a paradigm shift in thinking about UI development
- May be overkill for simpler applications
Code Examples
- Creating a simple component:
@interface GreetingComponent : CKComponent
@property (nonatomic, readonly) NSString *name;
+ (instancetype)newWithName:(NSString *)name;
@end
@implementation GreetingComponent
+ (instancetype)newWithName:(NSString *)name
{
CKComponentScope scope(self);
return [super newWithView:{
[UILabel class],
{
{@selector(setText:), [NSString stringWithFormat:@"Hello, %@!", name]}
}
} size:{}];
}
@end
- Composing components:
@implementation ProfileComponent
+ (instancetype)newWithUser:(User *)user
{
return [super newWithComponent:
[CKFlexboxComponent
newWithView:{}
size:{}
style:{.alignItems = CKFlexboxAlignItemsCenter}
children:{
{[AvatarComponent newWithImageURL:user.avatarURL]},
{[GreetingComponent newWithName:user.name]},
{[BioComponent newWithText:user.bio]}
}]
];
}
@end
- Handling user interactions:
@implementation ButtonComponent
+ (instancetype)newWithTitle:(NSString *)title action:(void (^)())action
{
return [super newWithView:{
[UIButton class],
{
{@selector(setTitle:forState:), title, UIControlStateNormal},
{@selector(addTarget:action:forControlEvents:),
^(UIButton *button){
[button addTarget:self
action:@selector(handleTap:)
forControlEvents:UIControlEventTouchUpInside];
}}
}
} size:{}];
}
+ (void)handleTap:(UIButton *)sender
{
CKComponentActionSend(@selector(onTap), sender, nil);
}
@end
Getting Started
-
Install CocoaPods if you haven't already:
sudo gem install cocoapods
-
Add ComponentKit to your Podfile:
pod 'ComponentKit'
-
Run
pod install
in your project directory. -
Import ComponentKit in your source files:
#import <ComponentKit/ComponentKit.h>
-
Start building your components by subclassing
CKComponent
.
Competitor Comparisons
A data-driven UICollectionView framework for building fast and flexible lists.
Pros of IGListKit
- Simpler API and easier learning curve
- Better performance for large collections with frequent updates
- More flexible diffing algorithm for complex data models
Cons of IGListKit
- Less comprehensive UI component system
- Limited to UICollectionView-based interfaces
- Fewer built-in animations and transitions
Code Comparison
ComponentKit:
CKComponentScope scope(self, [Model class]);
Model *model = scope.state();
return [CKComponent newWithView:{
[UIView class],
{CKComponentViewAttribute::LayerAttribute(@selector(setBackgroundColor:), model.color)}
} size:{}];
IGListKit:
func cellForItem(at index: Int) -> UICollectionViewCell {
let item = dataSource[index]
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
cell.textLabel.text = item.title
return cell
}
Summary
IGListKit focuses on efficient list management and diffing, while ComponentKit provides a more comprehensive UI component system. IGListKit is generally easier to adopt and performs better for large, dynamic collections, but ComponentKit offers more flexibility for complex UI layouts and animations.
Epoxy is an Android library for building complex screens in a RecyclerView
Pros of Epoxy
- Written in Kotlin, offering modern language features and better null safety
- Supports both RecyclerView and ViewPager2, providing more flexibility
- Offers built-in support for view holders and diffing, simplifying list management
Cons of Epoxy
- Steeper learning curve due to its more complex API
- Requires more boilerplate code for simple use cases
- Limited to Android development, unlike ComponentKit's cross-platform support
Code Comparison
Epoxy:
@EpoxyModelClass
abstract class HeaderModel : EpoxyModelWithHolder<HeaderHolder>() {
@EpoxyAttribute lateinit var title: String
override fun bind(holder: HeaderHolder) {
holder.titleView.text = title
}
}
ComponentKit:
+ (instancetype)newWithTitle:(NSString *)title
{
return [super newWithComponent:
[CKLabelComponent
newWithLabelAttributes:{.string = title}
viewAttributes:{.backgroundColor = [UIColor whiteColor]}]];
}
Both frameworks aim to simplify UI component creation, but Epoxy focuses on RecyclerView optimization for Android, while ComponentKit offers a declarative approach for iOS. Epoxy provides more flexibility for Android developers, while ComponentKit excels in performance for complex iOS UIs.
Cocoa framework and Obj-C dynamism bindings for ReactiveSwift.
Pros of ReactiveCocoa
- Offers a more comprehensive reactive programming framework for iOS and macOS
- Provides powerful abstractions for handling asynchronous events and data streams
- Supports both Objective-C and Swift, offering flexibility for different projects
Cons of ReactiveCocoa
- Steeper learning curve due to its more complex concepts and abstractions
- Can lead to increased code complexity if not used judiciously
- May have a higher performance overhead compared to ComponentKit's lightweight approach
Code Comparison
ReactiveCocoa:
let searchResults = searchTextField.reactive.continuousTextValues
.throttle(0.3, on: QueueScheduler.main)
.flatMap(.latest) { text in
return API.search(text)
}
ComponentKit:
CKComponent *component = [CKComponent
newWithView:{[UIView class]}
size:{}
build:^(CKComponentMutableState *state) {
// Component logic here
}];
Summary
ReactiveCocoa is a more comprehensive reactive programming framework, offering powerful abstractions for handling asynchronous events and data streams. It supports both Objective-C and Swift, providing flexibility for different projects. However, it has a steeper learning curve and can lead to increased code complexity if not used carefully.
ComponentKit, on the other hand, focuses on building efficient UI components with a declarative approach. It's generally simpler to use and may have better performance for UI-centric tasks, but it's more limited in scope compared to ReactiveCocoa's broader reactive programming capabilities.
A Swift Autolayout DSL for iOS & OS X
Pros of SnapKit
- Simpler and more intuitive API for creating Auto Layout constraints
- Lightweight and focused solely on layout, making it easier to integrate into existing projects
- Extensive documentation and community support
Cons of SnapKit
- Limited to Auto Layout constraints, lacking ComponentKit's component-based architecture
- May require more code for complex layouts compared to ComponentKit's declarative approach
- Doesn't provide built-in performance optimizations for large, complex UIs
Code Comparison
SnapKit:
view.snp.makeConstraints { make in
make.top.equalTo(superview).offset(20)
make.left.right.equalTo(superview).inset(16)
make.height.equalTo(44)
}
ComponentKit:
[CKComponent
newWithView:{[UIView class]}
size:{}
build:^{
return [CKFlexboxComponent
newWithView:{}
size:{}
style:{.alignItems = CKFlexboxAlignItemsStretch}
children:{
{[CKComponent newWithView:{} size:{.height = 44}]},
}];
}]
This comparison highlights the different approaches to layout and UI construction between SnapKit and ComponentKit. SnapKit focuses on simplifying Auto Layout constraints, while ComponentKit offers a more comprehensive component-based architecture for building complex UIs.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
ComponentKit is a view framework for iOS that is heavily inspired by React. It takes a functional, declarative approach to building UI. It was built to power Facebook's News Feed and is now used throughout the Facebook iOS app.
Quick start
ComponentKit is available to install via Carthage. To get started add the following to your Cartfile:
github "facebook/ComponentKit" ~> 0.30
Opening the Xcode projects
ComponentKit has a few dependencies that need to be installed via Carthage. Before you open any of the Xcode projects in this repo, make sure you run:
carthage checkout
If Carthage isn't installed, you easily install it via Homebrew:
brew install carthage
If you can't use Homebrew, Carthage provides other installation methods.
To get started with the example app:
open Examples/WildeGuess/WildeGuess.xcodeproj
Build and run the WildeGuess
target to try it out!
If you're interested in viewing only the ComponentKit source code in Xcode:
open ComponentKit.xcodeproj
Learn more
- Read the Getting Started guide
- Get the sample projects
- Read the objc.io article by Adam Ernst
- Watch the @Scale talk by Ari Grant
Contributing
See the CONTRIBUTING file for how to help out.
License
ComponentKit is BSD-licensed. We also provide an additional patent grant.
The files in the /Examples directory are licensed under a separate license as specified in each file; documentation is licensed CC-BY-4.0.
Top Related Projects
A data-driven UICollectionView framework for building fast and flexible lists.
Epoxy is an Android library for building complex screens in a RecyclerView
Cocoa framework and Obj-C dynamism bindings for ReactiveSwift.
A Swift Autolayout DSL for iOS & OS X
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot