v n o v i c k . c o m
Vladimir Novick
S o f t w a r e A r c h i t e c t & C o n s u l t a n t
Web, Mobile, Virtual Reality, Augmented Reality, Mixed
Reality & Internet of Things
@VladimirNovick
Slide 3
Slide 3 text
v n o v i c k . c o m
https:/
/goo.gl/mYiVmF
React Native build
mobile apps with
JavaScript
w
Your go-to guide to creating native iOS
and Android mobile applications using
React and JavaScript
Slide 4
Slide 4 text
v n o v i c k . c o m
How we do Reason in
React Native
Slide 5
Slide 5 text
v n o v i c k . c o m
Architecture
Slide 6
Slide 6 text
v n o v i c k . c o m
Threading model
! Main Thread - layout, measuring, drawing
Shadow thread - calculates layout changes
!
! JS thread - event loop execuHng js code and sending
batched updates before next frame renders (60fps)
NaHve modules - plaNorm apis
!
Slide 7
Slide 7 text
v n o v i c k . c o m
Execution flow
Start
Main Thread
JS thread
Shadow thread
Na9ve
Modules
Layout
React
Render
JS
Startup
Native
Code
Slide 8
Slide 8 text
v n o v i c k . c o m
Project lifecycle
Slide 9
Slide 9 text
v n o v i c k . c o m
BsReactNative
h;ps:/
/github.com/reasonml-community/bs-react-na9ve
Slide 10
Slide 10 text
v n o v i c k . c o m
Getting started
! IniHalise React NaHve app
! Install dependencies
Slide 11
Slide 11 text
v n o v i c k . c o m
Configure
bsb
! Add bsconfig.json
Slide 12
Slide 12 text
v n o v i c k . c o m
Add build and watch scripts
! package.json
Slide 13
Slide 13 text
v n o v i c k . c o m
Setting our app endpoint
! Create “re” folder
! Add app.re file
! Remove App.js from the root
! In index.js import compiled app.js file
Slide 14
Slide 14 text
v n o v i c k . c o m
Let’s write React Native
in Reason
Slide 15
Slide 15 text
v n o v i c k . c o m
Slide 16
Slide 16 text
v n o v i c k . c o m
Start our project
! Start bsb in watch mode
! Run ios/android build
Slide 17
Slide 17 text
v n o v i c k . c o m
Current status and what
to improve
Slide 18
Slide 18 text
v n o v i c k . c o m
! Not all APIs covered - hVps:/
/github.com/reasonml-community/bs-react-
naHve/blob/master/STATUS.md
! Warnings on Js.Boolean.to_js_boolean
! Styles are not unified (measurement units
differ) float/Pts etc
! No Docs at all hence low adopHon!
! No Docs at all hence low adopHon!
Slide 19
Slide 19 text
v n o v i c k . c o m
Why we should use
BsReactNative?
Slide 20
Slide 20 text
v n o v i c k . c o m
! All ReasonML benefits
! GraphQL has wide adopHon especially when dealing with mobile apps and
with Reason it works really well
! Most of mobile apps in React NaHve are wriVen with TS and Flow. Let’s
write in Reason
! ReasonablyTyped to convert from TS/Flow to
Reason
Slide 21
Slide 21 text
v n o v i c k . c o m
Thanks
! Basicskeleton: hVps:/
/github.com/vnovick/react-naHve-reason-skeleton
! BsReactNaHve: hVps:/
/github.com/reasonml-community/bs-react-naHve
! Slides: hVps:/
/speakerdeck.com/vnovick/reason-in-reactnaHve