an ios developer's perspective on react native

33
An iOS Developer's Perspective on React Native Aleksandras Smirnovas cocoa.lt 2016-04-25

Upload: aleksandras-smirnovas

Post on 26-Jan-2017

287 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: An iOS Developer's Perspective on React Native

An iOS Developer's Perspective on React

NativeAleksandras Smirnovas

cocoa.lt 2016-04-25

Page 2: An iOS Developer's Perspective on React Native

Agenda• My experience

• Why React Native

• How it works

• Flex

• Demo

Page 3: An iOS Developer's Perspective on React Native

My experience

• My first native iOS app on iOS 4.3

• 10+ native iOS apps

• Objective-C and Swift

• Freelance mobile/web API developer since 2009

Page 4: An iOS Developer's Perspective on React Native

Why React Native?

• Learn once, write anywhere

• Consistent developer experience

• Clients want to support multiple platforms

Universal Windows Platform and Samsung (Tizen)Apps built for the Universal Windows Platform can target Windows 10 desktop, mobile, Xbox, and HoloLens.

Page 5: An iOS Developer's Perspective on React Native

How it works

• JavaScriptCore

• Node.js

• Watchman (A file watching service)

• Flow (A static type checker for JS)

Page 6: An iOS Developer's Perspective on React Native

IDE or Xcode I miss you • Terminal to `npm start`

• Chrome for the debugger

• atom.io + nuclide.io to edit code

• Xcode to run the project and simulator

Page 7: An iOS Developer's Perspective on React Native

Install and run

• npm install -g react-native-cli

• react-native init AwesomeProject

• react-native run-ios

Page 8: An iOS Developer's Perspective on React Native

Files

Page 9: An iOS Developer's Perspective on React Native

Available componentsActivityIndicatorIOS

DatePickerIOS

DrawerLayoutAndroid

Image

ListView

MapView

Modal

Navigator

NavigatorIOS

PickerIOS

Picker

ProgressBarAndroid

ProgressViewIOS

RefreshControl

ScrollView

SegmentedControlIOS

Slider

SliderIOS

StatusBar

Switch

TabBarIOS

TabBarIOS.Item

Text

TextInput

ToolbarAndroid

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

View

ViewPagerAndroid

WebView

RN 0.24

Page 10: An iOS Developer's Perspective on React Native

Available APISActionSheetIOS

Alert

AlertIOS

Animated

AppRegistry

AppStateIOS

AppState

AsyncStorage

BackAndroid

CameraRoll

Clipboard

DatePickerAndroid

Dimensions

IntentAndroid

InteractionManager

LayoutAnimation

Linking

LinkingIOS

NativeMethodsMixin

NetInfo

PanResponder

PixelRatio

PushNotificationIOS

StatusBarIOS

StyleSheet

TimePickerAndroid

ToastAndroid

VibrationIOS

Vibration

RN 0.24

Page 11: An iOS Developer's Perspective on React Native

Components

import React, { View, Text, Image } from 'react-native';

<View>

<Text>Hello world</Text>

<Image source={require('image!avatar')} />

</View>

Page 12: An iOS Developer's Perspective on React Native

Custom Components

import HeaderView from ‘../Components/HeaderView';

<HeaderView

text=“Hello Wold”

image=“http://cocoa.lt/avatar” />

Page 13: An iOS Developer's Perspective on React Native

Custom Components

import React, { View, Text, Image } from 'react-native';

<View>

<Text>{this.props.text}</Text>

<Image source={{uri: this.props.image}} />

</View>

Page 14: An iOS Developer's Perspective on React Native

Style

import React, { View, Text, Image } from 'react-native';

<View>

<Text style={styles.headline}>

{this.props.text}

</Text>

<Image style={styles.avatar} source={{uri: this.props.image}} />

</View>

Page 15: An iOS Developer's Perspective on React Native

Styleconst styles = StyleSheet.create({

item: {

width: 100,

height: 100,

borderRadius: 50,

backgroundColor: 'darkgray',

textAlign: 'center',

fontSize: 18

}

});

Page 16: An iOS Developer's Perspective on React Native

Flexbox vs Autolayout Constraints

• flexDirection:'row', 'column'

• justifyContent: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'

• alignItems:'flex-start', 'flex-end', 'center', 'stretch'

• flexWrap:'wrap', 'nowrap'

• alignSelf: 'auto', 'flex-start', 'flex-end', 'center', ‘stretch'

• flex: number

Page 17: An iOS Developer's Perspective on React Native

flexDirection column row

Page 18: An iOS Developer's Perspective on React Native

justifyContent flex-start center flex-end

Page 19: An iOS Developer's Perspective on React Native

alignItems flex-start center flex-end

Page 20: An iOS Developer's Perspective on React Native

alignSelf: center

Page 21: An iOS Developer's Perspective on React Native

flexDirection: row flexWrap: wrap

Page 22: An iOS Developer's Perspective on React Native

flexDirection: column justifyContent: center

alignItems: center

Page 23: An iOS Developer's Perspective on React Native

flexDirection: column justifyContent: space-between

alignItems: center

Page 24: An iOS Developer's Perspective on React Native

flexDirection: column justifyContent: space-around

alignItems: center

Page 25: An iOS Developer's Perspective on React Native

flex: number

Page 26: An iOS Developer's Perspective on React Native

Tools: Inspector

Page 27: An iOS Developer's Perspective on React Native

Tools

Page 28: An iOS Developer's Perspective on React Native

Tools: Perf Monitor

Page 29: An iOS Developer's Perspective on React Native

pod, Carthage, npm

• package.json

• Podfile

• left-pad incident

Page 30: An iOS Developer's Perspective on React Native

Redux / Flex

• Redux is a predictable state container for JavaScript apps.

• Flux is the application architecture for building UI

Page 31: An iOS Developer's Perspective on React Native

Redux / Flex

• Single source of truth

• State is read-only

• Reducers take the previous state and an action, and return the next state

Page 32: An iOS Developer's Perspective on React Native

Demo

Page 33: An iOS Developer's Perspective on React Native

Thank you

Questions?

@saleksandras