Разработка быстро работающих мобильных приложений с нативным интерфейсом на React/ReactNative.

1. React Native By Example

3. Android
App
iOS
App
Java / Kotlin Swift / Objective-CLanguage
XML XIBViews
Android Studio
Grandle
XCODETools

4.  Instant Platform API access
 Third party libraries
 Great user experience
Pros:
Cons:
 TWO DIFFERENT APPLICATIONS
 TWO DIFFERENT TEAMS
 TWICE NUMBER OF BUGS

5. Flutter
Hybrid Approach!
Apache Cordova

6.  Portability
 It is just JavaScript, HTML5, CSS3
 Re-use the codebase from WebApplication
WebView
 Usually poor performance
 Bad user experience

7.  Requires C#
 Runs on Mono VM
 Stable with good community
 Supported by Microsoft
 Xamarin 2.0 was released in February 2013

8.  Dart language
 Reactive framework
 Supported by Google
Flutter
 Still beta

9. Learn once, write anywhere

10.  JavaScript (ES6+)
 React (JSX)
 Native UI
 Flexbox
 CSS
 Polyfills

11. const WebApp = () => (
<div>Hello World!</div>
)
import {View} from 'react-native’
const MobileApp = () => (
<View><Text>Hello World!</Text></View>
)

12. const WebApp = () => (
<div>Hello World!</div>
)
REACT REACT-DOM
BROWSER
DOM

13. import {View} from 'react-native’
const MobileApp = () => (
<View><Text>Hello World!</Text></View>
)
REACT REACT-NATIVE
iOS Native
Components
Android Native
Components

14. REACT
REACT-DOM
REACT-NATIVE
REACT-VR
REACT-ART
…
REACT-NATIVE-MAC-OS
REACT-NATIVE-WINDOWS
REACT-D3
REACT-PIXI
Virtual DOM
RENDERERS

15. react-native init MyProject
react-native run-android
react-native run-ios

17.  Minimal "Time to Hello World”
 Easy share your code
 One Build Tool
create-react-native-app MyProject
 No native modules

18. import React, { Component } from 'react';
import {Text, View, Button} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
<Button
title="Press Me!"
onPress={() => {alert('Thanks dude!')}}
/>
</View>
);
}
}

20. Component styles
<Touchable
onPress={this.onServerSignInPress}
style={{marginTop: 24}}
>
<View style={s.signInButton}>
<Text style={s.signInButtonText}>
SING IN
</Text>
</View>
</Touchable>

21. SignInButtonStyles.js
import {StyleSheet} from 'react-native'
export default StyleSheet.create({
signInButton: {
width: 280,
height: 48,
borderRadius: 24,
backgroundColor: "#59acfa",
alignItems: 'center’,
justifyContent: 'center’
},
signInButtonText: {
color: "#FFF",
fontWeight: 'bold’,
fontSize: 14
}
})

23. MAIN UI
THREAD
NATIVE
MODULES
JavaScript
THREAD
“LAYOUT”
THREAD
Start
JS Startup & Render
Calc Layout
Create
Views

24. JavaScript Native
The Bridge
(MessageQueue.js)
JSCore / V8 (VM)
Single Thread
ObjectiveC / Java
Main UI Thread

25. import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
MessageQueue.spy((info)=>console.log("event!", info))

26. <View></View>
new android.view.View(context); [[UIView alloc] init]
RCTViewManagerReactViewManager

27. View
Button
FlatList
Image
ListView
Modal
Picker
ScrollView
WebView
Slider
StatusBar
Switch
Text
TextInput
Touchable
…
DatePickerIOS
DrawerLayoutAndroid
MaskedViewIOS
NavigatorIOS
ProgressBarAndroid
ProgressViewIOS
TabBarIOS
…

29. <View style={{
flex: 1,
marginTop: 50,
marginBottom: 30,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{width: 100, height: 100, backgroundColor: '#2ecc71'}} />
<View style={{width: 100, height: 100, backgroundColor: '#27ae60'}} />
<View style={{width: 100, height: 100, backgroundColor: '#16a085'}} />
</View>

30. • A cross-platform layout engine
• Written in C/C++
• Compatible with Android / iOS
Yoga

31. Network
Clipboard
StyleSheet
Vibration
Platform
AsyncStorage
Systrace
Geolocation
AppState
…

32. try {
const response = await fetch('https://example.com/json')
const posts = await response.json()
this.setState({loading: false, posts})
} catch (e) {
this.setState({loading: false, error: true})
}
HTTP Request example

34. Add an open-source component
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient colors={['#2a5743', '#14456f']}>
<View />
</LinearGradient>
1) yarn add react-native-linear-gradient
2) react-native link

35. react-native link
android/app/build.gradle
android/app/src/…/MainApplication.java
android/settings.gradle
ios/MyProject.xcodeproj/project.pbxproj

37. • No CSS transitions
• No CSS animations
React Native Animations
• Animated.{View,Image,Text,ScrollView}
• Animated.Value()
• Animated.createAnimatedComponent(View)

38. Animated API
state = {
fadeAnim: new Animated.Value(0),
}
render() {
return (
<Animated.View style={{opacity: this.state.fadeAnim}}>
{this.props.children}
</Animated.View>
);
}

