Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Final Q&A, part 3" 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 wraps up the course answering one last audience question about tips for beginners. He also leaves the group with a few useful animation resources for components and SVG files.

Get Unlimited Access Now

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

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

[00:00:03]
>> Speaker 2: So you hosted the notes for the workshop on net [INAUDIBLE]
>> Scott Moss: Yeah.
>> Speaker 2: What is that?
>> Scott Moss: Neda file?
>> Speaker 2: Do you like it?
>> Scott Moss: Where is it at? Neda file. Where did it go? I don't know where it went. This is it, yeah, okay. I literally just found it two days ago I was looking I was like I need to host some static site and I Googled and this came up and I was because I use it as use like firebase deployed as it's so easy to fivers deploy I was, it's an opportunity to find something new.

[00:00:36] So I looked up and I saw this and all it was drag a folder over to it and it deployed aside two seconds. So I used it, it was free. I didn't have to sign up for anything. So that's why I use it, so I don't know how much I like it, yet other than the fact that it definitely uploaded to a site in two seconds yeah and the dash for it looks really nice.

[00:00:55] And hopefully it stays up. Hopefully it stays up [LAUGH].
>> Speaker 2: If it gets longer, I don't know.
>> Scott Moss: If not, what I'll do is we could put the URL on the readme in the repo. It's here's the URL for the notes, if it changes.
>> Speaker 2: I've got 1 more question here.

[00:01:13] Abdula wants to know, what advice would you give to beginners approaching ES6 not having much experience with Angular either?
>> Scott Moss: Well there's ES2015 course here Front End Masters. I actually took that one. And that's how I got excited when I used 2015 air frost as want to strike that does that not guys amazing.

[00:01:33] So definitely check that if you're in the ES 2015. He goes in a way more depth about everything that we talked about just way more in-depth and then as far as Angular there's like two approaches I take when learning something new. The first way is I try to go very practical with it and that's learn how to use it very well and only way to do that is if you just start building stuff with it all right.

[00:01:53] Because if you start building something let's say in this case Angular let's say you start rebuilding Twitter with Angular just the front end. So what happen is you read a blog post to see how to get started. Then you'll get started and then you ran into an error but the error is great because that error is gonna explain to you.

[00:02:09] It's gonna help you format and a very direct question on what to ask your friend or the Internet or whatever and you get a very specific answer back versus how do I get started with Angular you get a whole bunch of answers. But if you just Googled this one error or if you asked someone else this one error, or if you jut read this one error you'll get a great specific answer.

[00:02:27] So if you just start first you'll be great. So I'll start building stuff, a couple of apps here and there until I feel like I'm very good at using it. Even though I don't understand what's going on underneath it. Once I get to that point where I'm just comfortable as using it then I'll try go understand it and that started committing it.

[00:02:44] So I go to GitHub, fork it go like angular has a good, they do a good job on the repo of like separating out the issues by like how difficult they are so you can go like pick easy ones like they might be comments they might be whatever.

[00:02:57] Some people even like they will open up issues like here's a solution code. Somebody want to paste this in. Here's a test for it. Somebody who wanna pay this in and get a commit and like ook for opportunities like that to help, where your confidence on open source and also understand a framework and then if you really are up for it.

[00:03:12] Start trying to rebuild different components of the framework to help you understand it a little more. That's gonna help you and then start developing your own plugins for the framework. And then now you know how to use it very well and now you actually understand how it works.

[00:03:26] So that's the approach that I do in that order. I don't do the how it works first, I just get lost. I have no context.
>> Speaker 2: Right.
>> Scott Moss: If I try to understand how it works.
>> Speaker 2: Have you looked at Tero Parviainen's book, How to build your own Angular.

[00:03:40]
>> Scott Moss: How to build your own Angular, yeah, that one's pretty good actually. I read the first chapter of it, and it actually gave me the motivation to start rebuilding it for myself. So yeah, that's actually a really good book. At least the first couple chapters about rebuilding the scope, that's kind of where I left off, was actually really, really good.

