ComponentKitand

React NativePaul Taykalo, ComponentKit and React Native, Stanfy, 2015 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

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 3

React.jsPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 4

React.jsSimple“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

React.jsDeclarative“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

React.jsImplementation» Just the UI

» Virtual DOM*

» Data Flow

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 7

Few months later...

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 8

Awesome! It works!Let's do it Native

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 9

UIWebView?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 10

UIWebView?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 11

PhoneGap + React.js

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 12

Native vs Javascript

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 13

(HTML + JS) vs (UIKit + ObjC)

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 14

Screw IT!Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 15

Let's do it native!

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 16

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 17

ComponentKit

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 18

ComponentKit» UIKit

» Components

» One-Way DataFlow

» ObjectiveC++

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 19

Write once, run everywhereJava, Sun Microsystems

Learn once, use everywhereReact, Facebook

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 20

React.jsvar 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

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

Declarative vs Imperative

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 23

DeclarativeWrite what result do you want

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 24

ImperativeWrite how to get the result

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 25

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

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

A bit complex example imperative

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 28

ImmutabilityOne does not simply mutate component

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 29

StateLess*Components tend to be stateless

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 30

Virtual "DOM"in ComponentKitHow to render all stuff that user written

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 31

Component tree-> (Magic)-> UIKit tree

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 32

Component is not an UIViewNot Every Component backed up with UIView

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 33

ComponentKit Layout

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 34

Autolayout ? Manual Layout?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 35

Autolayout ? Manual Layout?

FlexBox*Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 36

ComponentKitis awesomePaul Taykalo, ComponentKit and React Native, Stanfy, 2015 37

ComponentKit downsides

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 38

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

Let's back to Javascript

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 40

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 41

React Native

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 42

Oh, I know!Javascript + HTML again?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 43

React NativeNative CodeBridgeJavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 44

React NativeNative CodeBridgeJavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 45

React NativeNative CodeBridgeJavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 46

React NativeNative CodeBridgeJavascriptPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 47

Nah, It cannot be fast!

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 48

Nah, It cannot be fast!It cannot run faster that native

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 49

Nah, It renders in UIWebView

It's slow!Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 50

Nah, It renders in UIWebView

It's slow!It uses UIKit for renderingPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 51

Nah, I know Native -> JS communicationis one-threaded and synchronous

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 52

Nah, I know Native -> JS communicationis one-threaded and synchronousReact Native uses calls batchingReact Native is fully asynchronous

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 53

Nah, I know that...

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 54

Stop it!Decide for yourselfReact Native Playground iOS AppPaul Taykalo, ComponentKit and React Native, Stanfy, 2015 55

React Native Playground iOS App

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 56

React Native Template

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 57

React Native Development

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 58

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

Ok, I get itWhat is there any cons?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 60

React Native» Animations

» Native Components

» Complex gesture recognizers

» Extensive computations

» new Paradigm

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 61

Where to start from?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 62

Where to start from?» M(V)VM

» React.js

» ComponentKit

» React Native

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 63

So can Javascript be fast?

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 64

So can Javascript be fast?It can be fast enough :)

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 65

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

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

Component Kit and React Native

by Paul Taykalo, Stanfy

Paul Taykalo, ComponentKit and React Native, Stanfy, 2015 68