Creating Mobile Apps Drupal and React Native

>> Okay.  Thank you for coming to our session today.  Today we are talking about creating a mobile application with Drupal as the backend.  

This is about a project that we have been working on with other agency, so it's a collaboration between ‑‑ [indistinct] and ‑‑ [indistinct] tech.  

We will be talking about the scenario to see the problem that we are trying to solve and we will talk a little bit about technical changes that we had been making, and building up.  

So let's get started.  

And Alex, do you want to start with this?  

>> ALEX:  Yes.  First, a word from our sponsor.  [Laughs.] 

So Robert and I both work involving web, we're a web ‑‑ Evolving Web, an agency ‑‑ since 2007 and we're active in the Drupal community ever since.  

We ‑‑ from web development, we also have a really great training program.  Our team, the core crew that we have, both full‑time and freelance are distributed all over the world, but our headquarters are here at Montreal, Canada, and we have a lot of clients over the last decade‑plus, big and small, and we also, because we've been so enmeshed and embedded in the community, we got ‑‑ build a great distributed community of examiners that we draw on for every project.  

Here is a few obligatory client screenshots.  We do work for universities, presently at Princeton and Georgia Tech, and lots of public organizations, nonprofits, and even the occasional technology company.  

Our ‑‑ our ‑‑ our work in the Drupal community is pretty well known.  Many of you have seen our presentations, especially by my partner, Suzanne, but we would like to highlight some of the recent ‑‑ [indistinct] ‑‑ very excited, and to share with you, and that's ‑‑ and that's more with mobile development and ‑‑ React ‑‑ and I think in part it's triggered by us working with Robert who for the last couple of years have been encouraging us to move more towards using Drupal with ‑‑ with mobile solutions.  

We've got apps that we like to share with the world.  We built one or two apps that we collaborated, like last year's decoupled days.  We built this for Children's Hospital in Philadelphia, vaccines on the go app, which we will be talking about in this presentation.  

And then we've also built an intranet app that allows a large ‑‑ [indistinct]. 

I noticed that some people are saying that the audio is echoey.  Let me know and I'll run out ‑‑ [indistinct] ‑‑ if that's still the case.  

By the way, we don't just do Drupal.  And I'm not only React native, but our new career site is powered by Gatsby JS.  If you guys are looking for a React native, Gatsby, Drupal, or ‑‑ [indistinct] ‑‑ as well as anything related to the agency work flow, and ‑‑ please check it out.  We got postings, and we're hiring.  A little bit about us.  Robert will go first.  

>> ROBERT:  Hi.  I'll just say, okay, this is me, I am ‑‑ [indistinct] ‑‑ working ‑‑ I've been working with Drupal for more than 10 years already.  

The last year, I start working with mobile development.  I start with IRS, and then part of ‑‑ and then I switch into building mobile app use React Native because I'm interested in JavaScript.  I've been playing around with Gatsby React Native ‑‑ [indistinct]. 

So next, next is the slide of Alex ‑‑ 

>> ALEX:  I'm back.  Thanks, guys.  

So next, yeah I've ‑‑ I started evolving Web in 2007.  In 2009, I discovered Drupal, and we've been focusing on Drupal because we love the community and the ecosystem and the niche that it's ‑‑ it had at this time, and also the niche that it's developing for itself as its growing and chain ‑‑ ever since.  And I'm excited about static side generations, Ruby, and making ‑‑ [chuckles] ‑‑ according to this, making extensions with funny names.  Google ‑‑ [indistinct] ‑‑ I check out what's there.  

Great.  

So the first part of the presentation, and I'm going to ‑‑ [speaking away from microphone]. 

The first part of the presentation is to tell people a little bit more about what is ‑‑ what is React Native.  You're here, so we're interested in it.  Let's see if you can summarize It simply.  It's a mobile development framework created by  Facebook that iterates on different approaches of building mobile application, the stuff for your mobile phone, without necessarily having to target each individual platform.  Mainly iOS or iPhones and Android separately.  Because if you ‑‑ if you do native development, you're writing things in either objective C and swift for iOS, and Java or dart for Android.  

