Charles Max Wood and Lukas Reubbelke talk about resources and learning Angular.js.

 

Hey everybody, and welcome to episode 4 of The Adventures in Angular Podcast. This week on our panel, we have Lukas… I’m still not sure how to say your last name.

It's like it's like ‘Milwaukee’ but with a Russian Ruble, so it's ‘Ruebbelke’.

Ruebbelke, awesome. And I'm Charles Max Wood from devchat.tv. And this week, we are going to be talking about How to Learn Angular, you know, the resources, recommendations that we have that you can use to pick up on how to learn Angular. And then, we are going to talk about some projects that you can use to get used to have Angular works.

So, I'm still kind of new to Angular. I’ve been using it for this one project. If you go to devchat.tv or if you go to AdventuresInAngular.com, it will take you to devchat.tv, and that’s all using Angular. But, I'm still figuring out some things. So I'm really curious, if somebody is brand new, where do you usually tell them to start?

That is a very interesting question. I think the first place to obviously start is with the AngularJS.org site. And to kind of click through and kind of familiarize yourself with the high level pieces. With that said, it's kind of like when you are learning an instrument; you have your theory that really helps to kind of understand like, “Oh, I'm doing this chord progression. This is why this does this. These are the notes, these are the harmonic movements.” But then, there's nothing like sitting down and actually playing the instrument. And so, I think that there are some really, really good resources out there.

One resource that I still use even for myself is egghead.io; a lot of just great free content out there. One of my favorite blogs is yearofmoo.com by my BFF, Matias, is really, really excellent. He got some really kind of great, long form post out there. And he wrote ng-animate, which is one of my favorite pieces of Angular. And then, ng-newsletter by Ari Lerner is really fantastic. So that’s a nice way to kind of aggregate anything that is new that is coming out, is a lot of times I find out from ngnewsletter just because, unfortunately, I'm not omnipresent and I do not know everything.

With that said, there's nothing like actually just getting in, and just writing a lot of Angular as fast as possible. And so when I started learning Angular, is I started out in JSFiddle, and I actually went over to Plunker. And I would just come up with an idea, and I would iterate over it -- sometimes 150 times before I would get it to where I would want it to be -- and that was really helpful.

As well as I really think that putting yourself out there, and writing a blog post or saying, “I have this idea from start to finish. Here's the source code, and this is my thought process.” And when I started doing that for my blog, onehungrymind.com, it was pretty funny because Angular was just getting started, and so Miško and Igor would get on there and be like, “That’s a pretty good idea, but this is really how you wanted to do it.” And so just by putting myself out there, getting eyes on it, I was able to get these feedback loops, where I was always kind of evolving my thoughts. So even over the course of my blog post, is just even my ideas have continued to evolve.

expose yourself to plenty of the blog post, but just really, don’t be afraid to get in and try stuff, and then put it out there for feedback. So I hope that was helpful.

Yeah, I think it really is. I have to say that a lot of the resources that you mentioned, I’ve looked like AngularJS.org. I mean, the documentation there is pretty good. You do have to have a basic understanding of how Angular works to understand some of the stuff that’s a little further in, but the documentation is terrific. I've browsed through egghead.io. I didn’t know about ng-newsletter, so that’s awesome. One other resource that I reach out to all the time is Joe. [Chuckles] Joe Eames. It’s like, “How do I do this?” And yeah, he walked me through the ideas behind it, and then sent me a Plunker, and then I just played with it.

Yeah.

One other thing that I really want to mention is go find a project that is using AngularJS, and go fiddle with it.

Yes, absolutely.

That’s something that I’ve done as I’ve been working on devchat.tv. I actually have another developer helping me out, and we are both learning Angular together, so we'll pair on stuff and figure things out. But you know, I'll go and look at what he did, and “Oh, I get it. That’s how this works.” “I can inject this kind of thing in here.” And it works out really nicely. And that’s paid off.

Another one is I’ve got a project that I’ve built a while back, and I just did the lazy thing and just built jQuery stuff around it. And so I’ve been tempted to go back on just a really simple project, and work on that and convert it to Angular. And that way, I can understand, “Ok, these kinds of interactions lend themselves really nicely to these structures or directives in Angular.

