Philip Shurpik "Architecting React Native app"

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

What are we doing?

Goals before development started
+ Fast to develop with existing JavaScript team
+ Firstly for iOS, then for Android
+ Off...

Sharing code between
platforms

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

Can be shared
+ Business logic
+ Container components
Sharing code between platforms
Can’t be shared
- Platform specific s...

Can be shared
+ Business logic
+ Container components
Sharing code between platforms
Can’t be shared
- Platform specific s...

Let’s make app architecture

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

Let’s start from basement

View and Business Logic separation with Redux
tap tap...
User
Container
Component
Thanks @andrestaltz for inspiration
Stat...

But…
Sometimes...

But not all apps are working offline...

And even don’t forget your maps route screenshot

...we are offline
tap tap...
User
Container
Component
State
Reducer
Middleware
Store
Presentational
Components
View
Action...

We can solve a lot of problems it in few lines of code
+ Persist store state on each change to AsyncStorage
+ Rehydrate st...

Redux-persist
Persist store state on each change to AsyncStorage
Container
Component
State
Reducer
Middleware
Store
Presen...

Redux-persist
Auto rehydrate store on Application start
Container
Component
State
Reducer
Middleware
Store
Presentational
...

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

Viewing data offline
tap tap...
User
Container
Component
Store
Presentational
Components
View
Actions
API
Render
existing ...

Optimistically
render
new data
Creating data offline (optimistic ui)
tap tap...
User
Container
Component
Store
Presentatio...

Hints
Generate item Ids on client

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

Hints
Use storage version to not break anything
while updating app

Hints
Offline-first editing of existing data is much more
complicated:
+ Deal with conflicts
+ Sync challenges
+ Multiple ...

Navigation

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

Navigation approaches
JS-based Navigation
● Navigator
● NavigationExperimental
● react-native-router-flux
● ex-navigation
...

Pros:
+ Works with all latest RN versions
+ Declarative approach:
<Router createReducer={reducerCreate}>
<Scene key="login...

Cons:
- Bad documentation
- Non native JS animations, non native styles
- Unable to smoothly integrate with existing IOS/A...

Pros:
+ Native user experience for Android and IOS platforms
+ Developed and supported by Wix
Cons:
- You need to know Obj...

Performance hints

React Native Threads Communication
JS Thread
(JavaScriptCore)
Native Thread UI (Main) Thread
Async
Bridge
Process Serializ...

How to improve
+ Use shouldComponentUpdate - avoid not needed rendering
(and bridging from JS to UI thread)
+ Run calculat...

Going to production - expected path
Write some JS code

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

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

Unit tests - example
describe('auth.reducer', () => {
it('should set token on login success', () => {
const action = {
typ...

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

Components tests with Enzyme - example
describe('Button.spec.js', () => {
let wrapper, pressHandler;
beforeEach(() => {
pr...

Integrational (end to end) tests
● Javascript tests: Unit and components
● Integrational (end to end) tests:
○ Write in Ja...

Appium - architecture
● Uses Selenium Webdriver
● Appium is an HTTP server that creates and handles WebDriver sessions
● A...

The same tests crossplatform

The same tests crossplatform
React Native uses different props
to access elements on iOS and
Android.
Hope will be fixed s...

Test Example
it('should login', () => getDriver()
.waitAndClickElement('SignIn')
.waitForElement('Login')
.setElementValue...

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

Automate commands
Appium
test
Mobile
TestRunner
Action Server
(serves actions)
Push action
Press execute
button
fetch acti...

Continuous delivery

Continuous delivery with Fastlane
+ Manage certificates and provision profiles (for iOS)
+ Make app builds (for iOS)
+ Sub...

but...
- We need to wait before Apple approves our app
- Users do not update their apps for a long time
- If you update ap...

CodePush
Cloud service with React Native support

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

CodePush features
● Separate Staging and Production versions
● Promoting updates
○ Partially promoting (like 20%)
○ A/B te...

Links
React Native Starter Kit:
https://github.com/philipshurpik/react-native-starter-kit
Performance tuning:
https://medi...

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Илья Климов "О драконах ни слова" by Fwdays 1097 views
Intro to react native by ModusJesus 11715 views
React Native Android. It's easy. by Cameron Moss 374 views
Евгений Жарков "Как быть хорошим фр... by Fwdays 557 views
Алексей Волков "Еще несколько слов... by Fwdays 569 views
Алексей Косинский "React Native v... by Fwdays 272 views

View on Slideshare

1 of 57 Ad

View on Slideshare

1 of 57 Ad