Заказчиков всегда привлекают кроссплатформенные решения, потому что они разрабатываются в 2 раза быстрее. Но их же всегда волнует вопрос UX: сможет ли кроссплатформа предоставить такую же отзывчивость и красоту, как нативное решение? React Native говорит - да. Мы покажем, как за полчаса начать писать на React Native под две мобильные платформы сразу, обеспечивая при этом нативность внешнего вида и отзывчивость приложения.

1. React Native:
Crossplatform fast dive
1

2. About me
— Vladimir Ivanov - Lead software engineer
— More than 6 years in Android development
— Wide interest in Mobile technologies
— Happy father of a wonderful son
2

3. Why not crossplatform?
1. Lack of specialists
2. UX concerns
3. God damn javascript
3

4. Why crossplatform?
1. Cheap development
2. because rapid
3. 3x faster than native approach
4. Native UX, at last
4

5. How is was to dive a year ago?
1. Install node
2. Install android/ios sdk
3. For android: install java, download platforms,
emulators, build tools
4. Learn React Native
5. ???
6. PROFIT!11
5

6. How it is now?
1. Install node
2. Learn React Native
3. create-react-native-app
4. Done
6

7. Let’s dive
7

8. Simple start
$ brew install node
8

9. Simple start
$ brew install node
$ npm install -g create-react-native-app
9

10. Simple start
$ brew install node
$ npm install -g create-react-native-app
$ create-react-native-app github
10

11. Simple start
$ brew install node
$ npm install -g create-react-native-app
$ create-react-native-app github
$ cd github
11

12. Simple start
$ brew install node
$ npm install -g create-react-native-app
$ create-react-native-app github
$ cd github
$ npm start
12

13. What we get
$ ls -l
13

14. What have we got
$ ls -l
App.js
App.test.js
README.md
app.json
node_modules
package.json
14

15. App.js
import React from 'react';
import { Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, world!</Text>
</View>
);
}
}
15

16. 16

17. App.js
import React from 'react';
17

18. App.js
import React from 'react’;
import { Text, View } from 'react-native';
18

19. App.js
import React from 'react’;
import { Text, View } from 'react-native’;
export default class App extends React.Component {
}
19

20. App.js
import React from 'react’;
import { Text, View } from 'react-native’;
export default class App extends React.Component {
render() {
}
}
20

21. App.js
import React from 'react’;
import { Text, View } from 'react-native’;
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, world!</Text>
</View>
);
}
}
21

22. App.js
import React from 'react';
import { Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, world!</Text>
</View>
);
}
}
22

23. App.js
<View style={{ flex: 1, justifyContent: 'center', alignItems:
'center' }}>
<View style={styles.container}>
23

24. App.js
return (
<View style={styles.container}>
…
</View>
);
…
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
};
24

25. App.js
<Text style={{ color: '#F00' }}>
Hello, world!
</Text>
25

26. Let’s make
something more
interesting
26

27. How?
1. React page is a component tree
2. Each piece of UI should be a component
27

28. 4 main components
1. Logo
2. Inputs
3. Submit button
4. Optional message
28

29. Logo component
import React from 'react';
import {Image, View} from "react-native";
export default Logo = () => (
<View style={{alignItems: 'center'}}>
<Image
source={require('./../../../GitHub-Logo.png')}
/>
</View>
);
29

30. Logo component
export default Logo = () => (
…
);
30

31. Components can be
1. Functional - no lifecycle, no state, only JSX
2. Class based - lifecycle, state, usage in redux, etc.
31

32. Logo component
export default Logo = () => (
<View style={{alignItems: 'center'}}>
<Image
source={require('./../../../GitHub-Logo.png')}
/>
</View>
);
32

33. 33

34. Login inputs
1. Render login input
2. Render password input(as hidden)
3. Pass somehow login and password to submit
function
34

35. Login inputs
import React from 'react';
import {View} from ‘react-native’;
import {FormInput} from 'react-native-elements';
export default LoginInputs = ({ onChangeValue }) => (
<View style={{ margin: 16 }}>
<FormInput
placeholder='login'
onChangeText={(value) => {
onChangeValue('login', value);
}}
/>
<FormInput
secureTextEntry
placeholder='password'
onChangeText={(value) => {
onChangeValue('password', value);
}}
/>
</View>
);
35

36. Login inputs
import React from 'react';
import {View} from ‘react-native’;
import {FormInput} from 'react-native-elements';
36

37. Login inputs
import React from 'react';
import {View} from ‘react-native’;
import {FormInput} from 'react-native-elements’;
37

38. Login inputs
import React from 'react’;
import {View} from ‘react-native’;
import {FormInput} from 'react-native-elements’;
38

39. Login inputs
export default LoginInputs = ({ onChangeValue }) => (
<View style={{ margin: 16 }}>
<FormInput
placeholder='login'
onChangeText={(value) => {
onChangeValue('login', value);
}}
/>
<FormInput
secureTextEntry
placeholder='password'
onChangeText={(value) => {
onChangeValue('password', value);
}}
/>
</View>
);
39

40. Login inputs
export default LoginInputs = ({ onChangeValue }) => (
…
);
40

41. Login inputs
export default LoginInputs = ({ onChangeValue }) => (
<View style={{ margin: 16 }}>
<FormInput
placeholder='login'
onChangeText={(value) => {
onChangeValue('login', value);
}}
/>
<FormInput
secureTextEntry
placeholder='password'
onChangeText={(value) => {
onChangeValue('password', value);
}}
/>
</View>);
);
41