I used a metaphor earlier, but I think there's a lot of kind of parallels there is a musician friend that is just phenomenal. He said, “If you wanna learn to play something, find somebody that is already doing it and imitate their style. And then pull those pieces in and imitate and imitate, until you actually simulate those ideas into kind of your own toolbox, and then you just start to express those naturally.” And so applying that to learning Angular or anything, is find a project that’s doing something that is interesting to you, and then just imitate it; pull that piece in and start to kind of iterate over and think about it and try to extend it, until you just work it into your toolbox, and you just do it without even thinking.

So let me give you an example. Ui-router is a really powerful routing state machine mechanism, but how I actually learned UI-router is from actually porting a prototype over into production code, and just taking those ideas and actually pulling them over and then having to kind of think about them and fiddle with them, and then extend them. And so it's like somebody saying, “Here's that on another language; repeat after me.” Then try to say something else or build on top of it. So, there's a lot of iteration; a lot of feedback loops.

So I will also make a few plugs for just some content that’s out there. So egghead.io is really great for small, bite sized lessons about, “Here’s how a specific piece of Angular works,” that is really helpful to like, “Oh, I really need to see how to do ‘controller as’,” or something like that.

I'm currently putting together a build an app from start to finish, and so that’s kind of the first part of that is a free course that’s being released. With that said, Joe Eames’s PluralSight course is really excellent. I’ve been doing Angular for quite a while, and I just went back and just went through it. And I picked up some nuggets out of there, as well as Ari Lerner’s book, The ng-book is a massive book with a ton of really great content. And Ari Lerner is just a really, really all-around smart guy. And so I love his blog post and his content.

As well as Matias and I have an Angular foundation course on O'Reilly. And we approach that a little bit differently, where we did kind of the lectures of like, “Here's the 80/20 Rule on Angular.” (And I'll elaborate on just a moment.) So like, here’s some thoughts and here’s some of the contents. And then Matias kind of digs in and actually shows you an example of that. But then, there's actually a project with challenges in there. So they are actually separated in the sense that, “Here’s the idea. Now, here’s the challenge, and try to apply what we’ve just showed you.” And that's another interesting way to learn Angular. Matias obviously is very, very good. He's done a lot of stuff for the Angular course. And so kind of seeing his thought process, the first time I actually saw him code was very enlightening to just see him do something that I've done a thousand times just differently. And so those are I think some really good and effective resources.

If you don’t mind, I'll actually elaborate on the 80/20 Rule on Angular for just a moment, because I think it's really important to kind of delineate that Angular on the surface, is really easy to get it up and running. And so you can actually have this semblance for like full-fledged application. And actually, not even write any JavaScript. A lot of times when I do an Angular… so I use something like ‘ng-init’ and initialize my variables and then I'll bind to it in the application. And also, you got this kind of dynamic content and there's no JavaScript.

And so, very quickly, right out of the gate, using two-way data binding and if you understand how a controller and a view works, is you can build out pretty much a full-fledged prototype. And so you'll find that just as JavaScript has the good parts, is not that Angular (and I'm not implying that there’s bad parts,) but that there seems to be this core set of components that I keep coming back to, and I use over and over and over. And once you kind of see like, “Oh, it's really kind of these 5-8 pieces that it makes it really easy to kind of wrap your mind around.”

And so you kind of have the module, and then from there, you have your view scope and controller. And if you need to extend your view, then you have the directive. And if you need to extend your controller, then you have basically a service. And then within the module, then you can use the config block, setup your routes. And so I believe that is seven pieces right there that I just mentioned. And I actually have a graphic, Charles, that I'll actually send to you, that you can actually post.

And so once people who are new to Angular, and I say, “Look, here's kind of the world vie;, it's really 7-8 pieces on the board, and these are how it fits together.” It really makes it easy to kind of say like, “Ok, I know there are some complex stuff under the covers.” So once you get in to directives and testing, and some of the really advanced stuff like, I’ve really been digging on service interceptors or ACP interceptors, and service decorators and kind of aspect oriented stuff, is you can just take that as far as you want. But at the core is you'll always kind of come back to these core pieces that you'll just use over and over. And somebody, I really believe can really start to wrap their mind around them in just a couple hours and get it up and running, which is really awesome because it's about building stuff and having fun, and kind of that cause and effect.

