This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "CIDER" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Lukas Ruebbelke: The previous two modules are the most dense modules in this workshop. So, we had the high-level view and then we had the tooling. I've personally found that 90% of my frustration comes from something has jumped the tracks in the tooling. And that's something that every major framework is struggling with right now, is that JavaScript is evolving incredibly fast.
[00:00:29] I mean look where it was, look how long ES5 existed before ES6 came down the road. I mean it was traditionally, I think, a ten-year release cycle, and then now it's like 2015, 2016. And so, just the tooling and everything that's trying to keep up. We're in a real state of, I think, transition and things are evolving very quickly.
[00:00:51] And I would say easily one of the biggest things that I had the most pain with when it comes to Angular 2 is the tooling. I've upgraded, something moved, and it's broken again, and I have to figure that out. But once you get it going, once you get it working rather, it just kind of is like a videographer or a sound person, they're just in the back, they do their job and it works excellent.
[00:01:16] Love you, guys. And you don't have to think about it until something goes wrong. So, with that said, the module is going forward. We're gonna be a little bit more focused, they're not going to take us long, and it's going to be a bit shorter, and we'll get into the challenges quicker.
[00:01:32] So, the hard part is done and let's build some code. Actually, before I get started, does anybody have any questions from this morning online, in real life, Scott, what do you wanna know?
>> Scott Moss: I wanna know your favorite dessert.
>> Lukas Ruebbelke: Ooh.
>> Lukas Ruebbelke: French cruller, I'm a doughnut guy, and a French cruller is the best.
[00:01:58] It's the baseline for all great doughnut shops. And he's actually writing that on the wall over there. At 17:05, Lukas made heartfelt admission that French cruller is his favorite dessert. So, anyways, if there are no questions, let's get into component fundamentals. So, component fundamentals is, remember I talked about CIDER earlier, and again, this is just a mnemonic that I've come up with that is helpful for me.
[00:02:28] And so, it's class, define your class, whatever you're doing. Define the initial import. Decorate your class, enhance it, so iterate over that. So this is more, it's part art, part science, and then you repeat or refactor until you are feature complete. And then, we'll talk about that for a bit, and then get into lifecycle hooks.
[00:02:50] Yes, I see a hand there.
>> Speaker 3: We're just a little bit behind, so now a couple of questions rolled in.
>> Lukas Ruebbelke: Okay.
>> Speaker 3: You mentioned never extracting the HTML into an external file. What if you wanna use SLIM?
>> Lukas Ruebbelke: So, I'd never said never, never. So, the question is what if you wanted to use SLIM which I'm presuming is like a post, like a pre-processor for HTML?
[00:03:20] It's a DIAL light. Webpack, I'm just kidding. [LAUGH] I've never used SLIM, so I'm actually gonna defer to Scott, but I guess the question would be, what if you wanna do Hammel or some other thing?
>> Scott Moss: Yeah, totally break your HTML out in another file, that's why it's HTML.
[00:03:42] The sweet thing about using a Bundler like Webpack is that you can import that template in at build time, therefore, saving yourself a call across the network at runtime. So, if you have a Bundler, yeah, totally break out another file, and if you have Webpack, which is awesome, it will bring anything in as a string.
[00:04:02] So, build in an HTML file, whatever it is, SLIM, Hammel, Jay, whatever it is, compile it with Webpack, bring it in as a string, feed it to your component, and you're done.
>> Speaker 4: This angular what different templating languages in line?
>> Lukas Ruebbelke: So, by separating out the rendering layer is I think that the idea is that you could actually target just about anything.
[00:04:26] So, there's been talk about Tobias and I, Tobeis rather, have talked about doing a WebGL rendering layer. You have Universal which is a pretty phenomenal project, and so, really, the idea is you could put anything in there. In Angular 1, I was on a very large project, and we actually used Require, which would then take all of our templates and just convert them into strings.
[00:04:51] And so, instead of using template URL, you would just use template. And one of the things, especially if you're going to do mobile, the most expensive operation you can do on a mobile device is actually make a remote call. Because you actually have to have a handshake with your device to the cell tower, then you have to go fetch the resource, and then you got the handshake back, and it's really, really time-intensive and resource-intensive on your mobile device.
[00:05:16] And so, you are much better compiling that all into a single bundle and taking that hit upfront, instead of incurring like 20 asynchronous calls over the network. It's just gonna wipe your phone out, it's gonna get expensive, so to that, Hammel can pile it into, or SLIM can pile it into regular HTML and import it as a string.
[00:05:37] Yes, sir?
>> Speaker 5: One thing that I've been doing is you can actually use Require, and in components [CROSSTALK].
>> Lukas Ruebbelke: Yes.
>> Speaker 5: So, in your template, in your component decorator for the template variable, you can do Require, and give it a final name, and it will bring that in.
[00:05:55]
>> Lukas Ruebbelke: That's what I've done. And then, that all gets bundled. So, bundle all the things and use whatever you would like. Because it's all going to end up as HTML and JavaScript at the end of the day. I think that's really cool because you now have a lot of options of what do you wanna do it in, and how do you wanna write your CSS, how do you wanna write your HTML, how do you wanna do your JavaScript?
[00:06:21] It all gets bundled, and as long as it ends up in the format that the browser can understand, and that Angular can understand, you're good to go. And so, again, the cognitive overhead, the setting up tooling is a little high, especially for, if you kinda have a jQuery, UI design background, it's really foreign.
[00:06:41] But once you kind of sort that out, then you have a lot more options and a lot more fine grain control over what you're doing, as well as from a DevOps perspective, it's really nice when you can say, I wanna do a local build that I can essentially debug, but when I do it to my development server, I want yet another version.
[00:06:58] And when I do it to production, I want even another version. And so, just kind of taking that overhead initially and setting up a good build system, it's going to set you up for success for actually putting something into production and having it be stable.
>> Lukas Ruebbelke: Any other questions?
[00:07:15]
>> Speaker 6: What are are the best resources for learning how to configure Webpack?
>> Lukas Ruebbelke: What?
>> Scott Moss: So, for me, what worked for me was very generic, but the first thing I did was I looked at the docs, then that confused me. So then, I found somebody smarter than me online and I read their blog post or I looked at their and then what I started doing was I started picking things that worked, because build systems are very unique to the person's project that they created, so you can't really just copy and paste somebody's build system Unless you are going to make your project look exactly like theirs, too.
[00:07:55] So, then what I did was, from what I learned from the docs and from what I knew I needed to do, I would just pick the things that worked from other blog posts and reposts that I saw. And then once I was familiar with how to use Webpack, I then referenced that to how Webpack actually worked by going back to the docs.
[00:08:14] So, it was a change of going to the docs, and copying other people's code until I figured out what were.
>> Lukas Ruebbelke: And in my case, I found a C project that just worked which was the Webpack starter from Angular class. And I started to just kinda go through it.
[00:08:28] And it's really, initially, your goal is just to get something up and running as soon as possible. And so, I started with a project seed, and then I went through some different videos, on Egghead and different things, started just reading and started to fill that in. Pete Hunt actually has some pretty good stuff out there about Webpack.
[00:08:45] And so, I would say, first and foremost, find something that works, and just start to play with it and see what happens when you turn this dial or this knob, or you do this. And sometimes it'll just blow up, and then you just revert your thing,or whatever, just undo it, and just keep doing it.
[00:09:02] So, a lot of times I start very practical and it would start to augment of, what does ambient mean? Well, you go look it up and then you start to fill those pieces in. But for me, personally, I would say this is something you kind of have to do, because every project is different.
[00:09:17] You really need to understand kind of the moving pieces, and how to dial it in to your specific project. And so, I'm completely on board with Scott that it's really helpful to, at an atomic level, understand what is happening. And some things like, for instance, change detection in Angular or something, you can use Angular and not understand that and you're still okay.
[00:09:37] For instance, I digest food and I don't have to worry about what's happening or how it's happening. Thank God. But with a build system, I think it's really important to understand specifically, the pieces, why they're there, and what's going on. Because I had a situation where I built a gold script for somebody and somebody moved the home or the index.html page into another directory.
[00:10:02] And because this individual I gave it to did not understand the pieces, the build was completely broken, he couldn't figure it out. So, what I had to do is I just went into my config block and I said, just point to the actual index.html and you're good to go.
[00:10:15] And so, that's a case of had you understood like, it's looking for my index page here, it's actually over here, this is why the build is breaking. So, in this case, experience is the greatest resource, trademarked, I need a t-shirt that says that. Next question?
>> Speaker 7: I'm caught up here.
[00:10:38]
>> Lukas Ruebbelke: You're caught up? Scott, are you caught up?
>> Scott Moss: Yes.
>> Lukas Ruebbelke: All right, so we're just gonna talk about CIDER, and we'll see some lifecycle hooks, and possibly even see how to write a test in Angular 2 for a component. I'm not as brave as Scott for life coding, and so, I very rarely have YOLO moments when I'm at a public forum like this, but we're friends and so, we'll see