React Native's goal ‑‑ [indistinct] ‑‑ in this case, writing JavaScript, which is great for web developers, to create your beautiful mobile appear users interface and all the code, and package into a native app that you can deploy to the app stores.  

It's used by Skype, Instagram, Uber, it's pretty big.  

It has a few key advantages.  First, the way you should think about it, and the way developers describe it, there's a JavaScript virtual machine embedded in the actual app run time.  

And React Native has a bridge that communicate with it, this embedded JavaScript interpreter, and ‑‑ which is running the code that you as the web developer would write.  And the actual app, mobile app framework, either in Java for Android or objective C for Swift.  

So you can think of React Native as a bridge between the JavaScript world and ‑‑ and the respective platforms that ‑‑ that, you know, speak their own language.  

>> ROBERT:  Can I jump in here for one minute?  The concept is that ‑‑ the concept of React Native is that when you are writing your code and your business logic in JavaScript, and there is a bridge in between JavaScript and the native code in your mobile phone, and that bridge, the function, it will ‑‑ it will translate your business logic into native code that can be executed on the mobile phone.  

So that means, what does it mean?  That means, in the past when you build mobile apps using a technology like phone gap, for example, it relied on building the UI on the web, but now with React Native you are controlling the UI component, the native component.  So that he will give React Native a better performance and interaction with the users.  That's one of the huge benefits of React Native.  

>> ALEX:  Thank you.  

When we use React Native, we actually are using it together with Drupal.  

In some sense, you know, a mobile ‑‑ mobile app is kind of like a front end for your website, in a metaphor.  

And most websites built today, it's not enough to build a static front end.  

You need to have a whole system for the team that puts together the content, manages it, and we ‑‑ Drupal people, but also in general think that Drupal is a great platform to manage all the content management workflow and updating the content, managing your users and giving them this database.  So Drupal is still act as the main database as well as the developing platform for all of your custom service side back end functionality.  And the app is taking place of a React front end that you have.  Drupal is great, Drupal 8 be because it has native, almost native supports for AIP, such awes JSON and now ‑‑ [indistinct] ‑‑ and it's a very mature and robust platform to be a back end.  

And of course it integrates with solar and [indistinct] ‑‑ search, and you leverage that functionality, and it's important to note that the Drupal community over the last couple of years has been moving towards this idea of decouple Drupal, where Drupal is no longer, like, you just download it and it's the front end and the back end CMS all in one but you're using the pieces of Drupal just for the best part and coupling it with other technologies, combining it with other technologies that fit your target platform.  In this case, if your target platform is the native applications, you should consider doing, you know, React Native.  

And I think ‑‑ I think we also should ‑‑ should make you guys aware that there's Preston is a very active member of the Drupal community that's been a core ‑‑ a series of the ‑‑ that we presented in New York City, and that gathers people from the Drupal community who are interested in seeing how it's being used in these new ...  [indistinct]. 

One ‑‑ to go a little bit more into the specifics, and I'm sorry if I'm sharing anybody with screenshots of code.  It might get worse after this.  [Laughs.] 

Here is what a React Native component looks like.  

So its philosophy is that you have ‑‑ you're combining CSS with this custom HTML JavaScript combination so it has these embedded translates, and CSS embedded right in the JavaScript files for each component, which you can think of as a block or widget or a ‑‑ [indistinct]. 

And the great thing about React Native as opposed to React, which is that React Native's components actually get converted into different native components.  

There's an ‑‑ there's an Android equivalent and an iOS equivalent of each button and each image, and any other things.  

And ‑‑ and the other hand, you can still use your React workflow you're used to, so it kind of provides a streamlined workflow.  

There's some ‑‑ some ‑‑ some perks.  The obvious, you get to write your native components in JavaScript and CSS.  But.  If React Native, you ever hit the limit, you're encouraged, in fact, not just able to, but encouraged to run X code or Android studio.  This is the ID that compiles objective C or Android, and actually write native code and extend what React Native can do and mix and match.  

