3. Why we started using
react native?
S A M E U S E R F L O W
N O P L A T F O R M S P E C I F I C U S E - C A S E
H I G H P R O D U C T V E L O C I T Y
E N G I N E E R I N G B A N D W I D T H
4. Marketing
vs Product
App - most
converting
platform with
repeating users
Mobile web - an
entry to new
customers
Know your
platform
challenges
10. Routing
Challenges
M A K E U R L S
Screen name to url
Next screen props
Take data from store
Make url and push route
L O A D U R L S
First thing first, even
before components get
mounted.
Parse url and update
store.
Store is the source of
truth
U P D A T E U R L S
Emit event
Make url and replace
11. webp image browser
support
A P P F I R S T
Components always import
webp images.
W E B P A C K L O A D E R
Output webp image with
fallback format.
E X T E N D I M A G E
C O M P O N E N T
Use webp image is support
otherwise use fallback
format.
12. Rethink
Lifecycle &
Store
C O M P O N E N T W I L L M O U N T
Server side rendering - no async
call please.
A P P R O U T E S T A C K V S W E B
R O U T E
Data management is important.
W E B R E L O A D I S P A I N F U L
App flow is controlled but in web
user can just reload at any point in
time. So urls are the source of
truth for the state of your app.
13. Component
challenges
ALERT API
Custom implementation using react
native signature and window.alert
SENSITIVE
TOUCHABLE
COMPONENTS
Hack it with onClick
IMAGE COMPONENT
Add support of webp and non-webp
handling.
14. Take aways
M A K E P R O D U C T F O R A L L
U S E R S
M O R E Y O U R E U S E M O R E
S C A L A B L E I S T H E S O L U T I O N
W I T H G R E A T P O W E R C O M E S
G R E A T R E S P O N S I B I L I T Y
15. YES! Soon To Be
Open Sourced.
W H E R E W E A I M T O B E