Des apps multiplateformes avec reason-react-native

Transcript

1. ! 1 Multi-platforms apps with reason-react-native

2. ! 2 Mathieu Acthernoene @zoontek

3. ! 3 ⏱ Disclaimer 30 min is short I will

   be brief on non-primary points

4. ! 4 React Native A mobile framework to build user

   interfaces Supported platforms : iOS, Android & UWP

5. ! 5 React Native <View /> Credit : Formidable labs

   UIView android.view.View

6. ! 6 ReasonML Alternate syntax + tooling for OCaml Looks

   like modern JavaScript

7. ! 7 let a = 1; /* int */ let

   b = 1.0; /* float */ let c = "Hello"; /* string */ let d = 'Z'; /* char */ let e = true; /* boolean */ let f = [1, 2, 3]; /* list(int) */ let g = [|1, 2, 3|]; /* array(int) */ let h = Some(x); /* option('a) */ let i = (); /* unit */ ReasonML

8. ! 8 type user = { name: string, age: int,

   }; let me = { name: “Matthieu", age: 27, }; let meLater = { ...me, age: 28, }; ReasonML

9. ! 9 ReasonML let sayHi = name X> Js.log("Hi "

   Z[ name Z[ “!”); let add = (a, b) X> a +. b;

10. ! 10 BuckleScript OCaml to ES5 JS compiler Supports both

    syntaxes

11. ! 11 UIView android.view.View compile time runtime time

12. ! 12 $ Let’s create a project

13. ! 13

14. ! 14 Highly complex backend A Google Cloud Function which

    run Puppeteer every hour (with Cloud Scheduler) and store a JSON file

15. ! 15 { "dates": [ "2019-05-19", "2019-05-20", // … ],

    "pools": [ { "id": "alfred-nakache", "name": "Alfred Nakache", "coordinates": { "latitude": 48.871687, "longitude": 2.378887 }, "hours": [ [["08:00", "18:00"]], [], [["07:00", "08:30"], ["11:30", "13:30"], ["16:30", "18:00"]] // … Backend

16. ! 16 $ brew install node yarn watchman $ yarn

    global add react-native-cli reason-cli@latest-macos Things you should install — or —

17. ! 17 $ react-native init ParisPiscine && cd ParisPiscine

18. ! 18 $ yarn add --dev bs-platform $ yarn add

    reason-react $ yarn add git://github.com/reasonml-community/bs- react-native#756f2f34fefeed1c3d1ed389330278ecd0434aca $ yarn add bs-fetch @glennsl/bs-json # extras $ touch bsconfig.json

19. ! 19 // bsconfig.json { "name": "paris-piscine", "version": "0.1.0", "suffix":

    ".bs.js", "refmt": 3, "warnings": { "error": "+101" }, "reason": { "react-jsx": 3 }, "bs-dependencies": [ "@glennsl/bs-json", "bs-fetch", "reason-react", "bs-react-native-monorepo/reason-react-native" ], // …

20. ! 20 // …bsconfig.json "package-specs": { "module": "es6", "in-source": true

    }, "sources": { "dir": "src", "subdirs": true }, "js-post-build": { "cmd": "./node_modules/bs-react-native-monorepo/ git-monorepo-usage-trick" } }

21. ! 21 // package.json { "name": "paris-piscine", "version": "0.0.1", "scripts":

    { "bs:clean": "bsb -clean-world", "bs:start": "bsb -make-world -w", "bs:build": "bsb -make-world", "rn:start": "node node_modules/react-native/ local-cli/cli.js start" }, // …

22. ! 22 $ rm -rf .buckconfig .flowconfig __tests__ App.js $

    mkdir src && touch src/App.re A bit of cleanup

23. ! 23 // src/App.re open ReactNative; let styles = StyleSheet.create(

    Style.{ "container": style(~flex=1., ~alignItems=`center, ~justifyContent=`center, ()), "text": style(~fontSize=24., ()), }, );

24. ! 24 // …src/App.re [@react.component] let make = () X>

    { <View style=styles##container> <Text style=styles##text> "Hello LilleFP”u>React.string </Text> </View>; };

25. ! 25 // src/App.bs.js // Generated by BUCKLESCRIPT VERSION 5.0.3

    import * as React from "react"; import * as ReactNative from "react-native"; var styles = ReactNative.StyleSheet.create({ container: { alignItems: “center”, flex: 1, justifyContent: “center”, }, text: { fontSize: 24 }, });

26. ! 26 // …src/App.bs.js function App(Props) { return React.createElement(ReactNative.View, {

    style: styles.container, children: React.createElement(ReactNative.Text, { style: styles.text, children: "Hello LilleFP", }), }); } var make = App; export { styles, make };

27. ! 27 // index.js import { AppRegistry } from "react-native";

    import { make as App } from "./src/App.bs.js"; import { name as appName } from "./app.json"; AppRegistry.registerComponent(appName, () X> App);

28. ! 28

29. ! 29

30. ! 30 // Pools.re let url = "http://localhost:8080"; type coordinates

    = { latitude: float, longitude: float, }; type pool = {coordinates}; type fetchedData = { dates: array(string), pools: array(pool), }; Fetching & decoding data

31. ! 31 // …Pools.re module Decode = { open Json.Decode;

    let coordinates = json X> { latitude: field("latitude", float, json), longitude: field("longitude", float, json), }; let pool = json X> {coordinates: field("coordinates", coordinates, json)}; let fetchedData = json X> { dates: field("dates", array(string), json), pools: field("pools", array(pool), json), }; }; Fetching & decoding data

32. ! 32 // …Pools.re let fetchData = () X> Js.Promise.(

    Fetch.fetch(url) yz then_(Fetch.Response.json) yz then_(json X> Decode.fetchedData(json)u>resolve) ); Fetching & decoding data

33. ! 33 // App.re open ReactNative; open Belt; type state

    = | Loading | Error | Loaded(Pools.fetchedData); type action = | FetchData | ReceiveError | ReceiveData(Pools.fetchedData); Displaying data

34. ! 34 // …App.re let styles = StyleSheet.create( Style.{ "container":

    style(~flex=1.,~alignItems=`center, ~justifyContent=`center, ()), }, ); Displaying data