So this is ‑‑ this makes for a really powerful combination.  

It also supports heart ‑‑ supports loading, which I think the native development workflows don't do quite as well.  And also, if you really like to avoid heavy IDs, and you want to use a blind text for Vim you can do that.  

For push notifications have forced to you jump into the native side because ‑‑ [indistinct] ‑‑ platform, and Robert can talk about that a little bit more.  And also, if you are going to be writing native code and have custom native components, you're going to be setting up X ‑‑ [indistinct] ‑‑ Android studio and figure out how to build a native app with it, so that you're aware ‑‑ it's a blurry line, and you'll start ‑‑ and you can get quite far just by touching only JavaScript but probably you will become a mobile developer at the end of this.  

The other thing we wanted to cover that React Native isn't the first framework that came along to tackle that use case of creating mobile apps in a streamlined and unified way.  Before this, we had Phone Gap, Ionic, that combined ‑‑ in some ways, with more emphasize on ‑‑ [indistinct] ‑‑ five.  It's important to know what's a progressive web application, like a responsive website but with an extra manifest file that instructs Safari or Chrome on Android to package it as a mini app and make it look like an app, and that has a lot of features that might be enough for your use case.  Of course, you can also go full hog and actually learn native mobile app development.  We won't be covering in this presentation but everyone in the mobile development world is excited today, except for Facebook, about the emergence of Flutter, a ‑‑ [indistinct] ‑‑ to Google, based on React Native.  [Indistinct] and maybe he will talk about how we switch from React Native ‑‑ [indistinct]. 

I have another slide here, just to give you a little bit of complex ‑‑ how do ‑‑ how to consider the pros and cons of React Native, compared to our responsive website.  

Or a progressive web application.  

So obviously a progressive web application is much more minimalist.  If you already know how to make ‑‑ how to do web development, you can make a progressive web application.  

However, for strategic reasons, Apple made it hard to install progressive web applications on iOS.  You have to click a couple of things and it's hidden and most people don't know how to do it.  

So that alone makes it difficult.  

React Native allows better and native controls and it looks like a real ‑‑ it is, in fact, a real native app.  

And as a native app it allows you to use certain APIs from the device, like Bluetooth, camera, that ‑‑ progressive web apps only allow a few more of those.  

As far as I understand today, iOS, you cannot have push innovations with progressive web applications.  But on the other hand f you're in React Native and you build native apps and package them, you have to remember that you're going to be distributing it with the Apple store and the Android play store, the app store and the play store, and there's a delay in the approval process, and obviously that slows down development a lot.  And also you have to give away 30% of your revenue ‑‑ [Laughs.] 

But progressive web applications are faster.  And that's the tradeoff.  And then I notice ‑‑ a question.  

His question is, is React Native interpreted or compiled?  

>> ROBERT:  I believe it's interpret.  Say you create a component in JavaScript in React, and then by when it passed the bridge, it convert into ‑‑ into building a UI within, for example, in iOS.  

So it's an interpretive.  Yeah.  It does not come out.  

>> ALEX:  I think it's a mix.  There's no JavaScript interpret, and compiled, so it's both.  Okay.  For the next portion of ‑‑ okay.  That was the briefing, and we're actually ‑‑ would like to take a second to pause and ask if you guys have any other questions related to what we just discussed, and if you feel like you're wrapping your head around what we're talking about before we can go and show you more specifics.  

>> ROBERT:  So the request is, does it also work on browser?  If you are building a React Native application, it will not work on browser, because it's built for mobile application only.  If you create a project with React Native, you will have a share code base where you can usually put it in a folder named SRC, and you have another folder iOS, and another folder for Android.  So the part ‑‑ your business logic will be ‑‑ [indistinct] ‑‑ for them.  It will be used by the native application iOS, and Android.  So you cannot use the React Native code.  That would be on the browser.  

