 My name is Kai Wen. I'm a software engineer from Open Government Products and the top today is React Native x parking dot sg. It's been a long day so I'll try and make it more snappy and yeah so without further ado here I go. Content for today is first a brief introduction on what React Native is. Next I'll be talking about our experience with React Native. It's pros which I'll just go through really quickly and then some of the more interesting cons or stuff we didn't expect when we use React Native and then we'll talk about hot code push which is an incredible feature that we are using and it really makes developer life much better and it's great for users as well. Fourth I'll be going through what you need to do to write a native module in React Native and lastly I'll have a Q&A where you can ask me any question about the talk itself or just anything in general. Hopefully at the end of this talk you have a better idea on what React Native can offer what it doesn't offer and it will help you decide whether React Native is something you want to use in your next project or you want to add it to your current project. First thing React Native what React Native is first it's a framework that you can use to build native mobile applications by writing JavaScript and React. First announced at Facebook's affect conference in 2015 March. Yeah you can really write native mobile apps it's not a web view it's not a wrapper for a website and you do that by using React Native components its components actually call underlying iOS and Android APIs. For example in React Native when you make use of the view component it will render a UI view in iOS and for Android it will render a view right. So here's our experience in using React Native some background background on why we're using React Native. Parking.sg is the application that we launched in October I think 2017 and the first prototype began in September 2016. At that time we were thinking of what technology to use and we were making a prototype so we could go down to government agencies to pitch to them this concept of digital parking where you can park your car without using parking coupons and just pay using your smartphone. So we had some options we were thinking should we use Ionic which our team did had some familiarity because our team also made an application called Beeline it's a crowdsource bus service where you get a crowd to kind of contribute to a viable bus route and if it's viable it will be launched. So another option was going full native but that was too much of an over queue because you would have to have two separate code bases for iOS and Android too much for prototype and finally there was a new kit on the blog called React Native and it was also gaining community traction and that's what we went if we tried React Native and moreover Facebook used it for their own app so if Facebook could make a well-functioning app there wouldn't be too much of a risk. So pros in using React Native first it's in JavaScript and JavaScript is the top most used programming language in the world today so it's great you're more likely to find a library that you can and a question would be more likely answered. Don't have an expert to get started in iOS and Android and it's also a great benefit if you're using Node.js for your servers because with that your front-end and back-end engineer can work much more closely together in fact we actually review each other's code which you don't get so often if you're using a different language so with much closer integration you can also have reusable code that is same code for both your front-end and your back-end. Another pro would be that there's a high percentage of code we use for two platforms iOS and Android for us we have an estimation of about 90% maybe even more so sometimes you do need to have some platform specific code such as this so if it's an iOS you got to have a different offset if it's an iPhone X something like that but anyway you get much less code to maintain for two platforms so that's a big win. Another pro that we'll talk about is hot code push which I'll be covering later. Cons things or things we didn't realize so much when we started. Not all Node packages work so when you use React Native you make use of NPM your Node package manager but you quickly realize that not all of them work because React Native does not actually run in the Node or browser runtime environment so we use a tool called Stripe. Stripe is a payment provider it's a great tool that you can or great service which you can use to collect payments they make collecting money easy so they have lots of awesome tools that work out of the box when you use Stripe for let's say web development you can just use the Stripe checkout and you straight away get a checkout box where someone can key in its credit card and it does some magic where it checks whether the card is correct whether it's a master card whether it's a visa and you also have the Stripe SDK where you can use to call their methods instead of calling API directly you can use the SDK but all these things actually don't work on React Native which is something that we did not expect when we went with it because React Native because for the Stripe SDK it depends on the Node dependency called HTTP and it's not present inside React Native because React Native is basically a native application and that means that you are going to have a high reliance on community packages and they are sometimes a hit on this so one of the packages that I tried to use is Axios quite a popular HTTP client for browse and Node.js and it's a great library to use and I tried to use it so because the default client on React Native is called Fetch. Fetch is quite low level quite hard to use so I tried to use Axios right so I searched up the NPM repository and I found two packages React Native Axios and second package is called Axios so I was thinking well not everything works so which one did I go with well I went for React Native Axios because well you wrote it for React Native right should work better but it turned out to be a bit of a dud what happened was that I met with a bot where it was supposed to throw me an error but it just stayed silent and I couldn't figure out what was the problem and then my colleagues suggested that why don't you try the original library and fine okay then I switched it out and I used the original library Axios and then it worked fine without a hiccup so sometimes when you use React Native when you're looking for a package to use it's a little bit of a hit of a miss you got to kind of figure out which ones to trust and you you got to do some trown and error because sometimes people don't state explicitly that they support React Native. Cons another con would be not everything works as seamlessly as you expect in React Native so there were differences in UI that you don't expect sometimes so sometimes you have a text that's supposed to look this way but on iOS and you realize that on Android it looks slightly different maybe it's like a few pixels higher or a few pixels lower so this is a closed issue on Facebook's React Native page line hike behaves differently on iOS and Android so basically sometimes you have problems where things look slightly different and you have to Google why is it like that and you realize that oh there's an existing bug so you have to Google for workarounds to find out what are the problems and search for solutions to the problem you are facing one of the worst problems I face when using React Native for parking dot sg is this so this is a stack overflow question that I posted two years three months ago and I took this screenshot maybe a few days ago and today it's still getting some upwards means it's still an active question that's helping people so it says here react native X code project product archive fails with duplicate symbols for architecture arm 64 this was a memorable day because on this day I was in office and trying to deploy the first version for parking dot sg on to the iTunes Connect and I just couldn't figure out why the iOS project failed to archive and I just worked on the problem for hours and hours until I think was close midnight couldn't find a solution couldn't Google for a solution and that's why I posted this question on stack overflow after some time I did manage to find out how to do it and then afterwards I answered my own question yeah so here you go you have to Google for workarounds and finally the last con you do need to care for native when you use react native and this would might be a bit of turn turn off for some people if you're coming from a more web development and you're familiar with react and you're going to react native you have to care about native because if you're using react native you are probably interested in some of the closer native integrations such as better access to your OS level push notifications location access and when you do all these when you are deploying your application you have to deal with stuff such as iOS certificate management provisioning profiles and you have to deal with different permission models for iOS and Android some permissions are considered unsafe on Android some are considered even if the same permission it might be considered safe on iOS so you have to care for these things when you are using react native and another thing would be you have to conform to new requirements and API changes as well so this is an issue that I closed on our github page for our project Android must target API level 26 for updates by 1st November 2018 something else you have to consider when you're going for react native because you have to go comply with play store app store stuff so if you don't comply by API level you cannot make another update to the play store that's what it means and finally hot code push which I skipped earlier I dedicated a portion for hot code push is because it's such an incredible feature that we enjoy and after using it in our first react native project every time we start a new project let's say if we are using react native the first thing that we think we should add before pushing the app into users hands is hot code push so what is it it's this package react native code push that we use the com containers is Microsoft and hot code push for react native allows you to update your app without going through the play store and app store this is roughly how it works so when you upload your app into the store it's the one on the left react native app you have certain native code version so like this is a binary version v2 blah blah blah and then inside that code there's also a JavaScript bundle which is your react native application JavaScript logic and then when the app starts up it talks to a code push server and the code push server will tell it whether there is a later JavaScript bundle for this binary version if there is it will push it down to the application and then tada it will replace it and you've updated your app this includes logic and view because in react native you control your logic and view mainly using JavaScript so it's great because it lowers your friction for app updates and this is what I need to do for making updates if I want to use hot code push just two lines of just two lines in my command line and I'm done instead of having to package it and package an iOS on the Xcode on Android Studio two lines and this is done the first line is to say code push release my app name platform Android with a certain description and mandatory update and targeting a certain binary version the second line would just be to set it to production because the code push has you can have two you can have two parts for code push one for your staging application and one for production so two lines of code and your update is live to your users you push right into difference without them having to do anything once they open up the app it's updated this is the stats for us parking lot sg we have released about 126 versions but the total number of play store version is just 22 and in between they are all code push versions so this is kind of what it looks like in the repository take a look some of them have a tag called and drive binary iOS binary and those are the ones that we actually upload to the play store app store all the rest are just hot code push versions this is really fantastic because it allows you to make really small quick updates to users and allows quick bug fixes from the moment I receive a bug report I receive a bug report which we handle our tickets using then desk and then once I read it and we figure out what's going on after I make the code change I run the two lines of code and the updated app is in the user's hands as quickly as that you can and then we straightaway reply to the user just open the app it's fixed you don't even have to say go and update your app and etc it's great much reduced lag from code to users hands and use you just get better quality of live for your developers and for users so finally I would like to talk about the last point which is writing a native module writing a native module is actually not that difficult in react native and the first rated native module that I have to write for our project was because we had to lower the we had to lower the PCI requirements that we were at that we needed to fulfill for using Stripe because Stripe as a payment processor they they need you to be PCI compliant and the way you use their services affects the compliance level that are the requirements that you need to hit to be PCI compliant if you were to use the API service directly they will require you to have a higher level of requirement which was what we did initially we just call the API directly we send the card numbers to them directly using HTTPS this requires a higher level of PCI compliant requirements but instead if you use their SDK so they have Stripe has mobile SDK for Android iOS if you use the SDK and it's a much lower requirement to be PCI compliant so that's what we did and I'm just going to walk through kind of what you need to do to write a native module in Android so here's an Android project screen is a little bit hard to see Android project and this is kind of and the module that I'm writing is called light stripe because I just needed one method from the Stripe SDK so first I'll look at you need to write a lot of module called a light stripe module Java and that's what I wrote in this file you need to basically a native module over here is a Java class that extends the red context base Java module just this so just declare this is a class that extends this react context base Java module and react context base Java module requires a method called get name which is what is implemented over here get name returns you a react class and the react class I've put it as light stripe so basically this provides the JavaScript context with the name of the module the name of the module is light stripe next you can do the actual implementation of the of the code of the native code and this actual implementation I call it create token with card and publishable key and take note you have to annotate react method when you annotate react method what it does is that it exposes this method to your JavaScript context when you use in react native and there were a few arguments here first is readable map second is a string which is a publishable key third is a promise when you actually make the last argument a promise what happens when you call this method in JavaScript is that you'll get back a promise so you can wait for that promise in JavaScript so let's take a look at what the mapping is a readable map in Java will actually be a JavaScript object so when you so in JavaScript when we call this method you pass an object and it will be a readable map here in Java so the first one is a card which you pass in an object in JavaScript second is just a string a string makes to match to a string so on the left is Java on the right is JavaScript so let's take a look at what this method does create token with card and publishable key what I'm trying to do is to use the stripe mobile SDK for Java and using one method called the create token and when the create token create token takes in a striped card which is basically credit card details that the user keys in and then you pass the credit card details into this striped SDK method called create token and you get back a token and then you receive the reply using the promise whether it's successful you resolve it if there's an error rejected and this will be received by our JavaScript react native code since you're done with that the last thing you need to do is to register the module to make it available in react native that's another file which was created called lightstrap package dot Java you have to register it this lightstrap package dot Java implements a react package next in create create native module is the one that actually creates and registers it and in this method you simply return the module that we that I showed you earlier return the lightstrap module finally you have to have registered one more place called the main application dot Java this file is present in every react native project so inside main application dot Java there is a list of packages that it's actually making available into your react native context so over here is all the native integrations the first one main react package is just the main library so lightstrap package is the one that we just created so put it here and it'll be available inside your react native code so the last thing you need to do is to make it available in your JavaScript so over here is the JavaScript code right native code you just simply access that native module by importing native modules from react native and then you can reference the name of the module in native modules and since it's called lightstrap yep export lightstrap and then you can use it lightstrap dot create token with card and publishable key which is the method you saw earlier just now so there we go it's not too difficult to create a react to create a native module in react native if you would like more references take a look at the following stuff YouTube video by Peggy raises on how to bridge native modules and UI components it's the video is quite detailed and goes through step by step in detail and it's probably quite useful some of the stuff is a little bit outdated but the concepts are there of course refer to the official native docs for updated documentation finally this is the end and ask me any questions you like yeah the question was that was that why if how could push is so good why are we still making updates on the app store and play store I'm going to refer to earlier slide to answer that so if you look at the slides in a red native app there is a native code and there's a JavaScript code so it could happen that's sorry let me rephrase the answer so it means that when you actually use hot code push the only thing you are replacing is the JavaScript bundle yeah only the JavaScript bundle is available for you to update using hot code push you cannot update any native application code using hot code push which means that if you you could potentially push let's say if I write if I make some native integrations and then I change some JavaScript code and then without updating the app store and play store and I just straight away upload this new version of hot code push bundle what happens is that if I push it to the app that does not have the native changes that JavaScript code will crash because it doesn't have the native bindings yeah only native native code can only be updated through the app store and play store okay question is that since application is government related is it okay for us to host our code on a server well the answer to that is yes because there is no secrets in the front-end code absolutely no secrets and in fact we do plan on making parking.sg open-sourced yeah any other questions you can ask me anything about the talk or just anything in general about parking.sg or whatever I am thinking about that for example if you're having one update via play store just to say another update via just . so there will be some version mismatch or how do you overall manage both the versions so that at the end of the day when you do the next play store update it is sent and it's not is not running, the play store is running ahead and the GSP is running behind. How do you, for the same time, versioning of both? Okay, so I guess the question is more about how do we manage versioning since we have two streams, like one is hot co-push and one is through the app store play store. And again, I'll go and refer to one of the slides, this slide. So actually two slides, I'll go to one before. So if you look at how I actually make a code push update, the first command that I call over here towards the last line, it says target binary version. So when you actually make a code push, you can actually say this hot code push bundle is only supposed to be installed on a certain target binary version. So that's kind of how we manage whether a bundle should be pushed into a certain binary. So how we do it is kind of through this. So I'm pretty sure all of you are familiar with this view. So these are just texts that we use in our GitHub repository. And every time, so the version right on top, so v218.2 is a hot code push bundle, and it's only pushed into binary versions v218.0, both iOS binary and Android binary. So any hot code push versions for us, that is v218, will be pushed only into binary versions, v218, as you see there, iOS binary and Android binary. We don't push it to like earlier. So everything on top consists of everything below. Yeah, something like that, yeah. Do you have any problems with Apple regarding hot code push because they are very strict regarding the updates? Yeah, question is, do we have any problems with Apple for hot code, using hot code push? So far we have not received any problems. And I think that Microsoft React Native hot code push was not the only one that tried to do some fancy stuff like that, where you can update away from the App Store or Play Store. And so far there has been no problems. And I think the main reason is because of the limitation that you see over here. Because there is no way that you can make a JavaScript update that actually uses some native feature that did not exist if you don't go through the Play Store and App Store. So if you were going to make a certain binary or native change that requires a more dangerous permission, and it requires a binary change, you'd have to go through the App Store. So I guess this is one of the reasons why React Native hot code push is still alive today. But they do have some clauses that you are not allowed to change the main goal of your application. So right now it's a parking app. I cannot change it into a gambling app using JavaScript. So if you do that, they'll take it off the App Store. I was wondering how long it takes to download a new JS model for you. Does it cause so does when you boot up the app? Can you not, does the app wait for you to get a new bundle before you turn it into an open app? And is there a concern? Question was there, is there a concern when a new JavaScript bundle is being downloaded? Does it cause lag? From what we have observed, not really. So how it looks like is when you open up the app, it uploads, and then because I'm using a mode called mandatory update. There are a few modes you can use for the hot code push library. You can actually have a pop-up that says there is a new version. And you can also upload a new version and you can say that that version is not mandatory. So there are multiple ways to do it. For us, we always set it as mandatory and the speed is really fast. Once you open up the app, I think within half a second, it flashes like white. And then it just loads the new JavaScript bundle instantly. So no. And we have not really, I don't think we've received any feedback that about any problems with that. So it's really fast. Yeah. So do you think the size is larger in this? Yes. There's a concept of how it works. You get a bandwagon, and you get a range figure for a bandwagon. So you can make sure to reduce that or it's okay. I didn't really catch what you said. Could you just say a bit slower? What compared to Android? So you're asking if there's a big difference in size or... Okay. So the question was whether a red native application is much bigger in size than a native application. I don't have a model answer, but just what I've realized. I don't think there is a huge difference. And because basically in your application, the stuff that takes up the most space are your assets. So whether it's a native application or a red native application, if you bundle in lots of assets, pictures, or whatever, it'll be huge. Otherwise, it's pretty small. For Parking.sg, I think both apps are around 10 megabytes or so. And probably the main improvements would be if you actually take advantage of, let's say the new bundling methods provided by Android or new bundling methods provided by iOS. Yeah, any other questions? If there are no more questions, just a quick one. Last slide that I didn't show would be, we're hiring. So go check out our website, open.gov.sg, about 20 plus of us, about mainly product managers, software engineers and UX designers. We do stuff for public good, identify areas and we work proactively. So check out our websites and apply if you want. Thank you.