React Native становится все более зрелым фреймворком для создания кросс платформенных мобильных приложений. Доклад основан на нашем опыте создания production приложения - от архитектуры до тестирования и CI. Рассмотрим вопрос переиспользования кода при разработке для разных платформ- что и сколько процентов можно переиспользовать и как этого достичь. Поговорим о том, как можно очень просто сделать offline-first приложение для чтения и создания данных. И чем нам в этом могут помочь Redux и Redux persist. Разберем, как максимально просто сделать навигацию в приложении. И, конечно же, какое production приложение без тестирования и continuous integration? Рассмотрим компонентное тестирование с Enzyme и интеграционное с Appium. А также, как максимально приблизить процесс deploy к тому, чему мы привыкли в web, с помощью CodePush.

2. About me
Creating magic with React Native
in Debitoor/Ciklum :)

3. What are we doing?

4. Goals before development started
+ Fast to develop with existing JavaScript team
+ Firstly for iOS, then for Android
+ Offline first
+ Mostly native look and feel - animations, visual
effects, etc...

5. Sharing code between
platforms

6. It’s possible to share 70-80-90% of code between platforms
Depending on:
+ Architecture
+ Functionality
+ Third-party plugins usage
Sharing code between platforms

7. Can be shared
+ Business logic
+ Container components
Sharing code between platforms
Can’t be shared
- Platform specific stuff
- Different interface
patterns

8. Can be shared
+ Business logic
+ Container components
Sharing code between platforms
Can’t be shared
- Platform specific stuff
- Different interface
patterns
It depends...
● Code that works with plugins
● Presentational Components
(depending on design)

9. Let’s make app architecture

10. * That’s how React/React Native ecosystem looks like :)

11. Let’s start from basement

12. View and Business Logic separation with Redux
tap tap...
User
Container
Component
Thanks @andrestaltz for inspiration
State
Reducer
Middleware
Store
Presentational
Components
View
Actions
Reducer
API
Render data

13. But…
Sometimes...

15. But not all apps are working offline...

16. And even don’t forget your maps route screenshot

17. ...we are offline
tap tap...
User
Container
Component
State
Reducer
Middleware
Store
Presentational
Components
View
Actions
Reducer
API
Render
?
?

18. We can solve a lot of problems it in few lines of code
+ Persist store state on each change to AsyncStorage
+ Rehydrate store on App Start
const store = createStore(reducer, compose(
applyMiddleware(/* ... some middleware */),
autoRehydrate()
));
Using redux-persist enhancer
persistStore(store, {storage: AsyncStorage});

19. Redux-persist
Persist store state on each change to AsyncStorage
Container
Component
State
Reducer
Middleware
Store
Presentational
Components
View
Reducer
Device
AsyncStorage
Render
Actions

20. Redux-persist
Auto rehydrate store on Application start
Container
Component
State
Reducer
Middleware
Store
Presentational
Components
View
Reducer
Device
AsyncStorage
Initial
Render

21. Actually we received
offline-first for viewing data
Let’s improve :)

22. Viewing data offline
tap tap...
User
Container
Component
Store
Presentational
Components
View
Actions
API
Render
existing data
Adding
“offline”
label
Redux-persist
State
Reducer
Middleware
Reducer
Marking
data as
outdated

23. Optimistically
render
new data
Creating data offline (optimistic ui)
tap tap...
User
Container
Component
Store
Presentational
Components
View
Actions
API
Adding
“not sync”
label
Redux-persist
State
Reducer
Middleware
Reducer
Marking data
as not
synchronised

24. Hints
Generate item Ids on client

25. Hints
If you have some data dependencies
invoice depending on client and product
make simple dependency tree for
synchronisation order

26. Hints
Use storage version to not break anything
while updating app

27. Hints
Offline-first editing of existing data is much more
complicated:
+ Deal with conflicts
+ Sync challenges
+ Multiple users challenges
* Do it only if it’s one of the main selling points of your app

28. Navigation

29. Navigator
NavigatorIOS
NavigationExperimental
react-native-router-flux
react-native-navigation
ex-navigation
ex-navigator
react-native-router
react-router-native
react-native-simple-router
react-native-controllers

30. Navigation approaches
JS-based Navigation
● Navigator
● NavigationExperimental
● react-native-router-flux
● ex-navigation
● ...
Native Navigation
● NavigatorIOS
● react-native-navigation
(wix)
● airbnb solution (not yet
opensourced)

31. Pros:
+ Works with all latest RN versions
+ Declarative approach:
<Router createReducer={reducerCreate}>
<Scene key="loginPage" component={LoginPage} title="Login"/>
...
</Router>
+ Can be easily debugged (it’s just JS code)
+ Has good custom extensions support
React-native-router-flux