But because it just React, so you can reuse some of your component on your website, if you want to.  

But that is very limited.  

>> ALEX:  Yeah.  And we don't have that much direct experience with the following thing, but from what I've heard on other Drupal Camp and other conference presentations, people often try to reuse code between their React Native mobile application and their React web application that they have, maybe with Drupal powering the back end of both.  So that's probably what t Alain was asking about.  Sometimes maintaining a consistent React code base for two separate platforms is more trouble than it's worth, and several people I spoke to said they would keep it separate.  Thank you, Alain for bringing this up.  Alejandro asked why not react and not angular.  Facebook native was pushing a competitor to Google.  Google is angular.  And they called it React.  That's a historical reason why Facebook would adopt its own web development framework.  In terms of technical pros and cons, why not angular, I don't think we know enough about React to know why you couldn't ‑‑ I'm sorry, we don't know enough about angular.  But a for whatever reason, Google didn't decide to make angular native.  They decided to do something else entirely.  

>> ROBERT:  [Inaudible]. 

>> ALEX:  Thank you.  Now we're talking about the app, vaccines on the go for the Children's Hospital of Philadelphia's vaccine education center.  Robert has been working or this for the better part of this year.  

And when we started the probably a year ‑‑ a year ago, we had no idea how ‑‑ how important this subject would become.  

So ‑‑ [Laughs.] ‑‑ I guess ‑‑ I guess we can all say, hey, this is ‑‑ this is a very timely presentation that we're doing here.  

So this vaccine on the go app, it's a mobile application that allows the ‑‑ the hospital's vaccine education center to share with the stakeholders, who are the patient and the community it serves, as well as the media, information about vaccines in an easy to access form for busy families who need to understand this, maybe as they're about to wait in a doctor's office and trying to figure out what they should do for their child.  

So we actually did work with Zivtech, a great agency in Philadelphia, who I've been working with at Children's Hospital Philadelphia for several years now.  I think the reason ‑‑ PR ‑‑ I forget the word.  Prestigious award for the work with the vaccine education center for the ‑‑ for not this app, but for the related website.  

So they're doing great work, and their responsibility was for the ...  design, user experience, and conceptualizing how this app would be built and the content in it.  And working directly with the Clint, and ‑‑ [indistinct] ‑‑ responsibilities in this case was building the technology stack of the Drupal 8 and React Native and making it all work together and ‑‑ and that what we will be talking about today.  

So here is a few screenshots of the app.  

Because we're in Zoom, maybe it's a little bit difficult for us to do a demo, but as you can see, it has a lot of ways of finding out the different vaccines, when you should get them for ‑‑ for your ‑‑ your family, and safety considerations.  Went into that, there's embedded .pdfs and videos and you can take notes so you can flag ‑‑ [inaudible]. 

So I'll let Robert take the next part.  

>> ROBERT:  Thank you, Alex.  

So in this project, we ‑‑ I want to give a bit context of the project.  Previously we had another version of vaccines on the go, built with Phonegap, and when get into this project we resided to re ‑‑ [indistinct] ‑‑ the application.  At that point, the best solution of cross platform mobile application.  So the reason that we chose it, one single code base, so ‑‑ [indistinct] ‑‑ and cost.  And give the native user experience.  

So we want the best for the user.  And there are three things ‑‑ [indistinct] ‑‑ the application.  The first one is the push notification.  Second one is the analytics tracked, and offline caching.  It's like a book about a vaccine, and whenever you open the app, you fetch all the content.  When you go offline, you still have content of the book to read it when you want.  You don't want to be connected to the internet or the time to get content.  So that is the ‑‑ the idea.  

The ‑‑ the architecture of the app, it's fairly simple.  We want to keep everything as simple as possible, so that the [indistinct] ‑‑ is not too crazy.  

So we have ‑‑ the bigger part is Drupal, is where we add the content we manage content there.  