35. ! 35 // …App.re [@react.component] let make = () X>

    { let (state, dispatch) = React.useReducer( (state, action) X> switch (action) { | FetchData X> Loading | ReceiveError X> Error | ReceiveData(data) X> Loaded(data) }, Loading, ); Displaying data

36. ! 36 // …App.re [@react.component] let make = () X>

    { // … let displayFetchingError = () X> Alert.alert( ~title={js|Une erreur est survenue|js}, ~message={js|Impossible d'accéder aux données|js}, (), ); Displaying data

37. ! 37 React.useEffect1(() X> { Js.Promise.( Pools.fetchData() yz then_((data: Pools.fetchedData)

    X> dispatch(ReceiveData(data))u>resolve ) yz catch(_error X> { displayFetchingError(); dispatch(ReceiveError)u>resolve; }) yz ignore ); None; }, [||]); Displaying data

38. ! 38 <View style=styles##container> {switch (state) { | Loading X>

    <ActivityIndicator size=ActivityIndicator.Size.large /> | Error X> React.null | Loaded(data) X> switch (data.pools[0]) { | Some(pool) X> <Text> {("First pool: " Z[ pool.name)u>React.string} </Text> | None X> <Text> "No pool found"u>React.string </Text> } }} </View> Displaying data

39. ! 39 All of this is cool, yeah But how

    do I use existing libs ?

40. ! 40 $ yarn add react-navigation react-native-gesture-handler react-native-maps $ react-native

    link react-native-gesture-handler $ react-native link react-native-maps Let’s add some deps

41. ! 41 // src/vendor/ReactNavigation.re type stackNavigatorConfig; type navigationProp('routeParams, 'pushedParams) =

    { . [@bs.meth] "push": (string, 'pushedParams) X> unit, [@bs.meth] "goBack": unit X> unit, "state": { . "key": string, "routeName": string, "params": 'routeParams, }, }; Binding example n°1 (react-navigation)

42. ! 42 // …src/vendor/ReactNavigation.re [@bs.obj] external stackNavigatorConfig: (~headerMode: [@bs.string] [

    | `float | `screen | `none]=?, unit) X> stackNavigatorConfig = ""; [@bs.module "react-navigation"] external createStackNavigator: (Js.t('a), stackNavigatorConfig) X> React.element = ""; [@bs.module "react-navigation"] external createAppContainer: React.element X> React.element = ""; Binding example n°1 (react-navigation)

43. ! 43 // src/vendor/MapView.re open ReactNative; include NativeElement; type region;

    [@bs.obj] external region: ( ~latitude: float, ~longitude: float, ~latitudeDelta: float, ~longitudeDelta: float ) X> region = ""; Binding example n°2 (react-native-maps)

44. ! 44 // …src/vendor/MapView.re [@react.component] [@bs.module "react-native-maps"] external make: (

    ~ref: ref=?, ~style: Style.t=?, ~region: region=?, ~children: React.element=? ) X> React.element = "default"; Binding example n°2 (react-native-maps)

45. ! 45 & Diving in the full codebase

46. ! 46 Thank you ! Questions ?