And I think just the way you’ve explained it right here and now really kind of helped me, “Oh, ok.

That makes a lot of sense.” So the directives, they add functionality to the view and the services add functionality to the controller.

I keep hearing that Angular is MVC, and I don’t really see a whole lot of the ‘M’.

So, I will give you the ‘MV Whatever version according to Lukas.’ And so that’s where the Angular team takes kind of the official stance of, “Hey, we are MV Whatever.” And I say, use the ‘whatever’ to be ‘whatever’ makes you more productive.

For me, having a Flex background in using a view model, is I tend to think of it as kind of the MVVM. And so, your view is essentially your Angular-compiled DOM. So that’s pretty easy. And then your view model is essentially your controller. And so you want your controller to be very lightweight, very specific and only concerned about controlling the view that it's associated with. So I see the controller and scope essentially as kind of one entity, but that being the view model.

And then from there, the model -- as I see it -- is kind of your domain model. And so that is essentially like the data or the state that you need to share across your entire application. And so like for instance, let’s say we have a user’s model that store all the user’s information for the entire application. So essentially, the services would be the big ‘M’, but for a domain model.

So that’s kind of how I see it. You’ll have to squint your eyes a little bit to make that kind of fit into the MVC or even the MVVM kind of paradigm. But I think that with that said is Angular is very prescriptive, but it's not restrictive. And so something doesn’t make sense, you are like, “Yeah, I know this is supposed to be ‘M’, but it just doesn’t make sense or it just doesn’t fit in to what I'm doing.” Then You kind of have the prerogative to change that up a little bit, or do what makes sense to the project. I don’t think you really benefit do a design pattern for the sake of doing a design pattern.

I definitely agree. And I’ve seen that, for example, the controllers, they are pretty free-form. All that really matters is that you bind the right stuff to scope, and then you manage the behavior properly.

And so, it's very flexible.

Yeah. Just keeping it lightweight. I think what you wanna be careful of is not to allow your controllers to get kind of fat. Kind of the rule of thumb that I like to use is if you imagine an application that you are building, and then you imagine that being a just wireframe. And so if you printed out the page and then you were just drawing boxes on the page and saying, “This left hand thing is, this is like the nav, and the right hand thing is the content.” If I tend to try to write my controllers, kind of where those components or the frames within wire frame, instead of having one really large controller that’s controlling 4-5 different page. And so from an architectural stand point, it's really keeping your controllers light, and specific to a specific piece of functionality within a page. If that makes sense.

Yeah, it makes sense to me. One other thing that I really encourage people when they are getting into a new framework or library or language is to go and actually make some sausage.

Yeah.

Go out there and grind through the meat and figure out how it all works together. Because it's one thing to understand it sort of academically; “I’ve read all the docs and I know how it works,” but it's a completely different thing to actually go and build something. So I'm curious, what kind of projects do you point people to?

I really think this would be kind of the tips and tricks thing is a really good way to actually start to see stuff is if you go to Plunker, and you start looking at all the Angular plunks, it's really kind of a low-risk way to jump in there, because you can port Plunks and start to play with it. That’s a really good one. As well as within even the Angular documentation is they link out the Plunks. And so that’s a really good way to kind of start to play with things.