We have the Firebase system, a platform from fooling, which provides push notifications and analytic tracking.  When we want to send the notification from Drupal, we credit a node, and the node will be [indistinct] ‑‑ whenever it was published, send a request to Firebase.  And that request will be the title of the body of the push notification, together with the deep link that we want to send together, send in the notification.  

And Firebase, we'll take care of the part to transfer the notification to the mobile, in this case iOS Android, so Firebase talking to Apple's notification service, that takes the notification, send it to each iOS device, and Firebase will send directly to Android device.  

Did I skip one?  

Here.  So here I want to talk about a push notification features in Firebase.  

So the notification is the thing that the message that pops up on your device.  So I guess everybody are familiar with it already.  

The benefit of push notification is that it can ‑‑ improved engaging user and target the right user.  The app publisher can send a innovation whenever they want to notify something important.  In our application this will be the case where we want to send important information about the vaccine or something about the children, have announcement to the user.  I think that is a very important feature in this ‑‑ [Laughs.] 

>> ALEX:  Absolutely.  

>> ROBERT:  So in this project, the ‑‑ what we have done is we need to implement the Firebase SDK into the React application.  So the implementation is straightforward because Google is good in ‑‑ [indistinct] ‑‑ that framework.  But there's one thing about a push notification, because that is a native features.  

So when we use it in React Native, we run into the time where we need to ...  

This is up or ...  [muttering]. 

Okay.  Thank you.  So we run into the case when we need to touch the native code, for example, Swift, to handle a push notification in the special case.  That special case is when you ‑‑ your indication is in foreground.  So according to the ‑‑ [indistinct] ‑‑ of Apple and Android, when your application is in foreground ‑‑ it will not display anything.  It's up to the developer.  We need to create a custom service to cache that notification, show the local notification so the user won't miss it.  If you don't do anything, you won't see the notification when you are opening that ‑‑ when you are using that.  

So that is a tricky ‑‑ a tricky part of the ‑‑ the ‑‑ [indistinct]. 

And in this application, we want to have a deep link in the notification.  So this is where you send the notification together with a link, user clicks on the notification, and it will go to a specific page in the application.  

Here we have the question from Francois again.  

Yes.  Yes, you are right.  Thank you.  Firebase is free for push notifications.  

The second big features of this application is the Firebase analytics.  

So when we build this application, the client say that we want to track ‑‑ we want to collect user ‑‑ usage and behavior of the user.  

We want something similar to Google analytic, and let's say you want to know how many user installing the app, how many user have focusing on the specific piece of information on your app.  

So this Firebase analytic is ‑‑ similar to Google analytic for the website.  Actually, when we first started the project, we ‑‑ Google analytics, still super mobile application.  But last October, I think, last October Google decided to move all the mobile analytic to Firebase.  So it dropped the ‑‑ the new framework, Firebase, and analytic, in our application.  

And that allow us to collect the ‑‑ the ‑‑ the data that we need.  

Firebase analytic is also very powerful in reporting.  So if you have good enough report but you can also create a custom report if you want.  Let's say if you want to have a custom report to know from which location that the user used this ‑‑ this information about that vaccine the most, you can create custom report like that.  It's very powerful.  

So in this application, we ‑‑ we want to collect ‑‑ when do you open a screen?  When do you click a link?  How long do you stay on that stream?  And there's one special demand, a special request.  

Which is the user need to be able to opt out of analytic tracking.  If you don't want your data to be collect, you are able to opt out.  So we view a single setting page where you can switch off the button and we will no longer track you down anymore.  

Here, I have a short video about the real‑time tracking in action.  Here I'm doing some ‑‑ I'm browsing the app.  I'm going from screen to screen.  On the right‑hand side we have a debug view from Firebase.  It's a little slow because there's a delay to collect data from Firebase.  

Now you can see on the right hand, it starts tracking, okay, you are clicked this link, that link, and you are using this.  We are able to collect those event in Firebase.  

I'm going too fast?  

>> ALEX:  No.  

