Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Final Q&A, part 2" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

Scott continues the audience Q&A by answering questions about server-side technologies, reducing dependency injection in controllers, Webpack vs. JSPM, and UI frameworks for Angular.

Get Unlimited Access Now

Transcript from the "Final Q&A, part 2" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Will: Justin C wants to know what you think about Koa.js.
>> Scott Moss: Koa, Koa, that's Express ES2015 with generators, right?
>> Will: I honestly have no idea.
>> Scott Moss: Yeah, Koa is great. It's the same people who made express of today how I'm talking.
>> Speaker 3: Aren't you going to cover this in your next video?

[00:00:26]
>> Scott Moss: Yeah, so we're going to talk more about service side technologies online the next workshop starting tomorrow with note but Koa yeah as a node, js framework. That's kind of like Express but uses generators and somewhat other stuff is just a framework. Me personally I still just prefer to use Express.

[00:00:45]
>> Will: Cool, Pinnnick M wants to know how does one manager reduce lots of dependency injection in controllers or working on Ajax?
>> Scott Moss: Make higher level services, so if you have like a lot of things being injected into the controller, make a service that injects all those things, and inject that one service into your controller.

[00:01:05] So you have like higher order services that compose smaller services together.
>> Will: Just kind of create layers.
>> Scott Moss: Yep, just more layers.
>> Will: Yeah, I would agree with that. Dominic R wants to know that he understands that jspm is more complicated to configure and set up, and that's one of the reasons you chose Webpack for this.

[00:01:24] But long term, should someone be looking at jspm or Webpack for future projects, I guess?
>> Scott Moss: For future projects, look at jspm, but it also depends on how you feel with your skill level, jspm is really really tough to use right now, I had to like contact the creator of it to figure out some stuff.

[00:01:41] And so it's kind of tough, but long term definitely look toward it because that's what Angular two was using. And it follows the specs session.js is literally the spec. Webpack is just awesome right now because it's using node.js which has been around for a while. And is because of that people are so familiar with it, they can builld types of plug-ins with it but when ES2015 becomes final I mean this final is all I was fully implemented.

[00:02:07] Soon .js is gonna be the familiar thing and people are going to start developing stuff for that, so. I definitely keep an eye on it and you could pretty much solve all your basic needs right now but for more complicated builds you're gonna have a challenge. You're going to have to make some stuff yourself, or just like not use those things at all.

[00:02:26]
>> Will: Rob W wants to know if you can use jspm as a replacement for Gulp? Or if you still think you need a build tool like gulp in addition.
>> Scott Moss: No you definitely don't need gulp for webpack or jspm. As far as I compiling down our ES2015 modules and our ES2015 codes, we don't need gulp for any of that.

[00:02:43] That’s not what gulp is doing, so definitely don't need gulp for that. But would I still use gulp with jspm, yeah, I would and that’s because I do other things than just transpiling as far as running a server. And creating documentation or as you can solve a made component tasks that generate component.

[00:03:01] So I still use gulp for those things but as far as like transpiling the files and what not, that'll be solely either jspm or Webpack.
>> Will: Cool, Horatio H wants to know what kind of strategy you would use for having dynamic templates. I think you kinda covered this with how Yeoman does things like prompting.

[00:03:26] The example he's giving is if inside /blog, you wanted to update post versus technical posts versus picture posts maybe. [CROSSTALK]
>> Scott Moss: But so like-
>> Will: So if you wanted a-
>> Scott Moss: Like this template right here?
>> Will: Component generation with different kinds of templates in it, yeah I suppose.

[00:03:50] Yeah.
>> Scott Moss: Okay so if it's on the component generation level then yeah that's basically, you need to configure the task that's making the generation. So the options we talked about where have like command line GUI that you can type and stuff are passing flags but it's like on the level of like I want that to be different at call time that has been executed in JavaScript.

[00:04:08] Then the way you would do that is you would have to have like, you have to make a link function here that would and then your component to have to take an attributes, right? Maybe I'll take it to objects that object might have different properties on it and depending on those properties of that object you would replace the template for this directive.

[00:04:25] So that's what he's talked about like I made a call to a server and once I'm outside control and I came back like passing that data to the blog directive and based on that data, I wanted to render a different component, or I mean, I'm sorry, a different template.

[00:04:37] Then yeah, that's how you would do that. So you would have to use the compile service for that though, and recompile the template for the directive.
>> Will: Cool, let me check in with Horatio to make sure that's that last one, thanks. Okay yep, so it was just what you were just explaining, cool.

[00:04:52]
>> Scott Moss: Okay.
>> Will: Trying to see if I had any other ones,
>> Will: John M wants to clarify are React Native script cross-platform or are they just for iOS?
>> Scott Moss: React Native is cross-platform they released iOS first they just released their first Android app couple weeks ago, it's a Facebook ad app built with Android and React Native.

[00:05:17] So they're gonna release a source for that eventually, it's not open source yet for Android. Native script is cross-platform right now for iOS, Android, and Windows.
>> Will: Cool, Dominic R wants to know thoughts on server side rendering versus client side rendering.
>> Scott Moss: Well and then there's a big argument as far as like SEO goes.