[00:03:53] So I can't recommend the books that I've never really finished it but I know the first those first couple chapters were pretty exciting pretty good really detailed on how something it looks like magic really is it. It's, that's that's all it does like I don't know that until I kind of like brought angular down a level like yeah you're just a framework, so.

[00:04:15] [LAUGH] Any other questions?
>> Scott Moss: All right, if we don't have any other questions what I'm gonna do is I'm gonna show you some cool stuff that I wanted to show everybody that was on my mind. One thing was this thing called RamJet. You've ever seen that? Man, check this out.

[00:04:41] Get out of here, Google. There you go, Rich-Harris, there it is. This was legit, especially, if you're a big fan of animations or material design or whatever. So this is an animation library that animates one element to another element. It's pretty, pretty awesome. So this is great for material, because they have transitions and their spec are supposed to work like this.

[00:05:05] So, check this one out. I'm trying to make the animation library using this, but I haven't had the time. So, this is really good. There is a another one for SVGs. Let me see if I can remember the name of it. Vivus, so vivus is an animation library for SVGs.

[00:05:29] I actually got to show the demo page that's what I got to do, it's just ridiculous. So it was like draws the stuff on your page. I like different types of animations and this is like pretty good. It makes it pretty easy to do it too. So yeah I realize I'm just in love with animation so.

[00:05:53]
>> Speaker 2: So you're gonna love Cirus course?
>> Scott Moss: Yeah, I'm like I can't wait for it.
>> Speaker 2: Yeah a couple months.
>> Scott Moss: I will be on.
>> Speaker 2: You'll be on?
>> Scott Moss: Yeah. [LAUGH]
>> Speaker 2: Nice.
>> Scott Moss: I will be on. This one's cool. I'll post these links in the chat here.

[00:06:11]
>> Scott Moss: And then there's-
>> Speaker 2: John M was asking if RamJet's hardware accelerated?
>> Scott Moss: Yes, it is, I hope so. I haven't looked at the source code but just by looking at it. Yeah, it better be.
>> Scott Moss: The other one I wanted to show you was dynamics,
>> Scott Moss: Dynamics.

[00:06:38]
>> Speaker 2: Rob W wants to know if it's important to provide fallbacks for people with JS disabled? He heard a recent podcast saying it was lazy not to.
>> Scott Moss: Are we talking about animations or just in general?
>> Speaker 2: Just in general I think.
>> Scott Moss: Yeah, I mean if accessibility is your thing, then yeah.

[00:06:54] I mean like, there are times where. So, if you're making a website. I don't know, a blog or something. Yeah, you should probably have it to where it could run without JavaScript. But if you're like making an internal dashboard for your team. Why they have JavaScript off? So I guess it depends on who your audience is or who your customer is so yeah.

[00:07:16] I guess the rule of thumb is if you have like a concept heavy website like this just like its value is it in its content? Then yeah you should be able to interact with its website without JavaScript but if your website is like based off of just interactions it's value it's like interaction is an app it does something.

[00:07:37] It's like a real time thing or whatever then you probably need JavaScript so I guess that's like my rule of thumb.
>> Speaker 2: Cool, let's see Biko are I'm not sure I understand this question but he's asking how do you handle template cache invalidation server side or does webpack do hashing filenames or?

[00:07:56]
>> Scott Moss: Yes, they do, they hashing filenames. Good question, so webpack handles, yeah, that's like super advanced webpack. We didn't talk about any of that, but yeah. Webpack will handle hashing the filenames and everything. Let me show you where it's at in code splitting? I'm not sure where it is here I can look forever but there's a there's a spot I shows you how it handles the different hashes and how you just set them to whatever you want, so yeah it will do that.

[00:08:30] Again this is the other thing dynamics.js animation library just recently released by this guy who works at stripe. Who if you can look at their website lately they have made a lot of attention for their pretty sweet animations. And he just opened source animation library that he used to create this stuff.

[00:08:45] This is really good. It's like physics based animation. It's like, theory like famous, it kind of feels like that, but it definitely isn't the same API. This one's pretty cool. Other cool stuff, I can't think of anything else that's super cool that you, I actually have like a bookmark that just says cool stuff but I think it's outdated, so I can't think of anything else.