>> ROBERT:  Okay.  We are going to the next big features of this application, which is offline caching.  We want only information of the application to be available, even when you're offline.  The solution we chose is to store data inside SQLite.  We use react native SQLite storage.  That's the library.  And the good thing about this library, it has the same JavaScript API to access data in iOS and Android, so you only need one abstract database layer to connect.  

So that is easy to manage.  

The second thing is, the SQL transaction.  So you can write a select start from table note, so you can query out the content that you need.  

So I find that is very interesting, because we come from the Drupal world, so we have a ‑‑ [indistinct] ‑‑ already.  

So these languages is easy to adapt.  

The third one that I like from this library is that it's super permissive.  

Features from JavaScript that allow you to avoid blocking ‑‑ avoid blocking multiple actions at the same time.  So let's say you are firing a request to query data from database.  

But you don't want your UI to be blocked by that.  It still do all the action.  So it might be an app, do handle those tasks like [indistinct] and provide that the user experience, to the end user.  

The four features of this library, you can prepopulate SQLite database.  When you download the app, you have the content already.  

Then we think that, okay, maybe we don't want to shift the ‑‑ our data content to the app.  So we switch into the strategy, so when you ‑‑ [indistinct] ‑‑ open the app, we will connect to the Drupal serve and fetch the latest content and insert into your local database.  That would be better because nobody wants to read the outdated information ...  [indistinct]. 

This is the [indistinct] ‑‑ of the flow of the request, and storing data in our application.  

First, when you are using a mobile app, here you send a request, which is in zero here.  The request will go to Drupal server, which will return you a JSON object, on the information that you need.  And then it will send back to the mobile application, render it out, and update the local database.  

Whenever you make a request, go to the server, go back to the mobile app, render it out, and store it in your local database.  

In this ‑‑ in this project, I need to create a custom data ‑‑ abstraction layer.  So the idea, I have t it comes from Drupal because I know that Drupal has that abstract database layer.  

So I think it's very useful and very easy to use.  

So I try to create the similar [indistinct] ‑‑ so what would SQLite, I think that is the problem I found most interesting from this application, and learn something from Google.  

In this ‑‑ in this application, there's one ‑‑ so there's one thing that we learn from building local, building offline applications.  Which is very different from website.  

So on website, you fetch on demand, you open the page, fetch it up on the server, but in application, because sending request to server is very ‑‑ very expensive.  You make a request, it ‑‑ it might slow down your application.  We come ‑‑ 

[Computer noise.] 

[Inaudible]. ‑‑ open the app, update from the server.  And whenever you browse the app, your data will come from the local database, which will be faster.  And you only fetch when your data is outdated in.  Our application, we set the cache tone for local data to be like three minute, I think.  

So within three minutes, you don't need to send another request to the server.  

>> ALEX:  This is how we can get that native‑like experience.  Even if the WiFi connection that they're on isn't super stable.  

>> ROBERT:  Yeah.  

So this ‑‑ whoops.  

[Laughter.] 

Sorry.  We hit the wrong button, I think.  [Muttering]. 

>> ALEX:  Yeah, we ...  [Muttering.] 

>> KATHRYN CARRUTHERS:  Do you have your buttons showing at the bottom of your screen?  

>> ALEX:  Yeah.  We're there.  

>> KATHRYN CARRUTHERS:  Okay.  

>> ALEX:  It's the Zoom multimonitor challenge!  

[Laughter.] 

>> ROBERT:  Sorry about that.  Can you see my screen now?  

>> KATHRYN CARRUTHERS:  Yeah, it's fine now.  

>> ROBERT:  Thank you, thank you.  

So we are talking about the diagram of the fetching caching data on this application.  

So if you are a bit familiar with React, you already know about a component did mount event, and a hook, use effect.  So that is something that we build when the component appear on your screen.  So in this application, when you open the screen, it will decide to fetch data.  If it ‑‑ the fetch data on that will check for ‑‑ we check to see if the cache already expired, and we turn ‑‑ [indistinct] ‑‑ to a form.  And decide to get data from either the database, and then render account, or we should go to the server, get the latest data from there, render it out, and then save, update ‑‑ sorry ‑‑ and then ...  

