Sessions is temporarily moving to YouTube, check out all our new videos here.

An Introduction to Expo

Louis Zawadzki speaking at React Native London in July, 2017
319Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

So you want a React Native app but you’re afraid of all the deployment process and ugly certificates? Fear no more with Expo!


Transcript


So first I'm gonna tell you a bit about myself. So I'm a web developer actually, just like Jeremy and Adam. And I've been doing React Native there for like four months, or something. And at Theodo what we try to do is to create apps that bring value to our clients as fast as possible, and so I was saying that to a friend of mine like two weeks ago or something. He's also the web developer, and he told me, why don't you use Expo then? It's really, really fast. So I didn't know what was Expo, so we were chatting on Facebook, so I asked him. He didn't reply. And so 10 days ago Jeremy asked me well, do you have a talk to do to, to React Native meet ups? I said well, I'll do a talk on Expo, that way I'll know actually what it is. So just before we start, how many of you have never heard of Expo before? So a few ones. So don't be afraid, two weeks ago I was just like you. How many of you have used it already? That's fine, couple of people. How many have put it up into a production, like in the App Store or something with Expo? Not a lot. So, actually no one, I think. Okay, cool. So I hope every one of you will still learn something from this talk. So first, what is Expo? So actually, the first time I heard about Expo was one month ago when Jeremy told us that there was the React Native monthly meeting. So it's a meeting with the eight big companies contributing to React Native. So we get Facebook, Airbnb, Wix, and there was also Expo in it. So it's quite a big contributor to React Native. And if you look at the website, they tell you that Expo enables you to easily build apps with React Native. So, it doesn't say much really. So we're gonna see exactly what's Expo and what it enables you to do. For that, I'll do a quick case study. So I'm a Linux developer, and my phone is an iPhone. So if I want to build an app for my phone, it can get a bit messy. Because of Apple, of course. So if I wanted to create an iPhone app, before React Native, I'm not sure it's even possible. Has anyone tried to do that? No? Not sure it's possible, so it's a complete nightmare. Fortunately, we got React Native, so with React Native there's maybe a way. I've tried to think about it. So you can create your app, then you get a certificate to sign you up. So you can ask a friend very kindly to give you a certificate. And then you can try to build it using, like, SQL-CR or try-vi-sy. Or Microsoft Mobile Centre. So you can actually try to run your app, build it on the Linux server, and then you got your app. But you can never see it actually as you develop it. And if you don't know anything about all that, about certificates, about try-vi-sy, or Mobile Centre, I think it take you at least a week to get your app running. So, kind of works, but it's quite buggy as well. It's like, kinda feel like a hack. With Expo, you create your app. You download the Expo app on iPhone, so then there's and official Expo app. Then you scan a QR code on the XDE, which is the Expert Development Environment. Scan it through the Expo app on your phone, and then that's it. So 12 minutes after I started reading the Expo tutorial on my Linux laptop, I had React Native up working on my iPhone. So I was like, wow, it's incredible. This is really good. But I got challenged by a guy, he was part of the Expo, Tim. Told me, well, let's get that down to two minutes. So we're going to try to do that right now. So, I've cheat a bit, I already have everything installed on my laptop. But still, I'll show you how easy it is. So, let's create a new project on Expo. So this is the Expo XDE. I don't know how you wanna call it. Does anybody have a suggestion for the project name? React Native London, cool. So we're creating the project right now. So it takes a bit of time. If you want you can download the official Expo app on your phone, that way you can try it as well, yourself. So, right now it's, so everything is installed. It's packaging the JavaScript, just like what you do when you run React Native start. So, everything is ready, I click on share. Opens a QR code. So I'm gonna scan this QR code with the Expo app on my phone. And hopefully, so, see it's still packaging the JavaScript bundle. So it takes maybe 20, 25 seconds to do everything. Has anyone got a joke to tell? No? React Native joke? Okay, we're nearly there. Okay, it's finished, and now if I look at my phone I got an app saying open app objects to start coding. So I triggered an app working on my phone, and it took me less than two minutes. So if you have a quick look at what's on this app, so if I go to React Native London. So first we can see a problem that we've got some, we've got git, so that's good. At least it's something to take. And if I open it, so what we can see, I'm not sure if I can zoom in here. But we got a package adjacent, just like a React app. React Native app with Expo React Native installed. And that digests where we go to something, like some text here to tell us something. So I can try to change it a bit, say, hello, sorry, oh. Hello React Native London. You can make the text maybe a bit bigger so that everyone can see. And so if I add some style for the text, from the font size, put something like 14. I save this. And now, it's automatically re bundled and I can see it on my phone, it's updated. So it's super fast. So that's something that for me is just super cool. You can, if you have an iPhone and a Linux computer you can super fast develop your app. So you now you're gonna maybe ask, what about production? Because you invoked all your users to download the Expo app, then scan the QR code on your phone, on your laptop. So it's kind of messy. So to deploy for unread, you wanna run command, ex, build and write. And the magic thing is for iOS, you run that, and actually Expo will take care of all the certificates stuff that's usually a complete nightmare. And if you use, for example Fast Lane Pilot, it's also one command to deploy it to Test Flight or to the App Store. So it's really, really fast and you don't actually need to know anything about certificates. You can have an app straight to the production with Expo, I think. So I didn't try to do that because I didn't want to pay the $80 to get an official Apple Store account. But I think in one day you can get an app in the App Store. Well, as soon as you, you still have to wait for Apply to approve it. But with Expo in one day you can have an app straight to the App Store, so that's really, really fast. That's really cool. Then you may ask, well, I got React Native up, that's already working. Can I export to it? And the answer is yes. It's really, it's quite simple. So we can do it right now as well. Actually, it never worked before, so when I try to do it now. Alright, it worked at home when I'm relaxed, but let's try to see if we can do it now. So I got another app. App. So it's a React Native app. So as you see, I've got an Android and iOS folder. Which I didn't have before. And now if I want to turn it into an Expo app, so, I'm gonna do yarn add Expo. So it's gonna download Expo and all it's differences. Oh, so I can see that I've downloaded Expo version 19.0.1. That will be important. So I got abdo-jacent, so in my abdo-jacent I need to have a name slug. So name's gonna be the name of your app, a slug is something that gives you one URL to your app that you can give to users to download through the Expo app. And you also need to give the SDK version. So, in our case, it's 19.0.1. Okay, that's it. And so one last thing that we need to do is to create and index the JS file. It's gonna be like kind of your index.iOS, or index.Android file. So it's gonna be one file for all. So it's gonna be really similar. What we put in it, we just, so it's the same thing as the index.iOS file. The only change we do is that instead of having whatever name for your app, you have to call it main. It's the only thing. And now if I try to open this project in Expo. And, oh, see, okay. Missing abdo-jacent, so I missed something in the abdo-jacent, is that must be in an Expo object. If I do that, and I restore the project. So now it should build my app, so my React Native app. And I can open it through the Expo app. So if I come back. App. Okay, it's opening. So it's packaging again. So now I get my bridge app, which is a picture of protractors. So you can add it to your React Native app really fast. So now you may ask, what's actually the trap of that? 'Cause every time there's something good, you know, something bad comes as well. The thing that is a bit harder with Expo is native modules. So for example, if you want to use, to have access to the microphone or something that's not already developed in React Native, usually you have to do a React Native link for some packages. So you have two solutions. The first option, you use the Expo SDK. So you got quite a few packages that give you access, for example, to the accelerometer, Blur View, you have pedometer, lots of stuff. Or you can ultimately detach your app from Expo. That's where it becomes a normal React Native app, and you can do everything you want. The only thing when you detach your app is that you will lose the push notifications that you, if you've done them through the Expo SDK it won't work anymore, so you will need to re implement it. But still, it's not, if you've done some React Native before and if you've already used native modules, it's not really hard to detach it. So it's not really a big deal. So in the end, if you wonder if you should use Expo or not, so my answer would be yes, give it a try. But first, check that you can get to your MVP with the Expo SDK because if you have to detach it early in your process, then it's maybe not worth it. So, that's it. Do you have any questions? - [Audience Member] Would you recommend using this in production or in development mainly? - I think you can use it in production as well. Because when you push to production, it's actually kind of detached from the Expo service and everything. Just built in Expo, on the Expo service, and then you have Expo which is kind of a wrapper that abstracts the native part for you. - [Audience Member] The push notification stuff, I mean, that's all counted as a service by them is it? - Yeah, it's a service of they provide, but you can also do it your way. But you really, if you want to do it with another provider such as One Signal, which is a famous one, you will have to detach your app because you need to have access to the native part of the code. Expo, actually Expo is still free, for now. Still free. I think they plan to stay free and to make money by giving advice on integration. Stuff like that. Is there not anymore question? Thank you very much. - [Audience Member] Thank you. - Enjoy your beers.