Reason in ReactNative

Open Microphone presentation an Reason conf: https://www.reason-conf.com

Transcript

1. v n o v i c k . c o m ReactNative In ReasonML
2. 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
3. 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
4. v n o v i c k . c o m How we do Reason in React Native
5. v n o v i c k . c o m Architecture
6. 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 !
7. 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
8. v n o v i c k . c o m Project lifecycle
9. v n o v i c k . c o m BsReactNative h;ps:/ /github.com/reasonml-community/bs-react-na9ve
10. v n o v i c k . c o m Getting started ! IniHalise React NaHve app ! Install dependencies
11. v n o v i c k . c o m Configure bsb ! Add bsconfig.json
12. v n o v i c k . c o m Add build and watch scripts ! package.json
13. 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
14. v n o v i c k . c o m Let’s write React Native in Reason
15. v n o v i c k . c o m
16. v n o v i c k . c o m Start our project ! Start bsb in watch mode ! Run ios/android build
17. v n o v i c k . c o m Current status and what to improve
18. 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!
19. v n o v i c k . c o m Why we should use BsReactNative?
20. 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
21. 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