And then update the database, so that the second time that we come to the same screen, it doesn't need to go to the server to fetch data anymore and just go directly in from ‑‑ to the database and get it out.  

[Muttering]. 

Here is the list of library and tools that we are using in this application.  This application is build on React, and React Native.  We have Redux, and then we can use it to handle the request to the server.  

Avoiding the UI blocking issue.  

We have React Navigation is a framework that allows you to build the flow for your application.  This means you can navigate from this screen to another screen, or you can have the ‑‑ the bottom, top bar, like the five bottom, at the bottom of the application where you can switch from this screen to another screen.  We use React Native Firebase, like I said.  For pushing the notification and analytic.  

We use them, SQLite storage, and besides that we use React Native PDF because in this application it's shipped with some .pdf about vaccine.  So you need to use that library it view the .pdf in your application.  

We also use part of it, and part of the app used React Native web view, where we load the whole weapon page in the screen.  I use Lodash, like a utility like ‑‑ [indistinct] ‑‑ help to you work with object and ‑‑ [indistinct] ‑‑ in a proper way.  

PropTypes to make sure that your data ‑‑ to make sure that your code is good.  

>> ALEX:  Yeah.  And I think based on what we see here is that if the audience of this ‑‑ at this webinar, presentation, is mostly Drupal developers, you will see that Robert really had to know the React world pretty well in order to do this.  

And there's quite a bit of, you know, like, many weeks or ‑‑ or months of experimentation and learning that you should be aware of.  

And at the same time, we've found that transitioning from React to React Native, they're similar weeks of trying out different libraries and methods and reading tutorials and setting up an environment.  So I think you want to be realistic, you know.  When you're ‑‑ when you're a PhD or a JavaScript developer and excited about this world and wanting to try it.  This is a great next step for you, but you have to know that you will be learning React in an app, and you learning React Native in an app.  

And, Robert, could you speak to how much of your iOS development skills did you have to leverage during the course of this project, the real‑world project?  

>> ROBERT:  In this particular project, I think the hardest part about iOS, you have to create the service for the push notification ‑‑ [indistinct].  

But I have some experience working with mobile before, and I found I work in React Native, you need to have basic skill in mobile development, so that you can debug it.  

Because sometimes you need to run your application in X code or in Android studio and try to develop the problem from there.  

So you need to know a bit more about native development.  

>> ALEX:  And this echoes a lot of other people who went down that road.  

Is that, you know, this is a great way to learn mobile development, if you're a JavaScript developer.  But you can't pretend this is only JavaScript and there isn't native mobile code running as part of what you're doing.  It's not there yet in 2019, 2020.  

So just dive in, but, you know, keep your eyes open as you do.  

>> ROBERT:  Yeah.  Because sooner or later, you need to touch the native form of the mobile application.  

>> ALEX:  Yeah.  On the local storage side it's probably good that you have that experience.  

>> ROBERT:  Yeah.  

Okay.  So we come to this slide.  Okay.  

Always when I finish a project, I always think that ‑‑ what can I do if I redo it right now?  

So this is about that.  

This application is ‑‑ we started last year, I think last March.  So at that time, React hook is not very popular, not out yet.  But now if I can redo the application, I would use React hook, because it's a nice way to organize your code, and it improved the performance of the app a lot.  

The second thing is integrate Typescript, which have you write a better code ‑‑ you need to write more, but as ‑‑ have you write better code, and your code would be more predictable, which is more stable.  

And easier to manage.  

So ‑‑ and the third one, the third one is the thing that I really want to set up, but I couldn't set up in this particular project, because the [indistinct] ‑‑ if the project is online, I will set up Fastlane, which is an open‑source libraries that have you do something like dev op for mobile development.  So Fastlane ‑‑ let's say whenever you want to publish an application to app store, you need to go to create an archive, push it to S flight and get Apple to improve it and then you can publish the application.  That process is painfully long, and the ‑‑ the a‑ to archive everything and push it to desk fly, reject the status of your app takes time.  

