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.

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