32. Cons:
- Bad documentation
- Non native JS animations, non native styles
- Unable to smoothly integrate with existing IOS/Android apps
React-native-router-flux

33. Pros:
+ Native user experience for Android and IOS platforms
+ Developed and supported by Wix
Cons:
- You need to know Objective C/Java to debug it/fix issue
- Hard to implement something really custom
- Limited React Native version support
(stable version supports 0.25.1 and experimental 0.37.0)
React-native-navigation

34. Performance hints

35. React Native Threads Communication
JS Thread
(JavaScriptCore)
Native Thread UI (Main) Thread
Async
Bridge
Process Serialize Deserialize
Process
Render
Long
process
Becomes
not
responsive
Process

36. How to improve
+ Use shouldComponentUpdate - avoid not needed rendering
(and bridging from JS to UI thread)
+ Run calculations after animations finish with
InteractionManager.runAfterInteractions
+ Offload animations to UI Thread with Layout Animation
+ If everything is completely wrong - write Native code (we
haven’t experienced such situations)

37. Going to production - expected path
Write some JS code

38. Going to production - actually
Write some JS code
Tests and CI setup example at: https://git.io/rnstk

39. What we need besides JS code
● Javascript tests: Unit and components

40. Unit tests - example
describe('auth.reducer', () => {
it('should set token on login success', () => {
const action = {
type: types.AUTH_LOGIN_SUCCESS,
payload: {token: '111'}
};
expect(auth(INITIAL_STATE, action)).to.be.deep.equal({
...INITIAL_STATE,
token: '111',
loading: false
});
});
});

41. Components testing
+ enzyme
+ react-native-mock
+ chai-enzyme

42. Components tests with Enzyme - example
describe('Button.spec.js', () => {
let wrapper, pressHandler;
beforeEach(() => {
pressHandler = sinon.stub();
wrapper = shallow(<Button onPress={pressHandler}>text</Button>);
});
it('should render text in button', () => {
const text = wrapper.find(Text).first();
expect(text).to.have.prop('children', 'text');
});
it('should handle press', () => {
wrapper.simulate('Press');
expect(pressHandler).to.have.been.calledOnce;
});
});

43. Integrational (end to end) tests
● Javascript tests: Unit and components
● Integrational (end to end) tests:
○ Write in JavaScript - yeah, we are JS developers! :)
○ Run app on simulator
○ Login (check API work)
○ Went through main functionality and check that it works

44. Appium - architecture
● Uses Selenium Webdriver
● Appium is an HTTP server that creates and handles WebDriver sessions
● Appium starts “test case” on device that spawns a server and listen for
proxied commands
Appium test

45. The same tests crossplatform

46. The same tests crossplatform
React Native uses different props
to access elements on iOS and
Android.
Hope will be fixed soon:
https://github.com/facebook/react-
native/pull/9942

47. Test Example
it('should login', () => getDriver()
.waitAndClickElement('SignIn')
.waitForElement('Login')
.setElementValue('Email', EMAIL)
.setElementValue('Password', PASSWORD)
.clickElement('Login')
.waitForElement('Dashboard')
)
* With using of custom methods created with wd.addPromiseChainMethod

48. What about automating custom actions?
Like:
+ Signin
+ Signout
+ Redirect to page
example at: https://git.io/rnstk

49. Automate commands
Appium
test
Mobile
TestRunner
Action Server
(serves actions)
Push action
Press execute
button
fetch action
get action
dispatch action
example at: https://git.io/rnstk

50. Continuous delivery

51. Continuous delivery with Fastlane
+ Manage certificates and provision profiles (for iOS)
+ Make app builds (for iOS)
+ Submits Beta builds to TestFlight / PlayStore alpha track
+ Submits Release builds to AppStore / PlayStore

52. but...
- We need to wait before Apple approves our app
- Users do not update their apps for a long time
- If you update app through appstore it resets user reviews :(
- It’s harder to support different versions of app - especially for
supporters :)
We need to be able to update javascript immediately (like on web)

53. CodePush
Cloud service with React Native support

54. CodePush
Deploy Code updates directly to
users:
code-push release-react MyApp ios
● JS Bundle
● Image assets

55. CodePush features
● Separate Staging and Production versions
● Promoting updates
○ Partially promoting (like 20%)
○ A/B testing
● Rollback updates
○ Auto-rollback if app crashes

56. Links
React Native Starter Kit:
https://github.com/philipshurpik/react-native-starter-kit
Performance tuning:
https://medium.com/@talkol/performance-limitations-of-react-native-an
d-how-to-overcome-them-947630d7f440#.2dsdud7yr
https://facebook.github.io/react-native/docs/android-ui-performance.ht
ml

57. Questions
skype: philipshurpik
twitter: philipshurpik
https://github.com/philipshurpik