And Fastlane does everything for you.  Whenever you want to publish the app, you just need to get one ‑‑ Fastlane better, and as we compress everything, build an iOS application, push it, created an APK file for Android, push it to Google Play Store.  So the fen thing when I use ‑‑ the funny thing when I use Fastlane, you say 90 minutes on doing this job.  That is nothing for one, but if you are building continuously and shipping features on the application, that can take a lot of time.  

In the other application, I save quite a lot of time by using Fastlane to deliver the application and features.  

So that is definitely the thing that I would create in each and every application that I would build from now on.  

And Fastlane ‑‑ [indistinct] ‑‑ not React Native, but super native ‑‑ development like Swift, Android, Flutter, and React Native.  

>> ALEX:  For the record, Fastlane did not sponsor this presentation.  [Laughs.] 

>> ROBERT:  Purely, my love for Fastlane.  

Okay.  Our application is now available on app store and play store.  

If you go there and look for vaccines on the go, you will be able to find it there.  

And lastly ‑‑ 

>> ALEX:  Just to come back to Evolving Web, we do a lot of in‑person training in different cities, which has always been scheduled online, which we hope just as well for most people.  So we have five‑day Drupal training going on at the end of March.  

And also, another one at the ‑‑ at the end of April.  And then a two‑day accessibility training, web accessibility training ‑‑ [indistinct] ‑‑ and yeah, reach out to us for any information you would be interested, whether it's the Drupal training that we offer or if you would like consulting time related to native, native development, or combining Drupal and native or React Native apps.  

And so that's ‑‑ that's ‑‑ that sums up our presentation.  So we'd like to thank ‑‑ thank you guys.  We have 10 minutes left for questions, or seven minutes.  Shoot them in the channel, or Kathryn will moderate.  Thanks so much.  

>> ROBERT:  Thank you.  

>> ALEX:  And finally, I have the slides link that I'm throwing in the Zoom chat right now.  

>> KATHRYN CARRUTHERS:  Thank you.  So the slides will be on the MidCamp site on the session page.  You'll also find the ‑‑ the session evaluation form, so please head over there, and fill out your evaluation.  If anybody has questions, if you would like to unmute yourselves now, you can do so, and talk to Alex and Robert directly.  

>> ROBERT:  I think we need to wake everybody up.  

>> ALEX:  [Laughs.] 

>> Thank you.  

>> ALEX:  Okay.  I have ‑‑ if there's no question, somebody's still thinking what they want to ask, I have a question for you folks.  Does anyone here use ‑‑ used Flutter to do something similar, and do they have any experience they want to share related to that?  

It's within Dart, so that's quite different from Drupal.  

Okay.  Well, I'll take that as a no, but Robert, did you ‑‑ did you ever play with it?  

>> ROBERT:  I've been playing with Flutter, and I really like it.  

First, I come to React Native, and love it because JavaScript.  Familiar with what I've been doing with Drupal.  But then I just go with Flutter and the more I learn about it, the more I like it.  It provides better performance.  Like, really better performance.  

Because the Flutter application ‑‑ to native code, and ship it to the user, start of ‑‑ start of time, quicker than React Native, enter in that term.  

And second thing is that the way that we code in Dark, I think it's more familiar when you have programming background.  Like back end programming background.  So if you are familiar with, you know, some design pattern and you want to ‑‑ if you come from mobile development word, and you ‑‑ I think you will prefer Flutter.  But if you come from the web development world, you will prefer React Native.  

I think that is one of them.  

>> ALEX:  Okay.  Well, that sounds fun.  We're looking forward to learning more.  Doesn't look like we have any more questions, so thanks for joining us, and we look forward to hanging out with you virtually.  

>> ROBERT:  Thank you.  

>> AUDIENCE MEMBER:  Uh‑huh.  

>> ROBERT:  Thank you.  Bye‑bye.