This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Final Q&A, part 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Speaker 2: Do you think Ionic is gonna be, are they forced to follow suit with this import and register protocol? Cuz it seems like they're a bit behind, especially with their like boilerplate Ionic.
>> Scott Moss: Are we talking about Ionic 1 or Ionic 2?
>> Speaker 2: I'm assuming 2, if that's stable.
[00:00:23]
>> Scott Moss: No, it's not. It's not even close.
>> Speaker 2: But I think I have 2 point something right now. I don't know, you get no, no, you're right, it's like 1.6.
>> Scott Moss: Yeah, it's 1.6. So, no, they're not forced to do it. Just like Angular isn't forced to do it.
[00:00:34] The way we're doing Angular now is not the way that, well, I mean, Google did come out and say, hey, you should start using components with Angular 1x now. They did, but they don't have an official thing for it. It's just like, we prefer if you start doing this this way, cuz it's better.
[00:00:46] Matthias, the guy who made ngAnimate, wrote a blog post about reusing components [INAUDIBLE]. So Ionic, I think it's kind of like what Mark said, they're just really focused on Angular 2, Ionic 2 right now, and that's just where all their attention is. So, cuz Ionic currently, as it sits, is very stable.
[00:01:04] And they might have couple of folks on it supporting it. But as far as bigger releases, I don't think they're going to be doing that. And it's, and also, it's up to you if you want to use that stuff, because Ionic doesn't care, right? If you want to use the imports and stuff like that in ES2015 in Ionic, you can do that.
[00:01:19] It's the exact same setup that we just did just now. You can use your own build system. You gotta start doing all that other stuff, it'll work exactly the same way. So it's not really up to Ionic to have to support that, it's really up to the browsers to support that, right?
[00:01:32] So Ionic's going to run, depending on what device you're in on, web view, Chrome, and Android version whatever, and iOS Safari or whatever. So depending on that browser, that's what's going to dictate it if you can run that stuff natively or not. So, and probably not, cuz mobile web views are garbage, especially if you're on Android prior 4.2, which is horrible.
[00:01:52] But they have downloads you can use, like Crosswalk. Have you heard of Crosswalk?
>> Speaker 2: No.
>> Scott Moss: Okay. So, Crosswalk, not that, let me see, Crosswalk Ionic. Yeah, so Crosswalk is, it's fixed the problem on Android for previous versions of Android that uses Chrome version, I think they were using 10 for their web view, it was ridiculous.
[00:02:17] So you couldn't do anything in there. So Crosswalk installs the latest version of Chrome on the older versions of Android. It adds about 20 megabytes to your app download, though. But it gives you the latest version of Chrome for your Ionic application, which speeds up a lot of stuff.
[00:02:33] So I recommend using Crosswalk for developing on Android. Otherwise, the features that you might build, which might be cutting-edge, will only be able to target devices after that.
>> Speaker 2: Quick followup question. With that 20 megabytes, can they use that new version of Chrome on their device, or is it just encapsulated in there?
[00:02:52]
>> Scott Moss: Well, they should already have the new version of Chrome on the device already, right? Cuz that's, so the thing is, Ionic, the web views and PhoneGap doesn't use the actual browser that you use when you click on the browser.
>> Speaker 2: Okay.
>> Scott Moss: Those are two different things, yeah.
[00:03:07] It doesn't use that. So, when you're inside of a native application and you open up the web view, it's not like opening up Safari, opening up Chrome.
>> Speaker 2: Right.
>> Scott Moss: It's opening up a web view, which is not the same thing as the Chrome or Safari that you click on.
[00:03:18] So this is like a way to have that same thing. Yes?
>> Speaker 3: So [COUGH] in the application we built, when we made a service, we put it in the shared module.
>> Scott Moss: Yes.
>> Speaker 3: Have you ever, let's say we had 20 or 30 or 40 services, do you normally tag those all on to that shared module?
[00:03:40] Or do you split that up into certain ways, or how do you scale that?
>> Scott Moss: Right, so, if they were all gonna be shared across more than one component, then yeah, it's probably where they would go. But if they were only belonging to one component, right? Or for instance, let's look at it.
[00:03:56]
>> Speaker 3: Then you would do the lift thing.
>> Scott Moss: Right, so think of it like a tree. So we have this about component that also might have some stuff in here. So if we had a service that only started with the about tree and it worked, and maybe about had also child components or whatever, then that's where I would put the service or the factory.
[00:04:14] That's it, doesn't need to be anywhere else. It doesn't need to be in shared. But as soon as two siblings need it, you have to put in the common parent.
>> Speaker 3: Okay. But you don't try to group services inside like a shared module. So you.
>> Scott Moss: No. I mean, it'll get complicated when you have services that rely on other services.
[00:04:32] Then you've got to find a good way to get around that, because I don't think there's a really. You're going to have to sacrifice something, because if you make a service that's only about users, but that service uses something that's only in admin, right? Then what happens, right?
[00:04:49] So then now you have to think about, what service do I take out and put somewhere else? So you've gotta start thinking about that stuff. So the easy win is, I just put everything in shared, which you can, you can totally do that. But I try to stay modular as possible until I run into a problem, and then figure out a good solution from there.
[00:05:07]
>> Speaker 3: Okay.
>> Scott Moss: Yeah. Yo?
>> Speaker 4: Do you know if JSPM has, allows you to import HTML files, images, kind of like with your?
>> Scott Moss: Yep.
>> Speaker 4: Okay.
>> Scott Moss: You can totally do that. So JSPM, well, actually, System.js allows you to do it, JSPM is just like the manager.
[00:05:24] So, yeah, System.js, they have a, I'll show you right now. The syntax is, it's actually just a little different than webpack. So System.js, I think what we want is the text plugin.
>> Scott Moss: Yeah, so System.js has all these plugins right here. Let me just find the one that you're talking about.
[00:05:48] Here we go, Image CSS. Yeah, so all these plugins right here, they support, created by Guy Bedford. So, you can import CSS files, import images, import JSON files, import text files.
>> Speaker 2: Yeah, that's right, the bang.
>> Scott Moss: Right, with the bang. And actually, in webpack, it's the same thing, but we just happen to use loaders instead.
[00:06:04] But like with webpack, you could also do this in webpack. So we just say import style, because we have configured our loaders to do that. But we can also do this same thing inside of here, too. Or, let me go to a directive. All right, hold on. Yeah, we can also do the same thing in here, too.
[00:06:29] Something like that. All right, it's just that we did it in the loader, so it doesn't have to happen. But yeah, it's kind of the same, but a little different. Here are the plugins. It just doesn't support everything, there isn't one that I know of for Sass, Less, and Stylus in JSPM.
[00:06:44] So you gotta figure that out. But there are some really, really good ones.
>> Scott Moss: Cool. Any other questions or want to knows? Yes?
>> Speaker 5: There's a couple from online.
>> Scott Moss: All right.
>> Speaker 5: Let's see. John M is wondering what your preferred hybrid frameworks for building mobile apps are?
[00:07:07]
>> Scott Moss: Definitely Ionic. Ionic is number one. Number two is Supersonic?
>> Speaker 5: [INAUDIBLE] React Native.
>> Scott Moss: Well, React Native is not really hybrid, right? [CROSSTALK]
>> Speaker 5: Native means the same thing, right?
>> Scott Moss: When I think hybrid, I think of web view.
>> Speaker 5: Yeah.
>> Scott Moss: React Native is native, so.
[00:07:30] It just feels like it's hybrid. But let me see, supersonic hybrid ionic. Yeah, Supersonic, yeah, this one. So this is a fork of Ionic that AppGyver forked and made and they do some pretty cool stuff. They use web components and stuff. So highly recommend checking this one out.
[00:07:51] This is definitely a good one. There's also a React one. I haven't used it, but I heard good things about it. React hybrid phonegap, let me see if I can find it.
>> Scott Moss: That was probably just lost in Google now, because of React Native. But there's also a React hybrid one, too.
[00:08:12] But definitely Ionic, and then if I had to choose another, it would be Supersonic, because it's just a fork of Ionic with some more conventions on top of it. Less configuration, more conventions.
>> Speaker 2: So, with web components, have you tried? We touched on them earlier with Polymer, but have you tried using them in Angular, and how do you see that as working?
[00:08:35]
>> Scott Moss: To be honest, it's really hard. [LAUGH] It's easy. The hard part comes when you start doing bindings. So, if you want to bind some scope or some controller variable, a model to a web component, good luck. It's really, really tough, you gotta do some hacky stuff. And then it also depends on what you're using for web components, too.
[00:08:52] If you're using just raw web components, probably a little easier to do that, but it's a little harder to make the web component. If you're using something like Polymer, it's easier to make the web component, but because Polymer has its own data binding syntax, it's going to be a little bit more confusing to bind the data.
[00:09:06] Although I think Polymer 1.0 does support, let's see. Polymer 1.0. They do support really good stuff with Angular now. So there's actually a really good blog post on it right here. So you can check this one out. But yeah, they support a really good way of doing it now, whereas before, it was, I couldn't figure it out, so.