One thing that I will say is Thomas Burleson who was at ng-conf, (he's going to be at ng-conf europe) and he's been a mentor and a friend to me for quite some time, he has some really incredible examples in his GitHub repo. And we'll post that link, but he has, even on his blog, he has a ton of great content kind of just elaborated on those projects. And so I would say, for anybody looking to get started and to see how a large Angular project is put together, is definitely check out Thomas’ work.

His blog is solutionoptimist.com, and he did this full-on Angular application. So it's like a piece of configurator but it's built on top of the Mean stack, as well as Breeze. And it's pretty phenomenal. So, solutionoptimist.com. And then from there, you can check out his GitHub repo. And he has a lot of great material there. And so, that will be I think just off the bat, somebody says, “Quick. 5 seconds, I need to know how where to start.” I would say, “Check out Thomas’ GitHub repo.”

Very cool. One thing that I did find that was kind of fun was that I have this vendetta against spreadsheets.

Yeah.

Spreadsheet software. So whether it's Google’s or Microsoft’s or Apple’s, spreadsheet are just such a pain. And part of the reason is that they are fairly generic. And so, I don’t recommend that you go get like this big, hairy accounting spreadsheet, but a lot of people use spreadsheets for things that are a little custom thing would work really nicely for. And I found that those are really nice kind of focused thing that you can go and build out.

So I had one person that was doing scheduling in a spreadsheet. And so by applying that to Angular, I mean yeah, date math is hard and sucks, but a lot of the rest of it where it was tallying things up and whatever, that’s all pretty easy. And Angular plays nicely in keeping track of your data, and plugging everything together and doing that kind of work. And so if you need to tabulate, collect or everything like that, Angular is really nice for that. And so you get in and you build something out in a couple of hours, that replaces the spreadsheet. And I think it gives you a real good idea of how the workings of Angular go together. And so that’s one project that I hear recommended.

Another one, I asked this question in general, and all of my EmberJS friends said, “Go build a Gmail clone.” But I don’t think people have the time to go take on a project that ambitious.

Right.

And I think, really, just something simple. So if you can see something, you wanna make some connections between some data, go build them with Angular.

Yes. Another one that I did forget, or I was saving for last is, I am the author of AngularJS in Action, and I'm currently kind of revamping everything to 1.3. So, writing a book in Angular is interesting because it's just progressing so fast, it's kind of hard to keep up with all the changes. But if you go the AngularJS in Action GitHub repo, and you go to the Angello repository in there, and I recommend going to the refactoring branch that’s where all the new stuff is going, as soon as it's stable, then I'm going to merge that back into master. But that is actually full-fledged AngularJS application.

That’s the whole point of the book. But I’ve got some really good feedback from Thomas as well as Joel Hooks, who I respect quite a bit. It's interesting because they actually have two very different ideas about how app should be put together, for the most part. And I don’t think one is either right or wrong; I think that they are just interesting. And so that is another really good kind of place to start to see a full-fledged application is the Angello project for AngularJS in Action.

Awesome. That sounds great. Yeah, so I think that’s pretty much all of our time anyway, so do you wanna get to the picks?

Sure! So I’ve been doing a lot of ui-router work this week and I think that’s a really awesome framework. I really enjoy that. And then I watched a movie this week called Forever Strong. It was kind of an indie film that was surprisingly really, really good. So, kind of the Sci-Fi mind-bender that I really enjoyed. So that would be my two picks is ui-router for just the sheer power, and then Forever Strong just for kind of a sci-fi entertaining mind bender stuff that I love.

Very cool.

What about you? Hit me.

[Chuckles] So, I'm just going to pick some tools that I use pretty regularly here. The first one is Emacs. I just freakin love Emacs. I know a lot of people really like IDEs like web storm or something, but yeah, Emacs rocks. The other one that I wanna pick is my gitmode for Emacs. And it is a Git, I don’t know if I wanna say UI, but basically it gives you keyboard shortcuts to manage your Git stuff. Makes it really easy to rebase if you have to rebase, and it makes it really easy to commit and push, if that’s what you are doing. And so, overall it's really nice; I don’t have to go out to the command line to run and I don’t have to open another program to run it. So yes, those are my picks.

And yeah, I guess we'll wrap up. I also wanna point out that we are now in iTunes. I'm working on getting the show on Stitcher. And you can also just subscribe via RSS. So, depending on what device you are on, go ahead and do that. And if you are in iTunes, leave us a review. It helps the show get noticed; helps move us up in new and noteworthy. And we're already, if you go search for “Angular” we're in the top list of podcasts, so I just wanna thank all the folks who are subscribing and listening. And go leave us a review, like I said, it really helps us out.