39. Animated API
componentDidMount() {
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 1000,
}
).start();
} useNativeDriver: true, // <-- Add this

40. ViewPager.js
ScrollView
ViewPagerAndroid

41. • MyComponent.android.js
• MyComponent.ios.js
• Platform.OS === ‘android’
• Platform.OS === ‘ios'
Platform specific code

42. PJSIP
• SIP stack
• Audio/Video streaming
• Compatible with Android / iOS

43. • Get the configuration from server
• Through the bridge pass this configuration to
Native Module
• Once library is initialized emit events like new
incoming call
PjSIP binding for React Native

44. Call Native code from JavaScript
import {NativeModules} from 'react-native';
NativeModules.PjSipModule.methodName(configuration, (successful, data) => {
// …
});

45. Native Module
@interface PjSipModule : NSObject <RCTBridgeModule>
 RCT_EXPORT_MODULE();
 RCT_EXPORT_METHOD(method)
 (NSDictionary *)constantsToExport;

46. Native Module
RCT_EXPORT_METHOD(answerCall: (int) callId callback:(RCTResponseSenderBlock) callback) {
PjSipEndpoint* endpoint = [PjSipEndpoint instance];
PjSipCall *call = [endpoint findCall:callId];
if (call) {
[call answer];
[endpoint pauseParallelCalls:call]; // put other calls on hold
callback(@[@TRUE]);
} else {
callback(@[@FALSE, @"Call not found"]);
}
}

47. public class PjSipModule extends ReactContextBaseJavaModule
Native Module
 @ReactMethod
 public Map<String, Object> getConstants()

48. Native Module
@ReactMethod
public void answerCall(int callId, Callback callback) {
int callbackId = receiver.register(callback);
Intent intent = PjActions.createAnswerCallIntent(callbackId, callId, getReactApplicationContext());
getReactApplicationContext().startService(intent);
}

49. Subscribe to Native Event
import {DeviceEventEmitter} from 'react-native';
DeviceEventEmitter.addListener(‘eventName', (data) => {
// ...
});

50. Emit events from Native Module
[self emmitEvent:@”eventName"
body:[call toJsonDictionary]];
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, data);

51. RemoteVideoView
LocalVideoView

52. import {requireNativeComponent} from 'react-native';
export default requireNativeComponent('PjSipRemoveVideoView');
RemoteVideoView.js
import RemoteVideoView from 'react-native-pjsip/src/RemoteVideoView’
export const VideoCall = ({media}) => (
<View style={s.container}>
<RemoteVideoView
windowId={media.videoStream.windowId}
objectFit="contain"
/>
</View>
)
VideoCall.js

53. Native Component
@interface PjSipRemoteVideoViewManager : RCTViewManager
RCT_EXPORT_VIEW_PROPERTY(name, type)
RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass)

54. @implementation PjSipRemoteVideoViewManager
RCT_EXPORT_MODULE()
-(UIView *) view {
return [[PjSipVideo alloc] init];
}
RCT_CUSTOM_VIEW_PROPERTY(windowId, NSString, PjSipVideo) {
pjsua_vid_win_id windowId = [[RCTConvert NSNumber:json] intValue];
[view setWindowId:windowId];
}
@end
Native Component

55. public class PjSipRemoteVideoViewManager extends
SimpleViewManager<PjSipRemoteVideo>
Native Component
 @ReactProp(name = "windowId")
 createViewInstance(ThemedReactContext reactContext)

56. Native Component
public class PjSipRemoteVideoViewManager extends SimpleViewManager<PjSipRemoteVideo> {
@Override public String getName() {
return "PjSipRemoteVideoView";
}
@ReactProp(name = "windowId")
public void setWindowId(PjSipRemoteVideo view, int windowId) {
view.setWindowId(windowId);
}
@Override protected PjSipRemoteVideo createViewInstance(ThemedReactContext reactContext) {
return new PjSipRemoteVideo(reactContext);
}
}

58. Navigation
• Navigator
• react-
community/react-
navigation
JavaScript Native
• wix/react-native-
navigation
• airbnb/native-
navigation

59. • Removed since 0.44.3
• Pure JS implementation
• Lack of native look and feel
• Poor performance between screen
change
Navigator

60.  Native implementation
 Different React roots for each Screen
 Great UX and cool features
 Non-trivial installation and further RN
upgrades
 Still doesn’t cover all props and APIs
that platform has
wix/react-native-navigation

61. cd ./ios && xcodebuild -scheme Carusto -configuration Release archive -
archivePath ./Jenkins.xcarchive
cd ./ios && xcodebuild -exportArchive -archivePath "./Jenkins.xcarchive" -
exportPath "./Jenkins.ipa" -exportOptionsPlist "./Jenkins.plist
Android APK
iOS IPA
cd ./android && ./gradlew assembleRelease

62. • JS errors in production will crash the app
• Non trivial way to get the logs from real
device
Catch the bugs in production

63. Just re-use the same knowledge form your Web
experience (e.g. Jest, Enzyme, etc..)
Unit Testing

65.  Quality of open-source components
 Frequent updates
 Non critical bugs
Summary

66.  Fast prototyping and development for two
platforms
 React / JS environment
 Share the codebase with web-app
 Native look and feel
Summary

67. Thank You!