React, ComponentKit and React Native

History of React, ComponentKit, React Native, when should I use it, how it works under the hood

Transcript

1. ComponentKit and React Native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 1
2. What is it about? » 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.js Paul 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. Few months later... Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 8
9. Awesome! It works! Let's do it Native 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. Native vs Javascript 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. Screw IT! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 15
16. Let's do it native! 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. Declarative vs Imperative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 23
24. Declarative Write what result do you want Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 24
25. Imperative Write how to get the result Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 25
26. A bit complex 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. A bit complex 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. A bit complex example imperative Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 28
29. Immutability One does not simply mutate component Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 29
30. StateLess* Components tend to be stateless Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 30
31. Virtual "DOM" in ComponentKit How to render all stuff that user written Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 31
32. Component tree -> (Magic) -> UIKit tree Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 32
33. Component is not an UIView Not Every Component backed up with UIView Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 33
34. ComponentKit Layout Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 34
35. Autolayout ? Manual Layout? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 35
36. Autolayout ? Manual Layout? FlexBox* Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 36
37. ComponentKit is awesome 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 back to Javascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 40
41. Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 41
42. React Native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 42
43. Oh, I know! Javascript + HTML again? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 43
44. React Native Native Code Bridge Javascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 44
45. React Native Native Code Bridge Javascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 45
46. React Native Native Code Bridge Javascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 46
47. React Native Native Code Bridge Javascript Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 47
48. Nah, It cannot be fast! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 48
49. Nah, It cannot be fast! It cannot run faster that native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 49
50. Nah, It renders in UIWebView It's slow! Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 50
51. Nah, It renders in UIWebView It's slow! It uses UIKit for rendering Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 51
52. Nah, I know Native -> JS communication is one-threaded and synchronous Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 52
53. Nah, I know Native -> JS communication is one-threaded and synchronous React Native uses calls batching React Native is fully asynchronous Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 53
54. Nah, I know that... Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 54
55. Stop it! Decide for yourself React Native Playground iOS App Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 55
56. React Native Playground iOS App Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 56
57. React Native Template Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 57
58. React Native Development Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 58
59. React Native 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 get it What is there any cons? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 60
61. React Native » Animations » Native Components » Complex gesture recognizers » Extensive computations » new Paradigm Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 61
62. Where to start from? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 62
63. Where to start from? » M(V)VM » React.js » ComponentKit » React Native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 63
64. So can Javascript be fast? Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 64
65. So can Javascript be fast? It can be fast enough :) 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. Component Kit and React Native by Paul Taykalo, Stanfy Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 68