Building Awesomer Apps with Angular Component-Driven Architecture

Transcript from the "Component-Driven Architecture" Lesson

[00:00:00]
>> Lucas Ruebbelke: This is my all time favorite module. So, the goal of today, obviously is to find out how features can fit together. This is the crux of it. So with AngularJS, a real aha moment for me was I've been using the framework for while, and I saw things like ngRepeat.

[00:00:21] NgIf and these different kind of directives that ship with AngularJS, and then once I started to look at directives and how they work creating my own custom tags and elements, it kind of hit me. They're using Angular to write Angular.
>> Lucas Ruebbelke: Or AngularJS to write AngularJS so let's not get confused on semantics.

[00:00:39] But the ngIf, the ngClick, a lot of these things you saw, once you understand how to build directives, you can go and recreate the built in directives that ship with AngularJS. This is kind of a similar moment, is that this allows you to move from just using the framework to actually creating your own pieces.

[00:01:10] Essentially extending the framework to kind of be your own DSL. And this is the ability to actually create custom tags elements and properties. You don't hear people talk a lot about this, but essentially, we are turning HTML into a DSL. We are treating our markup as a domain specific language.

[00:01:31] And so somebody may look at a bunch of markups and say, I don't know what this does. So if you show it to a business analyst. Classic HTML, they're like, I don't what this div this, or I don't know whatever. But if they look at some markup, and you're dealing with, let's say customers and there's a customer tag on the page, they're gonna understand what that is, cuz you're using semantics specific to that domain.

[00:01:53] And so this is where component driven architecture comes in, is it allows us to take what we know about components and elevate it to create our own really custom properties and custom events and wire them together in a way that truly models the domain that we're in.
>> Lucas Ruebbelke: So we're gonna talk about component driven architecture, and just the contract that we create with component driven architecture, via input and output.

[00:02:27] We'll talk about inputs and outputs and then we'll take it a step further and talk about container and presentational components, formally known as smart and dumb components.
>> Lucas Ruebbelke: But first,
>> Lucas Ruebbelke: Story time. Everybody sit back, grab a hot cup of tea, put your feet up by the fire, we're going to talk about Angular.

[00:02:49] More specifically, we're gonna talk about AngularJS into Angular. So the first time that I started using AngularJS, it looked like this. It a very, very small controller and a very, very tiny app with a tiny template. In fact, if you go to the Natural Museum of AngularJS History, aka the website for AngularJS, you will see a bunch of these tiny apps on the page.

[00:03:19] Very, very small, tiny view + tiny controller. And so for me, the big hook was, coming from Adobe Flex, is that I really liked being able to have a property in my action script and being able to bind to it in my MXML, which is basically a markup variant.

[00:03:39] I started doing JavaScript jQuery, it was actually really hard to do, actually templating. Same templating, there was things to do it, but it wasn't great. Backbone was a little harder, I tried SJS with no luck. And then somebody showed me AngularJS, and I was like, this is easy.

[00:03:56] I can bind, two way data binding, hooray! And everything was amazing. This was a total honeymoon fit. Well, then I decided I wanted to do this for money. So I went to a team with developers and said hey, we should give this a shot. And, so, naturally our applications began to grow.

[00:04:19] And how they did that was the view just got bigger and the controller just got bigger. And for those of us who are new to Angular this is kind of a foreign concept but trust me, 0.9 up to 1.x this was a problem, is reality sinks in and now you are trying to put something into production.

[00:04:41] There's no real guidance on how a large scale AngularJS application should be put together and this is the problem we had. Our application just toppled over it was too big. I think at one point we had our main controller was, I don't know, thousands of lines of code long.

[00:05:04] And so it's like, I need to work on this thing. Do not touch anything after line 800. And that's just crazy. But because we had no real sense of structure, this is what happened. And it was just kind of prolonging the project with jQuery, so if you've never done a jQuery application, the problem is you're taking something that really was designed for DOM querying and trying to wrap an application around it.

[00:05:31] It's super bloncky. 1.x this was, unfortunately something that happened. And through tears, and pain, and suffering, we realized there has to be a better way. And there were two main ways, or two kind of, sane approaches that began to emerge. One is by the use of Named Routes, via UI router.

[00:05:57] So, ngRoute, very limited. But we had the ability to break our application up into smaller template control repairs. And so we might have on the left side, maybe nav, and then content, and then footer. But you were able to say, okay, let's break this up into smaller parts and target these parts via a Named Route.

[00:06:20] The next approach is by using directives. So you would still break your application up into kind of template controller pairs, but you would wrap them in a directive. So instead of targeting a named route, you would have a nav directive. And you would have a content directive and a photo directive.

[00:06:41] But what you're doing is you're taking this large controller, large template, and breaking up into smaller more specific pieces. Well, this was kind of the way of the world, where everything was going, so with web components being a real and viable standard, and with a large portion of developers kind of jumping on this directive as a architecture pattern approach.

[00:07:10] And then I think when React came in, it was components all the way, I think that was really where we kind of like, this works. And so the Angular team just said we are going to take this directive idea, and it's going to be component. So we're gonna create better semantics and better mechanisms.

[00:07:26] But we're still going to break our application up into small single purpose components that we then put together.
>> Lucas Ruebbelke: And so, this solved the structure problem. So no longer did we have this 4,000 line controller, this 4,000 line template cuz we were able to break things up into small pieces.

[00:07:48] But we still have a communication problem. How do our components talk? And so this is kind of the next piece that we're gonna talk about. So we're gonna talk about, one, breaking up your things in to small pieces. So we've kind of seen that, but now, the communication between these components is really what we're going with inputs and outputs in the contrast, and I think it's really, really neat.

[00:08:16] So, components of an architecture, it's just this concept of breaking your application into small encapsulated pieces of software. And that can be used in many different context, so in our sample application we have an items list in the items page. Makes sense, right? But we also have it in the home page.

[00:08:39] And so if you jump into mastery, you'll notice that there's some components on the home page. Well we can also put those anywhere else in the application. And so this allows us to take one thing and use it over and over and over. Even to the point we're using angular material and we're passing around components.

[00:08:57] So these are very general components but they're very reusable. I can have an Angular material button over here, and over here, and over here, and over here. So this idea of having these encapsulated portable pieces of functionality that we can move around, believe it or not, this was not really a thing a few years ago in front end applications.

[00:09:20] Certainly not in jQuery. No Backbone, AngularJS, they started to work on that, and I think we've finally arrived at the golden standard, and this is component driven architecture.
>> Lucas Ruebbelke: So as we've seen and you answered very well, is this morning is it's templates, styles and logic, encapsulates everything.

[00:09:42] Actually let me go back and make one point real quick.
>> Lucas Ruebbelke: So when AngularJS was created, there was no real sense of how things were supposed to go together and we kind of learned along the way. With Angular 2 and above is they kind of just encouraged by just the nature of the framework to do component driven architecture.

[00:10:02] It just is the easiest way to do it so just imagine you're on top of a mountain and you got a path going down. It's like, okay, you're going down the mountain this way. It's guiding me down the mountain, or I can just roll down the mountain over here on my side in a barrel or something.

[00:10:20] That's kind of the equivalent is like, here's the path. Let's just walk down the mountain.