react native. bridge from web to mobile. intro

React-NativeМост от WEB к Mobile

Igor IzraylevychS-PRO http://s-pro.io/

Виды мобильной разработки

native:- ios( swift, objective-c )- android (java, android sdk)

cross platform:- webview & PhoneGap- jQuery Mobile- Ionic + PhoneGap- xamarin- react-native

WebView ;) Native!

Почему React-native?- кросплатформенно- быстро- порог вхождения ниже чем в нативной рзработке- javascript- легко перейти из веб- если у вас есть веб проект, не сложно сделать к нему мобильное

приложение

React & React-native?

- template engine, native elements

- <View> == <div>

- <Text> == <span>

- <Image /> == <img />

- ...etc

class MyComponent extends Component { render() { return ( <View> <Image source={{uri: 'http://fb.com/123.png'}} /> <View> <Text> React Native </Text> <Text> Build high quality mobile apps using React </Text> </View> </View> ); }}

UI & blocks

New York

Steve

Paul

friend name

city

submit

Mike

Los Angeles

Friends header

divider

list item

form

class Friends extends Component { render() { return ( <Container> <Header> <Title>Friends</Title> </Header>

<List> <Divider>New York</Divider> <ListItem> <Text>Steve</Text> </ListItem> <Divider>Los Angeles</Divider> <ListItem> <Text>Paul</Text> </ListItem> <ListItem> <Text>Mike</Text> </ListItem> </List>

<AddFriendForm> <TextInput /> <TextInput /> <Button>Submit</Button> </AddFriendForm> </Container>

Жизнь будет ярче с Redux

Redux Store rules the app

Store

Component Component Component

Жизнь будет ярче с Redux

New York

Steve

Paul

friend name

city

submit

Mike

Los Angeles

Friends

{ FRIENDS: [{ name: 'Steve', cityId: '0' },{ name: 'Paul', cityId: '1' },{ name: 'Mike', cityId: '1' }], CITIES: [{ id: 0, name: 'New York' },{ id: 1, name: 'Los Angeles' }]}

Redux - хранит состояние приложения

Добавим нового друга в состояние

New York

Steve

Paul

friend name

city

submit

Mike

Los Angeles

Friends { USERS: [{ name: 'Steve', cityId: '0' },{ name: 'Paul', cityId: '1' },{ name: 'Mike', cityId: '1' },{ name: Monica, cityId: '1' }]], CITIES: [{ id: 0, name: 'New York' },{ id: 1, name: 'Los Angeles' }]}

Monica

Monica

React + Redux = love

Кейсы

#1 согласовать с дизайнером элементы UI

#2 заранее выбрать список библиотек

- проверить зависимости

- убедитесь, что они работают

- они точно подходят?

эти скорее всего пригодятся:

- redux + immutable

- redux-form

- native-base

- apisauce, axios

http://github.com/jondot/awesome-react-native

#3 верстка

- сначала верстаем, потом подключаем логику

- пишем jss

- используем переменные

- наследуем стили

#4 use redux

- http://redux.js.org/

#5 планирование State и redux

- очень мощная грабля

- state === DB

- если не спланировал, готовься в какой-то момент переписать все или почти все

#6 redux

Componentsynced with

state

Action State

USE {this.props}! DO NOT USE {this.state}

#7 Actions in Actions

Componentsynced with

state

Action State

#8 forms

- use redux-forms

#9 ios & android

SearchBar.ios.js

SearchBar.android.js

import SearchBar from './SearchBar’;

- мега популярен!

- большое комьюнити, много ответов, всегда найдете решение

- Комфортно и круто

- супер, когда разработка действительно приносит удовольствие

Выводы