[00:09:17]
>> Speaker 2: I have a personal question.
>> Scott Moss: Yo.
>> Speaker 2: We're kind of deploying an architecture in-house, where we'll be building some components that teams will share around. So one team might want 5 out of 15 components we build, another team might want a different four, another team might want three of those or something with some overlap.

[00:09:40] I've been kind of debating with the junior people I have building out our build process, should I be bundling up separate packages of the components that make sense? So maybe a blog and blog post and add blog and then a some other set of other ones that have like four or five different bundles.

[00:10:10]
>> Scott Moss: Right.
>> Speaker 2: Plus the aggregate set or does it make more sense for us to just have the aggregate set and ship that to everyone and let them pick and choose what they need out of it.
>> Scott Moss: Yeah I mean that's I guess it depends on that there's a lot of things behind that.

[00:10:24] But I guess it depends on how you made your component like what are you using? Are you using angular?
>> Speaker 2: Yeah.
>> Scott Moss: Okay, so if you're using angular. If you are really moderate with a follow like approach like this which you could do you could rely on my sometime package management system right and that way each component would know which component it needed and who is download it right so that when you don't have the pre-bought of them.

[00:10:44] You can just say I made new package. All right, I'm making a new blog component or a blog post component. Actually, I'm making a new blog component, but it needs the blog post component, too. So, what you would do is, and init.packaged.json you would say, you need this as well.

[00:10:58] So, when you npn install that blog post or, I'm sorry, that blog component, it would also npn install the blog post component. That way you don't have to bundle it yourself. But, then you need a private npn register or something like that. Or if you don't mind put the public out there, you can put them in public, but you know you need something like.

[00:11:15] That way you will not have to really worry about that, but if you didn't have that what I would do is I would just definitely separate all of them for sure, but then what you would do is you would go back in then you would be like okay.

[00:11:28] Is there any chance that I would ever use this component without this one. Any chance and if there is, keep them separate. If there's no chance, then bundle them keep them just like that they're always gonna be the other and just keeping together and then you already separated to begin with.

[00:11:42] So the option is there too just in case they want to take that component and add it to another one as well so it's because it's always born with this one doesn't mean it will be bundled up with another one as well, right? It's still one of them separately.

[00:11:53]
>> Speaker 2: One other question. I'm on a team that's still getting very used to these newer technologies. So, me personally, super excited. I would want to write you a six code would want to use Web pack. Do all of these really awesome things that would make life easier.
>> Scott Moss: Right.

[00:12:20]
>> Speaker 2: But at the same time it's a struggle for basic JavaScript like ES-5 concepts for some and there's a lot of still kind of mental churn going on with other tooling like basic tooling like git and it's just I'm not really sure whether that just kind of how much firehose I can have them drink fro and whether like if I can add this, if I get away with it or if it would just-

[00:12:53]
>> Scott Moss: If it were me-
>> Speaker 2: Create three to six months of just people not doing anything about this.
>> Scott Moss: If it were me I would just add it, to be honest. They're engineers, that's their job. They're supposed to know nothing but figure everything out. I would just add it [LAUGH].

[00:13:06]
>> Speaker 3: And then, Scott, we made tests make sure that everyone you know for me.
>> Scott Moss: Yeah exactly. I was out because I mean if you say that any experiences might be a great opportunity for them to get experience with something new.
>> Speaker 2: Yeah.
>> Scott Moss: So this could be a good time for the latter.

[00:13:21] It might be a little hard at it if you have a team full of experienced people who don't wanna change they don't want something new that's like no we use this we've been using it forever it works, right? Whereas you are like, okay well this is new. So, this might be really, really good.

[00:13:34]
>> Speaker 2: And the fact that you could just easily go ahead and add a built system and start using ES2015 now, without changing any of your other codes.
>> Scott Moss: It will still work fine. That means that they can still continue to write what they feel comfortable writing and you could start writing the new features now.

[00:13:47]
>> Speaker 2: Yeah.
>> Scott Moss: All right, and along the way, teach them and leave them some good comments behind. Let them know what's going on. Or maybe update or read me something like that.
>> Speaker 2: Yeah.
>> Scott Moss: And eventually you know it will happen progressively