Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React, ComponentKit and React Native

React, ComponentKit and React Native

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

Paul Taykalo

July 06, 2015
Tweet

More Decks by Paul Taykalo

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. React.js Implementation » Just the UI » Virtual DOM* »

    Data Flow Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 7
  5. ComponentKit » UIKit » Components » One-Way DataFlow » ObjectiveC++

    Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 19
  6. Write once, run everywhere Java, Sun Microsystems Learn once, use

    everywhere React, Facebook Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 20
  7. 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
  8. 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
  9. 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
  10. 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
  11. Virtual "DOM" in ComponentKit How to render all stuff that

    user written Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 31
  12. Component is not an UIView Not Every Component backed up

    with UIView Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 33
  13. 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
  14. Nah, It cannot be fast! It cannot run faster that

    native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 49
  15. Nah, It renders in UIWebView It's slow! It uses UIKit

    for rendering Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 51
  16. Nah, I know Native -> JS communication is one-threaded and

    synchronous Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 52
  17. 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
  18. Stop it! Decide for yourself React Native Playground iOS App

    Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 55
  19. 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
  20. Ok, I get it What is there any cons? Paul

    Taykalo, ComponentKit and React Native, Stanfy, 2015 60
  21. React Native » Animations » Native Components » Complex gesture

    recognizers » Extensive computations » new Paradigm Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 61
  22. Where to start from? » M(V)VM » React.js » ComponentKit

    » React Native Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 63
  23. So can Javascript be fast? It can be fast enough

    :) Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 65
  24. 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
  25. Component Kit and React Native by Paul Taykalo, Stanfy Paul

    Taykalo, ComponentKit and React Native, Stanfy, 2015 68