Slide 1

Slide 1 text

v n o v i c k . c o m ReactNative In ReasonML

Slide 2

Slide 2 text

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