42. Login inputs
export default LoginInputs = ({ onChangeValue }) => (
<View style={{ margin: 16 }}>
{ … }
</View>);
);
42

43. Login inputs
<View style={{ margin: 16 }}>
<FormInput
placeholder='login'
onChangeText={(value) => {
onChangeValue('login', value);
}}
/>
<FormInput
secureTextEntry
placeholder='password'
onChangeText={(value) => {
onChangeValue('password', value);
}}
/>
</View>);
43

44. Login inputs
<View style={{ margin: 16 }}>
<FormInput
placeholder='login'
onChangeText={(value) => {
onChangeValue('login', value);
}}
/>
<FormInput />
</View>);
44

45. Login inputs
<View style={{ margin: 16 }}>
<FormInput />
<FormInput
secureTextEntry
placeholder='password'
onChangeText={(value) => {
onChangeValue('password', value);
}}
/>
</View>);
45

46. LoginScreen.js
render() {
const {container} = styles;
return (
<View style={container}>
<Logo />
<LoginInputs …/>
</View>
)
}
46

47. 47

48. Login inputs
Value propagation
48

49. Component state
1. Each class based component has state
2. State is no more than a javascript object
3. Updating state is async, but this is not really
important now
4. Updating state happens with this.setState() function
49

50. Saving login and password to screen state
…
class LoginScreen extends Component {
state = { error: null };
…
}
50

51. Saving login and password to screen state
…
class LoginScreen extends Component {
state = { error: null };
onChangeValue = (prop, value) => {
this.setState({ [prop]: value });
};
…
}
51

52. Saving login and password to screen state
{ login: ‘v’ }
{ login: ‘vl’ }
{ login: ‘vli’ }
…
{ login: ‘vlivanov’, password: ’1’ }
{ login: ‘vlivanov’, password: ’12’ }
…
{ login: ‘vlivanov’, password: ’123abc123’ }
52

53. Submit button
<Button
raised
title='LOGIN'
backgroundColor="#00F"
icon={{name: 'cached'}}
onPress={this.doLogin}
/>
53

54. LoginScreen.js
render() {
return (
<View style={container}>
<Logo />
<LoginInputs onChangeValue={…}/>
<Button
…
/>
</View>
)
}
54

55. 55

56. Submit button
<Button
…
onPress={this.doLogin}
/>
56

57. Submit button
doLogin = async () => {
const { login, password } = this.state;
let result = await loginAsync(login, password);
this.setState({
loggedIn: result.error === undefined,
error: result.error
});
};
57

58. Submit button
doLogin = async () => {
const { login, password } = this.state;
…
};
58

59. Submit button
doLogin = async () => {
const { login, password } = this.state;
let result = await loginAsync(login, password);
…
};
59

60. Submit button
doLogin = async () => {
const { login, password } = this.state;
let result = await loginAsync(login, password);
this.setState({
loggedIn: result.error === undefined,
error: result.error
});
};
60

61. loginAsync
export const loginAsync = async (login, password) => {
let base64 = encode(`${login}:${password}`);
try {
let result = await fetch('https://api.github.com/user', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Basic ' + base64
},
});
if (result.status === 200) {
return {
user: JSON.parse(result._bodyInit),
auth: base64
};
} else {
return { error: `Failed to login with ${result.status}` };
}
} catch (error) {
console.log("[LoginActions] error = " + JSON.stringify(error));
return { error: `Failed to login with ${result.error}` };
}
};
61

62. loginAsync
export const loginAsync = async (login, password) => {
let base64 = encode(`${login}:${password}`);
…
};
62

63. loginAsync
export const loginAsync = async (login, password) => {
let base64 = encode(`${login}:${password}`);
try {
let result = await fetch('https://api.github.com/user', …);
…
} catch (error) {
…
}
};
63

64. loginAsync
export const loginAsync = async (login, password) => {
let base64 = encode(`${login}:${password}`);
try {
let result = await fetch('https://api.github.com/user', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Basic ' + base64
},
});
…
} catch (error) {
…
}
};
64

65. loginAsync
export const loginAsync = async (login, password) => {
let base64 = …
try {
let result = await fetch('https://api.github.com/user', …);
if (result.status === 200) {
return {
user: JSON.parse(result._bodyInit),
auth: base64
};
}
…
} catch (error) {
…
}
};
65

66. loginAsync
export const loginAsync = async (login, password) => {
let base64 = …;
try {
let result = await fetch('https://api.github.com/user', …);
if (result.status === 200) {
return { … }
} else {
return { error: `Failed to login with ${result.status}` };
}
} catch (error) {
return { error: `Failed to login with ${error}` };
}
};
66

67. LoginScreen.js
render() {
const {container, successMessage, errorMessage} = styles;
return (
<View style={container}>
<Logo />
<LoginInputs …/>
<Button
…
/>
{this.state.loggedIn && <Text style={successMessage}>Logged in!</Text>}
{this.state.error && <Text style={errorMessage}>{this.state.error}</Text>}
</View>
)
}
67

68. doLogin
doLogin = async () => {
const { login, password } = this.state;
let result = await loginAsync(login, password);
this.setState({
loggedIn: result.error === undefined,
error: result.error
});
};
68

69. 69

70. Немного статистики
— 153 строки
— 1 Час времени разработки
70

71. Полезные ссылки
— https://facebook.github.io/react-native/docs/getting-
started.html
— https://www.udemy.com/the-complete-react-native-
and-redux-course/
— https://expo.io
— https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
71

72. Вопросы?
72