Decoupling Drupal with React Native - We build mobile apps backed by Drupal

so thank you for coming today and thank you for a coupon also put me on the spot okay today we are talking about a topic which is the deep cup to pour in relative so we saw last last year I make a presentation and the demo didn't work so this time I think that I can improvise it by shipping today water everybody before the presentation so that is what I did so I view an application for two preneur and it's just now available on App Store and Play Store so you can download it you can follow the session so today we are talking about the technology be hired and how we do it so first my name is Robert I'm not working at a bonding web and when stack developer I have been doing to post since 10th year and I have been working with school for the last two years USB from last Ian tuna and react native from last year and you can find more information about me on the opponent web website on my personal site which is the Gatsby such first I would like to talk a bit about it windy web so we are a web agency in Montreux we have about more than 10 years experience working with Drupal and we are very community-centric we've organized a lot of event like troop amitabh UX makeup meetup so if you if you want to get more information about all the activity of Eve only web feel free to check it out on our website here are some pictures of us this is the environment of work at evolving web we have fish we have food we have friend we have we smile and sometime we work okay so let's get started it's about D cup trouble with react native about this project I want to be a cross-platform mobile application that consume data from tripping or RG and that will be a very simple application where you can see on information of Troop or on the information of the event like the location the list of session the schedule and the list of sponsors and I said the goal for myself on this application is to minimize the server development which mean I would like to use the JSON API data as much as possible the system the system we have the server which is the true port horse on panda on site and we have the mobile application where I used react navigation Redux reductant animate API and Fastlane I will talk more about it later today let's go with the server so on the server I so the website the true porn or website is developed by hosta interactive so a few months ago I sent an email to foster asking if I can access the website so that like they they give me an environment so that I can work with this so that's that's how I can access that website and then I what I need to do is just to go there install a few more to do some configuration and then I can get onto data from there easily so first let's talk about JSON API have any one of you never touch JSON API only one of you a pure Libya have any one of you never touch JSON API so okay so I will have a quick expansion so first JSON API what is JSON API it is like aspect if ocation for api and Jason so let's say you need to be a d-cup system and the back-end developer we admin with the front-end developer on the way how they want to output data so let's say you want to struck it this way you want to structure data this way or the front-end we want to stroke it this way so that they can pass it easily so they will just keep arguing about that so trace on API is aspect if occation there's no equipment anymore because you need to follow the scripture / json api and in group o we have a json api mojo what it does is we provide an API that Center on the troop or an entity type and bundle so that after anybody module you can access on the information of Drupal entity like our of the box like you can just go on JSON API in your article and put in the UUID and then you get all the information of that not like some the title the body the creation time the user create the question with JSON API is outside the box it will not give you the relation data for example you have a content type in that content type we have a few an image field that reference to a few entity so JSON API will not give you it right away you need to use the include reference the include reference is can you see my Ponte no can you see okay so in order to get the information of the few image in the North article here and we need to get include few image by this and just an API will return you the object of the node and the object of the image and then after that you we need to normalize it yourself you need to manipulate the data the way that you want so that you can display it on that you can find out more information about the way to fetch resource from JSON API in this link here the next part of the server setup is how can I query the image with image style because I don't want to get the original image which is huge so in order to do that I need three module the first one is JSON API extra which will help you to customize that API override the results and enhance the fit enhanced the few output the second thing I need is the module name customer a consumer the consumer will help you to identify where you come from because we are browsing data of coop aside from the application so the tuple need to know who you are what is the wrong what is the type of the content that you can access the third one is consumer image style that will help you to override the output of the image view and so that you can choose okay I want this view to output at this small image there's a reference link here to the very very well detailed article about how to use the consumer images style you can check it out so first let's talk about that JSON API extra mojo to configure just go to this link admin config service JSON API resource type and select a result that you want to override in my case it will be the note article and I want to override a few image in that note article and I can show you the screenshot of how it look like right here so when you go to that link you go to that feel user pictures here you will see the images die and then you can select to output the speaker big and speaker small through the JSON API let's let's go up to the consumer Morimoto we need to do some configuration so that it can output the image style that you need to go and to do that you need to go to the admin of SOI admin can fix service and consumer by default consumer will create a default consumer you can use it if you want or if you are more secure about which application can consume your data you can create a new consumer and defy the restriction on that consumer only for example you can set the road for that consumer you can set that consumer to access the image of Speaker small only not everything so you can convict that kind of thing and if you create a new consumer then you need to make a call with the ex consumer ID where you need to put a UUID of the consumer here so that it understand where you come from and what you need and it will answer you the output of that the output upon the setup will be like this but if Oh but if ok sorry API will not give you the image image speaker pic and speakers here but with only setup that we have done it will give you this link and then you can use it in your application without blowing up the data so let's go to the next part sorry I have a question am I am I going too fast or you want me to slow down or something thank you I will publish this lie after this yeah so let's go to the second part which is quite interesting which is the mobile app so when I when I decide to build the app I think about building it in native code which is Swift because I like it but I think our iPhone user but I think many people in many many of us are using the Android phone so need to be or something for them and react native is a good solution because you can be cross-platform for Android and iOS at the same time you can share the same business logic in react code and then be read in to application and have any one of you view any react native application before are you familiar with the technology yeah I think it has changed a lot okay so for this application because the the the time life for this app this project this small project is very sensitive and it's very strapped so I want to keep everything very simple and I don't want to use any like in a third-party market that can cause some problems so I try to use the big pocket only so in this one I use react native the main framework and use react navigation for swiping around the screen are using Redux for state management I use pre-doctoral for passing home to the API and spend some time on the animate a PR in react native and lastly I will talk about the fast lane which is a way to view and release the app the first part which is the react navigation so you are using iPhone here we need to go you always see something like the bottom top bar like this or sometimes you will see something like this in the top and you can swipe between the the screen and then sometimes you can see the back button here when you click back it will swipe back to the previous screen so on up that can be done using reactive navigation so the good thing with react navigation is the framework is very mature the second thing is we that will give your application the same look and few because they work really well with the native code and on the animation on your chest I work perfectly with the react navigation react navigation come with different type of navigator so the first one is stack navigator which is I'm using here stack navigator stack navigator will give you the going back button here on the second screen the bottom bar navigator will give you the five top at the bottom here and the material top bar navigator I think they named it because that is something from Google that will give you the June priority the next part of the project is the react Redux so we are Redux is like technology to help you build application in JavaScript it happy to build the predictable state in application because as you know in in in mobile app it's very important to know the state about what Delta you already load and what they tell you want to load in the next step so Redux is that it kind of that thing at the predictable state container for that can react with that is just the official biding for Redux and on the right hand side we have an a screenshot what does it mean when we say predictable state predictable stage as you can see here I'm doing one action which is the FET article sassette oh no one action which is fetch particle and in that we can see that the previous stage that will say the article we don't have anything inside our article and after doing the action to fetch article with success we will have some information in that object we have the last batch which is the tons time when you watch it that you fetch it when the data are received by the app and we have the nut with which is the information out on the node that we get from the server the next part is just the reactant so reactant we have you create a middleware so that you can connect to the server because this is this is just a definition that I get directly from Wikipedia but I think it's quite important to understand what it is so it will delay the calculation delay on the action afterward Ponty when the resume is successful get so we reactant we do or for you it will dispatch the action took on the server and wait until when you get the data either it is success or failure and then you can do the next thing which is display the message or display the content and together with that I use the Chasen api normalizer it to restructure data from the server the the image on the right hand side is the way that I implement it in our my car as you can see I have the cone API which is a proper function that come to the server and the endpoint that iconic chase an API not article I also pass in some parameter like I get the 10 latest one and one of them need to be published and include image in here after that I will get the Chasen which is the output of the JSON API but right out of the box I cannot use it right way I need to normalize it I need to restructure it the way that I can put it into the screen so I use the normalized function from the JSON API normalizer and I do some data manipulation in here when on the fetch has been successful I will dispatch a message saying that the fetch has been done successfully and here is the data I go updated the UI or if there's a problem I will I will dispatch the Fowler message so this is what happened when we do those three actions so in the reacting reacting there's a convention to have three dispatch whenever you make a call the first one is to announce to everybody have about it fetch the data right now it is dispatch fetch article beginning it has nothing to do but I just updated stay of the app to tell that you are doing in one action the second part the second step is to dispatch the fetch API success if you get the data in this case on the right hand side I have fetch data correctly successfully and I got the pay lot in the action here and then it will be passed to the stage of the app if we have a problem with the GUI dispatcher not a message for the fella talking about the normalized JSON API so how to say so imagine that each of us is of the border here is an odd object and you want to send three note from this one to that point that is what you do when you call the server getting the three note let's say so the trupo instead of shipping the whole body like this it will be cost effective it's not good so they decided to cut out your arm cut out your leg and put on your arm into the basket of the arm put on your neck into the basket of the leg and put your body into another basket so and then it shaped the three basket all together into the convey the destination so the app is the convey the destination we get the three basket how can we glue everything together and that is chasing the normalized json api will do so this is the first part here this is the output from the server we have the data like this and we have the attribute in there which has only on the note attribute for example the body the creation time the user the user ID only not the user information and we also have so basically the output of this one is not enough for normal case you get the information of the node what if you want to display the information of the user who create that note so you need to make another reference in this case in my in my case it will be the Phi Phi here because in there not article five few a fire image of a few images I'm sorry and the chase on API will not put it inside the disk object it will put the image into an include here and that job at the normalizer is to glue this five view into the correspondent not correctly under step 2 after running the normalizer from the json api normalize a market it will transform your data into this one it will return you the result which is the list of the article and it put everything into an object here so that you can you have a better structure of it but it's not exactly what you need because it didn't it didn't put the file into the not correctly yet that's why I need to have another step to manually manipulate the data that I need so this is the final output of the data that I want to have in my app so that I can display on that UI as you can see here I have the where's the few image okay I have the few image here in this view image I already have the real image object where I can get from the five file from the include pot I put in there already so now that we have on this beautiful data we can start boiling it into the UI so that is the third part about fetching data using react and reductant let's go to another part of the application the main goal of this application is so that you can bookmark some session that you are interested in and then you can find more information about that like the information the description of the session or the person who will give the speech so in order to do that you know you need somewhere to store the ID session that you would mark and we can do it using passing storage I'm the real application where you need to start complex data you need to choose another solution for example watermelon watermelon DB from SQLite or something else this is an example how we can save the session so I will pass the session ID in here I will get the list of the existing session if it is known just past noon here and then push it in there and then set it into the accessing storage that is this is quite straightforward do you have any question for this I think storage is like an API that gives you access to get that local storage of your application yep so you can store some simple data in accessing storage and you can retrieve in your app usually we will use it to store the setting of your app let's say in your application you want to receive notifications I will store the flag of receive notification in the access storage and because because accessing storage will store everything at the string so I need to specify the session ID because that is an array size 25 a similar concept but it's differently it just bought a mobile app yep the second part I will talk about it quickly which is the caching thing so we don't want to keep fetching whenever you open the screen so I implement as effect a meta name should fetch article because remember before whenever we fetch data whenever data received successfully we set that times time for the last fret so I will use it to check if in the last five minute did we fetch anything if we already fetch it down fetch anymore just really a tower from the state of the hub if we don't have any information of the node or if it is out there it is more than five minutes then let's do the fetch and what we do when it's vet oh no ok the next step after implement this should fetch API I have another function another method which is fetch article if mid I just just a wrapper of on the logic that I put in there so first is we check to see if it need to fetch or not we will pass the state of the I've been here to decide ok should I fetch or not if it is yes then fetch it so talking about caching here this is a very simple application but in real world application it will not be that simple and there's there are auditing for example if you use a watermelon DB you want to store all your data that you fetched from the server into the watermelon DB and you will have product casting strategy for that maybe maybe in that solution you don't need to normalize your data we remember the normalize that that I mentioned before so the way that chase an API cut your your body and put it into the basket it has an advantage which is let's say to not sharing the same reference team it and let's say we have two body here we have the same we'll be sharing the same in your neck here so whenever if we if we keep the json api data structure whenever the server updates something on that person if we update the information of the image which is share i'm meet or not and then you don't need to update on individual not like when you update one of them the sharing part will be updated and it will be reflected automatically on the other instant so caching on the real world will be the next part it's just a fun part so we want to do some animation like this so in order to do that i use the animate api form react native so this is from a library from react native i don't need to install any third-party packet or anything to say okay well first I must say I need to thank McHugh even though he is not here because he is the person who implements the animation on this one let's go to see how it work in order to make it work we have a sprite image like this where we defy 27 state of the star and in the card I will defy as you can see here we have the input range from 0 to 27 which is 27 state and the output range will be the upset of the image like if you are in stage 1 you will upset the image to the left 40 pixel state to upset eighty pics on the way that is looking like this so this is the stage one stay tuned and stay true stay for the way that we view is will be an a component like this it will be the green square what that is what you can see but after that is the sprite and it keeps scrolling from the left to the right so that you can see different image and here's how we implement it we use the API the animated API and run 20 animation at like one after after the other and on each animation we after running it we will delay 40 milliseconds so at the end of the day we have 20 27 stage x 40 millisecond so on the action when you click it it will happen in one second rather and I must say that this animation is inspired by the the like an animation of to death so we didn't invent it the last part the last part will be the Bill and release application so if you work with mobile development you can see that the define meant step is why penguin and is consume a lot of time whenever whenever you want to be with new application you hit the button and you need to wait for X card or Android studio to build a packet for you so you see is will take me like 10 or 15 minutes or 20 minute to finish the process and after that we need to upload the file into App Store or Google Play Store it take a lot of time a lot of time and then after that I submit review and run out to the store but what fast land which is the solution that I'm using here we can we can cut minimize the work on the first three step so we only need to run one command and it will do the three step for you and all you need to do it has to submit to the after you need to submit the app to review so fast land first aneurysm I think first line is a project backed by Google and it's just quite powerful when it is you can use it not only with react native application you can use but you can use it with native application as well it's just a tune to automate on the step that we need to release that so as you can see here it will for example this is the view for the iOS version process will build the AP ipi Fi and then it will upload the test flight that's why is like testing platform or pop or so that you can share the app within your college or within your tester they can test it before you run it out to everybody so here we build up and we upload the test flight and we will wait for it to process it when when when when fastly and finished running you will see some message like this and as we list our under step it has done like it will increase the bill number builder app and a lot of fast man and you will say is very cool to say that you say 919 minute and when I build this application I have been building beautiful beautiful version of the app and I must say fast and save me a lot of time not to mention that you need to build for iOS and for Android at the same time so it's take a lot of time to do that thing but with Fastlane if every if if on the configuration had done right you just need to hit one come and it would do everything for you last night this is the link where you can download the application which is on App Store and Google Play Store and do you have any question yes I must say the app is not very perfect we do have some work in there because I did it in the rush but it's not I must say that not only me working on it there's me q is the developer who make the animation we have some designer had with some styling and we discuss yeah I don't want to do the corner just because a lot of is accessible for everyone who would like jumping in I find it's not a big project but for me it's something very interesting I don't know what they say I'm not really used to movie is very steep I think thank you why because in learning new yak is I fight as super hot at the beginning to be honest I have been with rehab for two years but we are but on and off and from the beginning I cannot get the way that we act work but I just keep trying and trying and then when you get it everything makes sense yeah but the learning curve is wasted I will recommend you to do some simple application this is considered more than easy do you so do you need to use or need to use it okay but sometimes you need to open it eat enjoy all fix code to build up to see it and for this application is very simple so we don't need to dive into the native code but on other projects where I have the push notification I need to do some customized hitting the native code so that you can receive the notification and when do not wanna fall problems so this would be good if you know again this enough because but it wasn't it wouldn't require what do I think about the app interview question quite a lot but I'm not very deep into me so I cannot say about that I feel I wanna lay down one project but I think it's quite useful it's quite cool but maybe I don't understand much about UGS to compare and the fact that we are cook has been released not long ago react just perfect to me right now I did I think I think react native has been quite a lot the app that we are building here is not some hybrid application because the way that we have latest work is we will compile and translate on the JavaScript that we wrote into the native component so that is a real one so in term of look and feel all of them are the same but I think that when you have to work with some performant heavy application than the native debugging in the react native application is high strength or what you can consume now it's everywhere and you can see in chrome so whenever you run let's say run react native run Android or iOS it will pop up the simulator together with it here we have browser open on localhost 1851 and then you can see similar that simulate that is a chemical so the simulator of iOS come from Xcode reachability of Android one from Android studio so in order to render you need to open and press video to render so you do need to debugging those it's there those are BS code so Microsoft vs code editor and then they're much like oh it's just one raised there soldier because I mean if you're on Linux for instance yeah lay I'm not gonna have I'll never run next to it so which is sort of a problem maybe there's a way maybe you will run into some problem that which is very hot I'm not sure about the tongue maybe this is this is the end of my session before that before we be finished today I would like to show you a few months line which is about about evolving what we have we are offering a field training session on September October and November here if you need any help feel free to reach out on a bus here so thank you [Applause]