ComponenKit and React Native
7 likes1,246 views
The document compares ComponentKit and React Native for building native iOS apps. It discusses that ComponentKit uses a declarative approach like React.js but only supports iOS, while React Native uses JavaScript to build apps for iOS, Android and the web using a native UI bridge. The document considers pros and cons of both, ultimately concluding that React Native's ability to build cross-platform using JavaScript may make it preferable for many developers due to its broader reach despite some tradeoffs in performance for complex native tasks.
![ComponentKit
@implementation HelloMessageComponent
+ (instancetype)newWithName:(NSString*)name {
return [super newWithComponent:
[CKLabelComponent
newWithLabelAttributes:{
.string = [NSString stringWithFormat:@"Hello %@", @name],
}
viewAttributes:{}
];
}
@end
Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 22](https://image.slidesharecdn.com/componentkitandreactnative-150715105814-lva1-app6891/85/ComponenKit-and-React-Native-22-320.jpg)
![Abitcomplex example declarative
+ (instancetype)newWithStory:(FBStory *)story
{
return [super newWithComponent:
[FBStackLayoutComponent
newWithView:{}
size:{}
style:{.alignItems = FBStackLayoutAlignItemsStretch}
children:{
{[FBHeaderComponent newWithStory:story]},
{[FBMessageComponent newWithStory:story]},
{[FBAttachmentComponent newWithStory:story]},
{[FBLikeBarComponent newWithStory:story]},
}]];
}
Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 26](https://image.slidesharecdn.com/componentkitandreactnative-150715105814-lva1-app6891/85/ComponenKit-and-React-Native-26-320.jpg)
![Abitcomplex example imperative
@implementation FBStoryView
{
FBHeaderView *_headerView;
FBMessageView *_messageView;
FBAttachmentView *_attachmentView;
FBLikeBarView *_likeBarView;
}
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
_headerView = [[FBHeaderView alloc] init];
_messageView = [[FBMessageView alloc] init];
_attachmentView = [[FBAttachmentView alloc] init];
_likeBarView = [[FBLikeBarView alloc] init];
[self addSubview:_headerView];
[self addSubview:_messageView];
[self addSubview:_attachmentView];
[self addSubview:_likeBarView];
}
return self;
}
- (CGSize)sizeThatFits:(CGSize)size
{
return CGSizeMake(size.width,
[_headerView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height
+ [_messageView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height
+ [_attachmentView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height
+ [_likeBarView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height);
}
- (void)layoutSubviews
{
CGFloat width = [self bounds].size.width;
CGFloat y = 0;
CGFloat headerHeight = [_headerView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height;
[_headerView setFrame:CGRectMake(0, y, width, headerHeight)];
y += headerHeight;
CGFloat messageHeight = [_messageView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height;
[_messageView setFrame:CGRectMake(0, y, width, messageHeight)];
y += messageHeight;
CGFloat attachmentHeight = [_attachmentView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height;
[_attachmentView setFrame:CGRectMake(0, y, width, attachmentHeight)];
y += attachmentHeight;
CGFloat likeBarHeight = [_likeBarView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height;
[_likeBarView setFrame:CGRectMake(0, y, width, likeBarHeight)];
y += likeBarHeight;
}
Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 27](https://image.slidesharecdn.com/componentkitandreactnative-150715105814-lva1-app6891/85/ComponenKit-and-React-Native-27-320.jpg)
ComponenKit and React Native
- 1. ComponentKit and ReactNative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 1
- 2. Whatis itabout?» React.js, ComponentKit, React native » Native vs Javascript » UI, do you speak it? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 2
- 3. Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 3
- 4. React.jsPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 4
- 5. React.js Simple “Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.” Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 5
- 6. React.js Declarative “When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.” Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 6
- 7. React.js Implementation » Just the UI » Virtual DOM* » Data Flow Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 7
- 8. Fewmonths later... Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 8
- 9. Awesome! Itworks! Let's do itNative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 9
- 10. UIWebView? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 10
- 11. UIWebView? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 11
- 12. PhoneGap + React.js Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 12
- 13. NativevsJavascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 13
- 14. (HTML+JS)vs (UIKit+ ObjC) Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 14
- 15. ScrewIT! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 15
- 16. Let's do itnative! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 16
- 17. Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 17
- 18. ComponentKit Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 18
- 19. ComponentKit» UIKit » Components » One-Way DataFlow » ObjectiveC++ Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 19
- 20. Write once, run everywhere Java, Sun Microsystems Learn once, use everywhere React, Facebook Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 20
- 21. React.js var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render( <HelloMessage name="John" />, document.getElementById('container') ); Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 21
- 22. ComponentKit @implementation HelloMessageComponent + (instancetype)newWithName:(NSString*)name { return [super newWithComponent: [CKLabelComponent newWithLabelAttributes:{ .string = [NSString stringWithFormat:@"Hello %@", @name], } viewAttributes:{} ]; } @end Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 22
- 23. Declarativevs Imperative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 23
- 24. DeclarativeWrite what result do you want Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 24
- 25. ImperativeWrite howto getthe result Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 25
- 26. Abitcomplex example declarative + (instancetype)newWithStory:(FBStory *)story { return [super newWithComponent: [FBStackLayoutComponent newWithView:{} size:{} style:{.alignItems = FBStackLayoutAlignItemsStretch} children:{ {[FBHeaderComponent newWithStory:story]}, {[FBMessageComponent newWithStory:story]}, {[FBAttachmentComponent newWithStory:story]}, {[FBLikeBarComponent newWithStory:story]}, }]]; } Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 26
- 27. Abitcomplex example imperative @implementation FBStoryView { FBHeaderView *_headerView; FBMessageView *_messageView; FBAttachmentView *_attachmentView; FBLikeBarView *_likeBarView; } - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { _headerView = [[FBHeaderView alloc] init]; _messageView = [[FBMessageView alloc] init]; _attachmentView = [[FBAttachmentView alloc] init]; _likeBarView = [[FBLikeBarView alloc] init]; [self addSubview:_headerView]; [self addSubview:_messageView]; [self addSubview:_attachmentView]; [self addSubview:_likeBarView]; } return self; } - (CGSize)sizeThatFits:(CGSize)size { return CGSizeMake(size.width, [_headerView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height + [_messageView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height + [_attachmentView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height + [_likeBarView sizeThatFits:CGSizeMake(size.width, CGFLOAT_MAX)].height); } - (void)layoutSubviews { CGFloat width = [self bounds].size.width; CGFloat y = 0; CGFloat headerHeight = [_headerView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height; [_headerView setFrame:CGRectMake(0, y, width, headerHeight)]; y += headerHeight; CGFloat messageHeight = [_messageView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height; [_messageView setFrame:CGRectMake(0, y, width, messageHeight)]; y += messageHeight; CGFloat attachmentHeight = [_attachmentView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height; [_attachmentView setFrame:CGRectMake(0, y, width, attachmentHeight)]; y += attachmentHeight; CGFloat likeBarHeight = [_likeBarView sizeThatFits:CGSizeMake(width, CGFLOAT_MAX)].height; [_likeBarView setFrame:CGRectMake(0, y, width, likeBarHeight)]; y += likeBarHeight; } Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 27
- 28. Abitcomplex example imperative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 28
- 29. ImmutabilityOne does notsimply mutate component Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 29
- 30. StateLess*Componentstendto be stateless Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 30
- 31. Virtual"DOM" in ComponentKitHowto render allstuffthatuser written Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 31
- 32. Componenttree -> (Magic) -> UIKittree Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 32
- 33. Component is notan UIView Not EveryComponentbacked upwith UIView Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 33
- 34. ComponentKit Layout Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 34
- 35. Autolayout? ManualLayout? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 35
- 36. Autolayout?ManualLayout? FlexBox* Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 36
- 37. ComponentKit isawesome Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 37
- 38. ComponentKit downsides Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 38
- 39. ComponentKit downsides » Native (I cannot write for Android) » I need to compile it each time I change something » I cannot share the code Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 39
- 40. Let's backtoJavascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 40
- 41. Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 41
- 42. ReactNative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 42
- 43. Oh, I know!Javascript+ HTMLagain? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 43
- 44. React Native NativeCode Bridge JavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 44
- 45. React Native NativeCode Bridge JavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 45
- 46. React Native NativeCode Bridge JavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 46
- 47. React Native NativeCode Bridge JavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 47
- 48. Nah, Itcannotbe fast! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 48
- 49. Nah,Itcannotbefast!Itcannotrun fasterthatnative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 49
- 50. Nah, Itrenders in UIWebView It's slow! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 50
- 51. Nah,ItrendersinUIWebView It'sslow!Ituses UIKit for rendering Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 51
- 52. Nah, I knowNative ->JS communication is one-threadedand synchronous Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 52
- 53. Nah,IknowNative->JScommunication isone-threadedandsynchronous ReactNative uses calls batching ReactNative is fullyasynchronous Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 53
- 54. Nah, I knowthat... Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 54
- 55. Stopit!Decide foryourself ReactNative Playground iOSAppPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 55
- 56. ReactNative Playground iOSApp Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 56
- 57. ReactNativeTemplate Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 57
- 58. ReactNative Development Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 58
- 59. ReactNative Development » Live Reload » Debugging Javascript in Browers » FPS Monitor (Javscrip and UI) » Inspect UI Elements (UIView deubgging) » Profiling » Modules Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 59
- 60. Ok, I getitWhatisthereanycons? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 60
- 61. ReactNative » Animations » Native Components » Complex gesture recognizers » Extensive computations » new Paradigm Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 61
- 62. Whereto start from? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 62
- 63. Whereto start from? » M(V)VM » React.js » ComponentKit » React Native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 63
- 64. So canJavascriptbe fast? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 64
- 65. SocanJavascriptbefast? Itcan be fastenough :) Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 65
- 66. Links » https://code.facebook.com/posts/1014532261909640/ react-native-bringing-modern-web-techniques-to- mobile/ » http://www.reactnative.com/ » https://developer.mozilla.org/en-US/docs/Web/ Guide/CSS/Flexible_boxes » http://www.objc.io/issues/22-scale/facebook/ » https://code.facebook.com/posts/1014532261909640/ Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 66
- 67. Links » https://speakerdeck.com/frantic/react-native- under-the-hood » http://www.objc.io/issues/22-scale/facebook/ Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 67
- 68. ComponentKitand ReactNative byPaulTaykalo, Stanfy Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 68