This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Audience Questions & Resources" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: There was some other stuff I had planned, like testing and animations and stuff like that, but those are actually pretty long. So now I think it's a good time to just open it up for questions about things that you wanted to know about that we probably didn't cover or a better explanation of things that we did cover that you're kind of not getting yet or anything else.
[00:00:25]
>> Speaker 2: If you're not gonna cover testing, where's a good place to look for that?
>> Scott: Okay so,
>> Scott: I'll tell you this, it's not as simple as web. I would say the best part actually is,
>> Scott: The docs, actually, they have a good section on testing in there.
[00:00:50] There we go. Yeah, the testing, they have a really good thing, the one thing is, they use Jest. And I don't like Jest. But if you do use Jest, you could try it out. I mean, there's nothing wrong with it, I just don't like it. But you can set up tests with Android actually, pretty easily.
[00:01:06] I had some problems running it on iOS. Well, they show you how to set up pretty easily here, well, with Jest, and I ran through it and it worked perfectly fine. I just don't like Jest. But you can also use,
>> Scott: There's a way where you can just run the JavaScript outside of the platform itself.
[00:01:25] And just use like Mocha or something, but that's a little harder to set up. So I would say to just use Jest, that way you can just get it out the box and you can run it like on Traverse or Circle for your CI. So, yeah, it's really not much different than testing regular React with Jest.
[00:01:38] It's literally the same thing, to be honest.
>> Speaker 3: Just give a quick overview of what it would take to convert like a web React app over to React Native.
>> Scott: A quick way, yeah, so there's really only two things. I mean we did it the first day, right?
[00:01:56] Yesterday, when we covered the basic Todo app to the Native app. There's literally only two things. Everywhere where we're using DOM things, get rid of it. So if your using the React DOM anywhere, gotta go. It's not gonna work with React Native. If you doing anything else DOM, like DOM querying, jQuery stuff, it's gotta go, all that stuff's gotta go.
[00:02:14] And then you need to change over the HTML elements that you're using over to the components you use in React. So, View for div, ListView for ul, Text for h1s and h6s and P tags. So, once you convert that over, that's it, it's literally the same thing.
>> Speaker 4: So, can you not have a single code base?
[00:02:37]
>> Scott: No, so the whole approach for React is not to have a single code base. It's not build once, use Everywhere, it's learn once, use Everywhere. So they want you to like, you know React already, just build it again in React Native. But with that being said, you could bring over the same non React stuff.
[00:02:53] For instance, this whole Redux thing, we could create that in a whole separate repo and we can use that in our web, we can use that in our Native. If we built an Electron app or a desktop app using React, we could use it there. We could use that entire thing, cuz that's not attached to anything.
[00:03:06] It has nothing to do with React. It has nothing to do with the DOM. It has nothing to do with an environment. It's just JavaScript. So that part we could, it's just, the things that are gonna be different are gonna be the views. The UI is always gonna be different.
[00:03:18] Whereas, the logic can be used on every application, but that has nothing to do with React, that's just JavaScript. Does that make sense? Are you looking for a solution where you can build once, use Everywhere?
>> Speaker 4: No, not necessarily.
>> Scott: Okay, cuz usually, if you find that solution, there's gonna be drawbacks, they try to make it exactly like that, you're gonna have some some issues there.
[00:03:42] Any other questions?
>> Speaker 5: Does React Native have any competitors in the JavaScript world for building Native apps?
>> Scott: They definitely do. I would say the closest one to them that's literally doing something very similar is up and coming NativeScript. So NativeScript is a project built by Telluric which does the same thing.
[00:04:05] It tries to accomplish the same thing as React Native does but it takes a different approach. So React Native, or I'm sorry, NativeScript 2.0 was just released and it now uses Angular 2 for its components, which is really legit. So, for instance, if you run through this you'll see it's pretty legit.
[00:04:26] They just updated this again. They just keep updating this stuff. So this is probably the closest one to them. Honestly, in my opinion, if you can get NativeScript to consistently work, it's a lot better than React Native. And that's just my opinion, maybe I'm opinionated because I like Angular 2.
[00:04:42] But actually the thing that I like about it the most, is that in React Native when you want to use a Native library, you have to go wrap it yourself. You gotta write some Objective C or some Swift and some Java and use React Native stuff to convert it to JavaScript.
[00:04:55] Whereas, NativeScript, you don't have to, you get everything immediately. They take a different approach of using NativeScript, so if an update for iOS came out tonight, your NativeScript app has it immediately. If you wanna use that Firebase version 3 that doesn't work in React Native, it works in Native Script right at the box, you don't have to do anything.
[00:05:12] You can make a wrapper to simplify the API for you, but out the box it just works because it reads the meta data from the classes and it imports it. But because of that, it's actually kind of touchy to set up, like I've had problems with it breaking sometimes and not knowing what to do.
[00:05:30] But, here it is, NativeScript with Angular. And it uses TypeScript, which I think is a superior language, TypeScript is amazing. I used to hate it but it's actually pretty good. So if you look at the docs here. Let's just show one piece of code, you'll see what I'm talking about.
[00:05:47] Right here, so this Angular 2, this is literally Angular 2. So just like React Native you could actually build a NativeScript app, an Electron app, a web app. And use most of the same code base, except for the UI stuff. These components are the only thing that would be different for your NativeScript app versus your web app, everything else is exactly the same.
[00:06:08] It's even using an Angular core here, which is the same thing the web will use. So this is actually pretty good. Performance is on par with React Native, if not better sometimes. It's just, you have to know a lot about Node and a little bit about mobile development, because this thing is not that reliable.
[00:06:25] You can just React init and it works, and sometimes you gotta restart the emulator. But with NativeScript, sometimes I had to go to some cryptic place to figure out what was going on. And there's no way, I don't think an average developer would have even wanted to have done that.
[00:06:41] But when it works, it's fantastic, it's amazing. So this is up and coming. I think they're gonna really far with this now that Googles kind of behind it with Angular 2. I think it'll be great, definitely worth watching. So that's the closest thing to them. Then there are other things too, like, what is it, Xarman or?
[00:06:58]
>> Speaker 6: Xamarin.
>> Scott: Xamarin, Titanium, all those things. And if you wanna go the hybrid approach, of course you have Ionic, which uses Angular 2 now. But this is more like a hybrid app, so it's a web view launched in a-
>> Speaker 7: You said that in Cordova or whatever.
[00:07:17]
>> Scott: Yeah, or use Cordova, so these are obviously gonna have performance trade offs. At this point, honestly, I think you're better off just using the Progressive Web App versus Cordova App to be honest. Just make a Progressive Web App, it's so much better. Yeah, so that's pretty much it.
[00:07:32] Any other questions?
>> Speaker 7: Ionic's actually in the perfect position for Progressive Web Apps-
>> Scott: They are, they just lost a competition for it. They want people to submit their Progressive Web Apps. Because they're in the perfect spot, because Angular 2 supports Progressive Web Apps. And they use Angular 2 and they've got all of these components, I'm like, y'all are like right there.
[00:07:49] And Progressive Web Apps are amazing. They're just as good as Mobile apps, it's ridiculous.
>> Speaker 7: Yeah, they're a local company. Not like local to Minneapolis, but-
>> Scott: Yeah, they're in-
>> Speaker 7: Milwaukee.
>> Scott: Milwaukee, yeah.
>> Speaker 6: Madison.
>> Speaker 7: Madison.
>> Scott: Madison, Wisconsin.
>> Speaker 7: Skansin.
>> Scott: Any other questions or anything React Native or anything JavaScript related?
[00:08:20]
>> Scott: No, okay, so now I'm gonna show you some resources and other stuff to further your knowledge. So we didn't talk about deploying to the App Store but I know a lot of people wanted to check that out. So the docs talk about that pretty good, and if you can read through the docs, it'll get you there.
[00:08:34] But it's actually really no different than deploying a regular Native App. It really isn't. So, you know that package manager we use, rnpm, React Native Package Manager? They're trying to set it up to where they can do all that stuff for you. But there exist tools that kinda already stepped up and did this.
[00:08:50] So Siphon is one, Siphon React Native. So if you look at Siphon this one's pretty cool. What it does is, it will like create apps for you. It will allow you to send them out to other users so they can beta test it out, which I think is pretty cool.
[00:09:10] It will push them to the store, it'll deploy them to the store for you. And it will also update the code over the air without having to send it back to the App Store, because this is JavaScript bundle. So it does update your JavaScript bundles, so when somebody opens your app again, it's updated.
[00:09:26] There are some rules though, you can't update the whole visual thing of your app over the air. I mean, technically you could, but it's not allowed by Apple. They were like, yeah, you can't update that, you can update like background things. How your app works but you can't update the entire UI over the air cuz they would just take your app out of the App Store.
[00:09:44] But yeah, you can do over the air updates which I think is pretty dope. So, yeah, Siphon's good. There is another one, React Native deploy, I forget the name of it, I think it starts like with an E or something. AppHub is another one. So you could kind of do the same thing.
[00:10:03] Yeah, CodePush, that's what it is. CodePush by Microsoft.
>> Scott: Who would have known? So CodePush allows you to, and it's open source. You can just,
>> Scott: You can use CodePush to update your stuff over the air. This one's actually pretty good. It's really good actually.
>> Scott: And there's tons of other services that kind of do the same thing.
[00:10:29] But as you can see, a lot of people use it, Facebook's using it.
>> Speaker 7: The futuristic gun shooting from a laptop to the phone is what got me.
>> Scott: This one?
>> Speaker 7: No, scroll up.
>> Scott: No, down there [CROSSTALK].
>> Speaker 7: Snap.
>> Scott: That's what got me.
>> Speaker 6: Delivering the bits.
[00:10:48]
>> Scott: I'm totally gonna use this [INAUDIBLE].
>> Scott: So, yeah, so you can use tools like this to submit to the App Store, but basically, it's really the same process as you would natively. You still have to go to Xcode and bundle it and you have to sign it with Android, you gotta do all that yourself.
[00:11:07] Or you can pay some service to do it for you for free. It's not different. They're working on it but it's pretty much the same. So for iOS, that means sign up for a developer account. For Android, sign up for a developer account. Submitting to the App Store.
[00:11:20] I don't think Android does, I can't remember, do they do reviews now? I still think Android doesn't do reviews, so you could just literally publish it today, it'll be there tonight. Whereas, iOS, it's faster now. I think it's like, what, a week now on iOS?
>> Speaker 4: One to two days.
[00:11:36]
>> Scott: One to two days. So, yeah, they'll tell you no in one to two days. [LAUGH] Yeah, so any other questions? For as far as future learnings, I highly recommend if you're gonna be doing JavaScript development, whether on the web or Native, I do recommend learning React. I think what React taught JavaScript developers is amazing.
[00:12:04] React came out and changed the game with JavaScript and a lot of people have. It just created a whole new pave of methodologies and frameworks and libraries. So it's worth getting into React for that reason. Regardless if you use it or not, I think it just teaches you differently.
[00:12:21] before React, I wrote code a completely different way, where only I could understand it. I couldn't give it to you and have you understand it. Whereas, like now, it's somewhat predictable. So I would definitely recommend checking that out just because. And then, there really aren't too many other React Native sources out there cuz it's still relatively new and you've gotta be kind of brave to use it.
[00:12:45] But it works pretty good as a production. So I would say just build some more apps, try out some more Native APIs. If you go look at the docs, there's tons of other APIs and components that we didn't get to, like Picker, which is like a drop-down. We've got progress bars, refresh controls, all types of things.
[00:13:03] And then you've got like these APIs here, like Alerts, Animated, which is fantastic. Push notifications for iOS, there's all types. So the status bar, you can change the code of the status bar. Pixel ratio, all types of things. So I highly recommend just coming in here and just play around with this stuff, it's pretty cool.
[00:13:24] And I think that's all I had. Yeah, so tonight, I have another branch of all the stuff we didn't get to. I just need to write some instructions for it since I'm not gonna be teaching it. So, I'm gonna write some instructions for that and I'm gonna push that to the repo, or the readme.
[00:13:38] So you can go through and if you wanna work through the animated stuff or the other stuff that I had, you can work through it. So that will be there tonight. Other than that, that is all I got. So, thank you for coming to the workshop, I hope you learned some React Native.
[00:13:55] Feel free to go on and continue building out that app. If somebody actually finishes that app and adds some really cool stuff to it, send it to me, I wanna take a look at it. So I don't have to finish mine, I can use yours, that would be great.
[00:14:08] And thanks for coming.
>> [APPLAUSE]