[00:05:37] That was like the thing a couple of years ago. SEO is great, which is true but Google's really good at rendering JavaScript. In fact, there's a really good read that I read a couple of weeks ago that talks about this. About how this company tested Google's crawler and how it renders JavaScript and their tests came back pretty pretty well.

[00:05:57] So here is this is block it's right here. We tested how Googlebot Crawls JavaScript, here's what we learn. Is a really good read was just published in May of this year and it's pretty good of how Google can read JavaScript, TL;DR is pretty good. So, SEO as an argument I think, I mean if you only care about Google I think you can get away with that, if you care about other search engines.

[00:06:20] Definitely want service that servers are running, but the other argument is like there first time to load, right? Because if you have a spa and your whole client, is downloading all the JavaScript in that first initial load your gonna have that time of delay it was trying to get that JavaScript.

[00:06:36] So service-side JavaScript or the new name which is universal JavaScript. The new term definitely better as far as like first time in a row turns out you can't really do it. Well, if at all, with Angular 1x right now, with React you can totally do it. Angular 2 my friends actually working on the integration for that and you can tell they do it.

[00:06:54] So if I had the choice to do it and that performance was a big thing for me I would definitely do it but I wouldn't do it for SEO.
>> Will: Cool, Miko R is asking if there's any component libraries worth using? I'm getting him to clarify at what he means.

[00:07:11] He said UI bootstrap, but not that.
>> Scott Moss: Yeah, Angular Material for sure. Supported by Angular and built in collaboration with the community and ionic team. This is a really good one. Probably the best one for Angular. There are other stuff out there that work pretty good. This was really guys.

[00:07:32] One of the better ones I've seen. There is AngularStrap which is really good to. It's like an alternative to Angular Bootstrap or Angular UI. This was actually kept up to date it doesn't have 30,000 pool requests like Angular UI does. So, if you are in a bootstrap you want that I would tell you use this one.

[00:07:59] So, those are the two that I can recommend at the top. I'm sorry one more, there is LumX. L-U-M-X this one's pretty good, too. It's a material design and it's built just for Angular.
>> Scott Moss: It's not turned up to Angular material. So, this one's really, really good, too.

[00:08:17] It's got some really cool stuff in it that I don't think angler has implemented yet but it's nice to see different approaches of the same thing. So this is really cool
>> Will: Would you mind posting links to those in the chat?
>> Scott Moss: Yeah I'm sorry I forgot.
>> Will: No, that's fine.

[00:08:38]
>> Scott Moss: Chat right here.
>> Will: I mean you just Googled the thing and clicked on it. So it's not like it's that hard. It does help to have them, I feel.
>> Scott Moss: Okay, I've got to log back in to the chat, any more questions?
>> Speaker 3: You can log into the chat on your own computer, it's easier.

[00:08:55]
>> Scott Moss: Yeah, I don't know why I'm not doing that.
>> Scott Moss: Is there any more questions over there, Will?
>> Will: We just got another one, does Webpack output bundle.css for production?
>> Scott Moss: No it just by default, so web pack doesn't know what to do is the loaders that does the job.

[00:09:23] So the loaders are the one that are there placing the CSS in the head tag so if you don't want the CSS in the head tag don't use a style loader. If you want to be bundled somewhere else. Then you would have to tell WebPack to split that up.

[00:09:38] And the configuration for that is on the WebPack website
>> Will: It looks like some of our cohorts are preempting you, in a good way.
>> Scott Moss: Nice.
>> Will: So I guess I'm a little fuzzy on how that works, from a
>> Will: Waterfall diagram like the performance output in the Chrome dev tools tab.

[00:10:13] What does that look like? So I load my page and I have just the one bundle.js, right?
>> Scott Moss: Right.
>> Will: And that starts running and it sees I need some CSS files and it goes and requests them. Or like before it gets served, it puts them in the head?

[00:10:29] Like of the html file?
>> Scott Moss: Yeah, so it's the JavaScript that's writing those script tags, right? So, browser loads up, there's nothing in the head. It sees the bundle.js, it loads that. The first thing that happens in our bundle.js is that it mocks common.js. That's the first thing it does, to make sure modules exist.

[00:10:48] And then, depending on the orders of your imports, if you import Angular or whatever first, it starts reading those. So let's assume you imported the stylus file there's CSS files first. If you go look at what that compiles down to it's actually just going to a dozen checks and it sees if there's a style tag in there already and if not it adds one.

[00:11:06] So that's what happens. The other JavaScript would our render first right? And then so that means until you go to another module. I want to put another style tag in there until you go to the first time, right? So yeah that's how that works but the JavaScript does have to load up first, It won't just like, assumes a page loads up and sticks it in there the bundle has to be read.

[00:11:25] So if you want to have that before, then yeah, you'd have to split that off. And so Webpack do not do this. I'm not gonna use a style tag, I'm just gonna just maybe I'm not really gonna use the tags. Maybe I'm just gonna use a regular link tags.

[00:11:38] Or if you want, just put them off and make a new CSS bundle file. Webpack can do that and so can go.