Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

089

089 AiA Angular CLI with Ciro Nunes


02:11 – Ciro Nunes Introduction

02:39 – Command-line Interface (CLI)

06:58 – Ciro’s Involvement with the CLI

08:10 – Features and Improvements for Angular 2

19:33 – Accessibility

26:36 – CLI Basics

28:11 – Testing

34:12 – Building a Production Pipeline

35:38 – GitHub Pages; Community Contribution

Picks

Star Wars: The Force Awakens (John)
LEGO® Star Wars: The Force Awakens (John)
ng-conf (John)
AngleBrackets (John)
Disturbed – The Sound Of Silence (Joe)
The Hello World Podcast (Joe)
Jurgen Van de Moere: How I feel about Angular 2 (Ciro)
angular-cli (Ciro)

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

JOHN:  So, what are we talking about today? CLI?

JOE:  That’s it.

JOHN:  What does that stand for anyway?

LUKAS:  Oh, you took my first question.

JOE:  Crap, [inaudible].

LUKAS:  [Chuckles]

JOE:  And…

JOHN:  Igor.

JOE:  Igor.

[Laughter]

JOHN:  [Inaudible] Igor. No, Community Loves Igor. There you go.

LUKAS:  Well, now…

JOE:  Oh, I like it. Community Loves Igor.

[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco, New York, and L.A. bid on JavaScript developers, providing them with salary and equity upfront. The average JavaScript developer gets an average of 5 to 15 introductory offers and an average salary offer of $130,000 a year. Users can either accept an offer and go right into interviewing with the company or deny them without any continuing obligations. It’s totally free for users. And when you’re hired, they also give you a $1,000 bonus as a thank you for using them. But if you use the Adventures in Angular link, you’ll get a $2,000 bonus instead. Finally, if you’re not looking for a job but know someone who is, you can refer them to Hired and get a $1,337 bonus if they accept a job. Go sign up at Hired.com/AdventuresInAngular.]

[Ready to master Angular? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours classes in St. Louis or San Francisco – AngularBootCamp.com.]

[This episode is sponsored by Telerik, the makers of Kendo UI. Kendo UI integrates seamlessly with both AngularJS 1.x and 2.0. It provides everything you need to integrate with AngularJS out-of-the-box bindings, component configuration, directives, template directives, form validation, event handlers and much more and yet Kendo UI tooling does not depend on AngularJS. So, if you want to use it with Angular or not that’s totally up to you. You can check it out at KendoUI.com]

JOE:  Hello everybody and welcome to episode 89 of Adventures in Angular. Today on our podcast we have John Papa.

JOHN:  Everybody, how you doing?

JOE:  Ward Bell.

WARD:  Hello, and how are you?

JOE:  Lukas Reubbelke.

LUKAS:  Hello.

JOE:  And I’m your host, Joe Eames. And we have a very special guest today which is Ciro Nunes. Was I close with that?

CIRO:  Yeah. That was close. Hello, folks.

JOE:  Awesome. Ciro, do you want to give us a little bit of an introduction to you?

CIRO:  Yeah. Currently I’m a lead frontend engineer for CrossEngage in Berlin. And I’m a Google Developer Expert in Angular. And I’ve been working on the Angular CLI for a while. That’s about it.

WARD:  So, what is that, CLI?

JOE:  The CLI.

WARD:  What [is] that CLI thing?

CIRO:  CLI? Well…

JOE:  What does it stand for? We have some guesses as to what it stands for.

CIRO:  I think that I can say the first letter and then you guys can help me, probably. I think that C is for community.

LUKAS:  Loves.

JOHN:  Igor!

LUKAS:  Igor!

CIRO:  Yay! [Chuckles]

LUKAS:  You guys were a little lagging there. Let’s do it one more time. CLI equals, equals, equals Community Loves Igor!

CIRO:  Igor!

JOHN:  So Ciro, it stands for Community Loves Igor or what’s the other name we call it by?

CIRO:  Command-line interface.

JOHN:  It’s a much less sexy name but it’s much more accurate.

CIRO:  Yeah. [Chuckles] I guess so.

WARD:  There are astonishingly people who don’t know what a command-line interface is either. So, why don’t you tell us what that is and what its goals are?

CIRO:  So, talking about the Angular CLI?

WARD:  Yeah.

CIRO:  It is supposed to be the official CLI for Angular 2, not for Angular 1. And for those who don’t know what a CLI is it helps you to run commands in your terminal that will help you to do something. It is a software for your terminal. You can put it this way. And the Angular CLI will help you to improve your workflow when you’re working with Angular 2.

WARD:  So, give us an idea of what kinds of things I might do with a CLI. Assume I know nothing and I just show up. What would be the first thing I’d want to do with it?

CIRO:  First thing, you can get started. You can bootstrap a project using the Angular CLI and it will give you a very nice structure following the latest style guide and the latest best practices that the Angular team is working on together with the community. And other than that you don’t need to care about setting up a build system. So, it’s also good for demos and prototyping. You don’t even need to spend a lot of time building this structure. So, you can get started with a project. You can just run some commands in the terminal and it will give you a nice folder structure, some example files, and it comes with unit testing set up, end-to-end testing, and much more.

WARD:  Wow, that’s pretty ambitious. So, I can scaffold out the beginning with it in just a command and it will get all that stuff all laid out for me?

CIRO:  Exactly. And it is pretty [inaudible]. So for example, at the moment you’re not able to generate your projects without TypeScript for example. So, it gives you a lot. It is pretty ambitious and it’s also [inaudible]. It is not so flexible at the moment.

WARD:  I think you mean… do you mean opinionated? Is that what you’re [inaudible]?

CIRO:  Exactly. Yeah.

WARD: Yeah, yeah.

JOHN:  Ciro, you’re saying that we can use this to start a project and then run tests with it and do a build process. And I appreciate that you say that we can run demos and proof of concepts. Is the goal one of those things as well to build a real production app eventually with this, too?

CIRO:  Yeah, it is. So, the project is in the prototyping phase. So, we are experimenting a lot. And as Angular is still in the experimental phase but we are a bit late in the game, we still need to catch up. So, we are not even in alpha yet. So, it is to be used in production but it’s not ready yet. So, right now what you can do is just play with some demos, some proof of concepts. But it’s not prepared for production yet.

JOHN:  Right. So today, it’s not even an alpha but Angular is in beta. I think beta 13 as of this recording date is what we have. But as most things go, people who aren’t familiar with product life cycles, generally the technology moves ahead of the tooling. So, Angular is far ahead of where tooling would be and tooling in this case would be the CLI, which is coming rapidly behind it.

CIRO:  Exactly.

JOHN:  So, what parts of the CLI have you worked on?

CIRO:  I worked since the beginning. So, I helped to do many kinds of stuff. Like for example, the initial commit message [chuckles] which is completely a random thing.

JOE:  [Laughs] Congratulations. That must have been a lot of work.

CIRO:  Yeah. That was an achievement, you know. [Chuckles] Other than that, set up the unit testing structure. I don’t remember much but the latest contribution was to introduce the production build. So, it is a bit different from the local build because in the local build you have things like library loading, references in the HTML. You don’t have minified resources and this kind of stuff. So, my latest contribution was towards having a production build like production-ready. But it’s just a first step. My latest contribution was about it. Not the complete… I can’t say that the production build is complete. It is ongoing.

LUKAS:  Let’s talk about another really handy CLI that came out and that was Ruby on Rails. And so, I remember when Ruby on Rails first came out and my friend was telling me about it he was like, “Oh, I can build an entire site on the command line in three minutes and it totally works.” And on the surface when you first go and you look at Ruby on Rails, that’s a really neat thing. And I think, at least for me, I think that’s the first framework that came out that embraced convention over configuration. And it was really, really convenient to be able to scaffold this stuff out. But then I found that experienced Rails developers, they begin to… they’d scaffold it out or not even use it at all and then they would take their scaffolding and gut it and put their own stuff in it. And as the developer became more and more experienced in Rails, they just stopped using it entirely, the utility dropped precipitously.

How do you foresee that problem with Angular of writing code that people can scaffold but it’s still useful and that’s going to fit the broad cases but then people will be able to… or avoid people having to scaffold out and then gut the entire thing or just not use it entirely?

CIRO:  That’s actually a very interesting subject. And we discussed a few weeks ago or months ago about having… this is like a killer feature in my opinion, that is you being able to do AST in the CLI. So for example, it would allow you to upgrade versions by running CLI commands instead of going file by file and looking for breaking changes and this kind of stuff. The CLI would help you to upgrade to newest versions of the platform as Angular 2 is called. And many more features like one other killer thing is that the Angular CLI is well-aligned with the style guide that John Papa by the way is working on it. So, I think that those kinds of features will be really necessary for the developers. It will really speed up the process of upgrading from one version to the other, like dealing with breaking changes and using newest features of the code, you know what I mean?

LUKAS:  And when you say AST you’re talking about the Association of Surgical Technologists?

CIRO:  When I talk about AST I talk about Abstract Syntax Tree, transformations.

LUKAS:  Got it, yeah.

CIRO:  For example the CLI would understand parts of the code and be able to change it automatically.

WARD:  Well, that sounds like deep magic. Hey Lukas, can you sharpen the point of your dagger there a little bit? Like was it that the CLI for Rails was too constraining? It didn’t have enough options? Or how could they, another CLI, avoid that? Does it have to be customizable? What’s your thought?

LUKAS:  So, I think a couple of things. One, that the code that it generated was for a very specific CRUD, an interface like master detail. So, they really targeted a very specific thing. And the templates especially that they designed to do that just didn’t really apply. And so, the templates were one of the first things to go. And I think that a way around that in my opinion is well, so why are they running into that? Is that you have this broad “We’re going to get you a portion of the way and get you started,” but now you actually have to hook it into specific use cases in the domain that you’re in. Where it gets interesting is giving the user the ability to use the CLI in conjunction with maybe some custom templates. So, I think having the ability to hook in some specific things, so then you’re dynamically generating things on the fly based on some local resources that you generated, is really, really handy.

So, an example is if you go to the NG6-starter from AngularClass, Scott wrote a really interesting generator with Webpack that the entire project is based on this component system architecture using 1.5 components. And so, he built out a generator that you can just simply go, Gulp component, you give it a name, and if you want to put it in a specific directory you can do that as well. That’s another optional argument. And it generates these six files with this basic component structure that you can pick up and run. Well, once I figured out what it is     doing then I was able to generate some additional templates very quickly. So for instance, if you’re doing a REST API a lot of that’s pretty conventional. So, I just hopped in and made essentially a service template now anytime I need to do a service then I can just use Webpack to generate that.

And so, I think having some really good logic on the frontend using AST on your CLI that at the same time giving people the option to say, “I want to scaffold this out but I want to use these templates as the basis for doing that, that’s project specific or corporate specific,” would be I think really, really helpful.

WARD:  So, the ability to roll my own templates is really…

LUKAS:  Yeah.

WARD:  And do it easily and plug it right into the existing apparatus.

LUKAS:  Exactly. That would be a killer feature. And so, just to follow in on this is the project that I’m talking about. We were using NG6 and I wrote some custom generators for my client. And when I demoing this I said, “Oh by the way, just as a value-added feature I went ahead and I added these generators into the project for everyone to use,” and it was like, I just gave them… it was like Christmas. Like I came down the chimney with a bag full of gifts that I was able to deliver that. And it really only took me maybe 20 minutes to write. But it was massive value to the client that they didn’t have to keep creating those things by hand.

JOHN:  Let’s think about what are some of the things that the CLI addresses? And forget Angular 2 for a second. Think back to Angular 1. [They style] for many, many years now… in the beginning there were no style guides and there was just this land of 30, 40, 50 generators. Everybody had a generator that was, “Here’s how you create an Angular 1 project.” And then once you’ve created it, here’s how you build it. Here’s my Gulp file, my Grunt file, here’s my version of it. And here’s how I run my tests. And everything was very complicated and there was no standard. And I actually remember a sheet that was spread around, Joe, one of your friends at ng-conf last year was showing us where he had all 50 generators that he found and compared them all side by side.

So I think in some ways, what the CLI is really helping us with is not, “This is the only way you ca do it,” but this is the way that the Angular team is going to recommend that you get started and move through a system. And it also means that if you feel like you want to go a different way, by all means do so. The framework doesn’t depend on the CLI. The CLI is just a path, a happy path, that the Angular team is giving to everybody so that you don’t have to worry about finding your own path if you don’t want to.

LUKAS:  Right. I think having a single canonical point of reference… and so, that’s why even your style guide John has been such a good resource is because it was adopted. This is the single repository for best practices. And because we all agreed on that, then I think in that agreement then the value of that project just exponentially increased. And so, I think having a CLI where all of the best practices are converging into a single project with the Angular core team working closely and sounding off on that and helping guide it, is that’s where I think you will one, eliminate this wild west of generators, but I think at the same time is so you have the single source of truth that everybody has agreed, “This is where we start.” But then having a little bit of flexibility to take that and tweak it to match specific business cases and context requirements would be just the perfect balance between prescription but without restriction.

WARD:  Well, what you’re saying sure rings a bell for me Lukas, because anybody who’s spent any time with Visual Studio templates and their things fell into the same trap that you described. And I think it would be great to know that the Angular 2 CLI isn’t going to fall into that trap which is one kitchen sink kind of template that when you pressed it you had 750 files and you didn’t know what the heck they were. You’re just trying to get all the world going. And then the other where the templates that nobody could agree on and if you try to write your own template it was mammothly difficult. And so, that’s a trap that people have fallen into more than one time.

I do hear, because I overhear the CLI team talking, that you guys are aware of that. Would you say that that’s true, Ciro?

CIRO:  Yeah.

WARD:  Not that you’re going to do anything right today because obviously you’ve got to get a product out, right, that has immediate value. But you guys are aware of this dynamic, right?

CIRO:  Exactly. The plan is to figure out the balance between customizability and where we need to be a bit more conventions, between customizability and conventions. So, it’s still in discussion. We still don’t know how to find this perfect balance. But the community input is also very important because just by discussing with several people on the team there’s no way to figure out all the possible use cases. So, it is very important to always hear input from different people that have different projects and different issues to solve and try to work on top of it to find this balance. So, that’s the current status.

One more thing that I wanted to mention is that the current version of the Angular CLI was built on top of Ember’s CLI. And then we inherited many things from it. One of them is the ability to extend it further. So, talking about these customizations that you want to have, you can probably extend the CLI also to build new stuff. And it shouldn’t be difficult. But it’s not defined that we’ll stick with the Ember CLI in our core. So, we are looking to have something different. Maybe we will get together with some guys from the Ember CLI team and build a base for CLIs for frameworks and platforms. And then on top of it we will make the Angular CLI. So, this is the conversation that we are having at the moment. We still don’t know if we’ll stick with this architecture, this way of doing things that is based on the Ember CLI, or if we are going to do our new stuff together with them.

JOHN:  So, I think the reason I really like the CLI and I get excited is that it makes Angular more accessible to more people. Because now the CLI, even if you don’t use the terminal, think about this. People who like Visual Studio or WebStorm or other tools or even VS Code [inaudible] and want to see a button somewhere inside their tooling, there could be extensions written for these tools that call the CLI functions and generate projects and run tests and do the [inaudible] for example. And that really makes it much easier to use and continue to build Angular projects for everybody.

CIRO:  Yes. That’s true. And this is also related to this topic that I mentioned of having this base for building CLIs and it would separate the API for those IDEs to have their own way of running CLI commands. So, it’s all together, all related.

WARD:  One thing I’m looking forward to is being able to use… the first step is to try and get people to try their hand at Angular 2. And as we’ve talked about in our previous podcasts, one of the big barriers to that is all the setup that you have to do to get into the world of ECMAScript 6 or TypeScript and so forth, and all of the SystemJS or whatever it is that you want to use. And just getting though that front door so you can experience Angular 2 has historically been a blocker. And I think the CLI will be a huge success with just getting this through the door there. And I’m betting that that ‘get you up and running’ is the first landmark for the CLI. Have you guys talked about it that way?

CIRO:  Actually, I experienced this thing that you just said in a workshop that I did in Brazil. I was doing a workshop on Angular 2 and TypeScript. And at that moment the Angular CLI was very in a very early stage. We just had this feature of scaffolding and generating some components. But it was really useful because people got started really quick. And then when they went to their homes I started receiving emails like, “Wow, it’s really easy to use the CLI to continue studying about Angular 2 because I liked your workshop a lot but I couldn’t make much at that time box. So, when I got home I just started a new project from scratch and I started applying the concepts that were taught so I could see that and practice really quick without needing to worry about oh, am I using Webpack or Gulp or Grunt or Broccoli? How can I wire up things? Will I use TypeScript or Babel or Browserify?” And I’ve heard that feedback, people saying okay, I can just do some proof of concept. I’m not doing a professional application here. I just want to see how Angular 2 works and if it will be useful for me in the future. So, John Papa said it makes Angular 2 much more accessible to people.

WARD:  Yeah.

CIRO:  Is that question what you were talking about?

WARD:  Absolutely. That makes so much sense. And it actually ties into something that I think Lukas was talking about earlier with the first experience of the Ruby CLI, which because I’ll bet that that first CLI experience in Ruby was actually part of what made Ruby easy to adopt and why it spread so widely. Did it play a role in that, Lukas? Do you remember?

LUKAS:  It was stunning the first time I ever did it. It was like, “Oh.” I think I’d been using ColdFusion at the time and just rolling everything out by hand. And I think once I saw this entire thing scaffolded out… and bear in mind, I didn’t actually know Ruby at the time, and being able to actually have something working within three minutes and clicking through the code and being like, “Oh, okay. This actually reads pretty well. I understand what’s going on,” that I would wager having it in the context of a working application short-circuited my learning curve significantly. And so, even to the point where it’s affected how I even… when I do Angular workshops and try to basically present new technology is I always try to do that context of a working example. Because I think having code that works right out of the gates is huge for people to wrap their minds around. We’re developers. We’re smart people. A lot of times it comes down to the context. And so, being able to generate that context immediately really goes a long way. So, articulating what’s actually happening and pointing people in the right direction.

WARD:  Well, and that’s why we’re… the quick Angular 2 quickstart which is what we’re doing because we don’t have a CLI, we’re trying to figure out how to make it quick. But it ain’t quick. [Laughs] Let’s just be honest. But when we tie into the…

JOHN:  We all blame you, Ward. We all blame you.

WARD:  Yeah, and I deserve it. I’m taking it. I’m taking it. I just wish I was smart enough to figure out how I could plow through that stuff without automation. But I’m excited to report that the plan is very shortly as soon as the CLI crosses the threshold that we’d be able to use that to get going quickly. And then we’ll reorient the samples around the CLI. So, I think that’s something else that or Angular community’s going to be able to experience is the intersection of the documentation and the CLI. And they’re going to be mutually supportive.

JOHN:  Well, let’s give an example to people, something concrete. Today in the quickstart Ward, it doesn’t take five minutes right? It takes much longer than that. And a lot of it’s copy and paste.

WARD:  No, it doesn’t. If you just copy and paste you can get it done in three minutes.

JOHN:  [Laughs]

WARD:  If you read anything, if you absolutely…

LUKAS:  If you want to understand it.

WARD:  If you feel like actually following along and saying, “What the what was that?” it might take more than five.

JOHN:  It definitely would if you actually want to comprehend. But then to be fair, if we had a CLI to do it we literally would do ‘npm install angular cli’ then we’d say ‘ng new my project’ then we’d say ‘npm start’. And then it would be running. And there’s a lot of power to that. And then you can go and look at the code, learn it, figure it out. And the thing I get worried about is exactly what you guys brought up though, is I don’t want the CLI to ever be… and I’ve seen projects that do this where I press generate my project and I end up with a thousand files, 99% of which are like, “What is that?”

LUKAS:  Right.

WARD:  I think it’s really important that the CLI allow you to move forward in small steps. I don’t need or want the gargantuan thing. I want a component. I want the CLI recipe for a component. Don’t give me everything else. Don’t give me 16 components. Don’t fill in every possible thing that I might possibly ever want to do with a component.

JOHN:  Yeah, don’t assume that I need something in a year, I’m going to need it right now.

WARD:  Exactly.

JOHN:  Let me slowly build up to it. And only the core thing should be there out of the gate. And we probably could talk about what do we think those things are. But the CLI probably has an idea of that already. Ciro, could you tell us what are the basic things that the CLI will give us?

CIRO:  So basically, you can scaffold either components or applications. We talk a lot about scaffolding applications but sometimes you just want to create a third-party component, reusable component for the community. So, you can also do that with the CLI. This should be possible. But talking about the app structure, it gives you only one, the main HTML file that will run your application. And then it’s going to show a loading indicator for you. And then when it’s ready it’s all about one component, the root component for your Angular 2 application with unit tests and end-to-end tests. So, you can start building from it.

JOHN:  That’s good to hear. Because we definitely want to think about, even with the quick start [quizzes] that Ward has crafted, we get an index.html which has a little bit of a loading message and it points to a main.ts which is the bootstrap kick-off file. And then that loads a separate app component which is our root component. So, it’s pretty much what you’re saying there, is you get that basic stuff. And from there it’s almost like a choose-your-own adventure game, isn’t it? You get to pick what you want to add next like a service or a component or a pipe.

CIRO:  Exactly. And then you can just go to your terminal and run ‘ng generate service’ and the name of your service or your component or your pipe and you’re good to go.

JOHN:  What about testing? How do tests play into this?

CIRO:  What do you mean?

JOHN:  Does the generator give us unit tests or end-to-end tests out of the box?

CIRO:  It gives the structure for you to write them. It doesn’t really test, how can I say, elaborated stuff for you. It just gives you the raw basics so you can start writing your tests. It really just imports the stuff that you’ll need should you write your tests, like the [inaudible] providers and the Angular test internals that you might need. And then you can just go ahead and start crafting your unit tests. Because the point is not about building the unit test for you. I don’t think that it’s even possible with the structure that the CLI has at the moment. It would require a lot of refactoring and re-architecturing. But what it really gives you…

JOHN:  Right, but not the tests so much but you’re saying the structure is there. So, the Karma files and the way to run them. And then actually, does it generate a spec file for us for a component example?

CIRO:  Yeah. It does. Every time that you generate a component it gives you the spec file. It also gives you from scratch some, this Karma shim file that configures Karma to work with Angular 2 which is not very easy to do right now. So, it’s really helpful in this part. You don’t need…

JOHN:  Well, that itself is huge. That’s huge, Ciro, right? Because I can’t tell you how many people I’ve had who struggled with Angular 1 even who wanted to write tests. And maybe they even knew how to write the tests but the hard part wasn’t that. It was, “How do I get things so I can run a test? How do I get it so I can get Karma and Jasmine or Karma and Mocha set up so I can actually create a test runner?” So, if I’m hearing you correctly, you’re saying that the CLI will give us that out of the box so it works with Angular 2 so I can run tests once I write them?

CIRO:  Exactly. You can just scaffold your project and then you are good to go to your spec file that you’ll have for your root component and you can already go to your terminal, run ‘ng test’ to run your tests and you can start writing them out of the box. You don’t need to configure anything. It’s just there. And this is also true for end-to-end tests. So, you don’t need to spend any time thinking about how to write things up like how to make Karma work with TypeScript and Angular 2. You just get it.

LUKAS:  I don’t think you’re selling this well enough, Ciro. I mean this in all respect, but that’s a huge feature. I think John said it and I want to actually second that, is I think the hardest part about writing tests in Angular is actually the ceremony of setting it up. And not having to go in and figure out how to dial in Karma in your end-to-end tests by hand, that’s 80% of the work is done right there. So, I think…

WARD:  Yeah, I’ll pile onto that, too. And you know what?

LUKAS:  When you say it…

WARD:  Go ahead.

LUKAS:  I was going to say, “Yeah, and we generate, we basically generate a test harness for you,” I need you to go, “And a woohoo!” because…

CIRO:  [Laughs]

LUKAS:  That’s really how I feel about it.

CIRO:  Yes. And one more thing, personally I think that people avoid writing tests because it’s really boring to write this bootstrap code, like importing stuff and getting your dependencies injected. All this bootstrap code is really boring and sometimes you, for example in Angular 1 experience that a lot. I was trying to write some unit tests and then I was struggling just to get stuff up and running, because I wasn’t using any kind of generator or a CLI. And then I started writing my own generator for spec files just to avoid me needing to wire things up before actually getting started writing the tests. Sometimes you are in a hurry for professional projects. You just don’t have the time to keep trying to get things running.

So, if you try to do for example TDD and then it starts to slow you down a lot, you’ll probably get rid of the tests and you won’t write them at all. So, I really think that this is a very valuable feature. You can just generate your component or your service or your pipe and you get this whole structure. You actually have example spec and then you can just take this example and override it with your own stuff.

WARD:  Yeah, or you could do it the way I’ve always done it which is you go hunt around, try and find a spec that kind of looks like what you had, copy it, create a new file, paste, go in, delete out all the old stuff, and see if it works. What’s wrong with that, guys? [Laughs]

JOHN:  Isn’t that what we do every day? That’s called the google style of development, right? “Let me go google that.”

WARD:  Yeah. Yeah, that’s real fast, right? No, this is big. And you just don’t want to write that Karma configuration stuff yourself. It’s not that it’s so hard to read once somebody’s given it to you. But so many things in programming are like that, right? If you had it in your hand and you can walk through it, maybe you could explain it. But who can even remember that stuff and who wants to? So, I’m all… I think we’re all singing with you and Lukas, I think you’re right. We aren’t giving this enough applause. So, let’s do it. Applause!

LUKAS:  Yay!

[Applause and whistles]

LUKAS:  Go team! Go team!

[Chuckles]

JOHN:  It’s going to be great. And I think the part that’s actually hardest is the one we haven’t even talked about yet. It’s not generating the project and it’s not even testing in my mind. It’s, “I’m ready to go to production. How do I build a production pipeline for my Angular 2 app?” And the CLI is also going to address this at some point as well.

CIRO:  Yeah. It will. And as I said, the first step was already done. We already minify files. We have this difference between environments. So, for the build command you can just pass this flag, environment, and you say, “Okay, I’m building for production.” And also, as the CLI gives you the HTTP local server for running your application, you can also run in your local environment as you work in production so you can debug real production issues in your local environment without having much effort. You have source maps in place. You have all that stuff so you don’t need to worry about anything. Just take the CLI, scaffold your project, write it, build, have your tests, run your tests, and it will also allow you to deploy for GitHub Pages for example. And in the future using more providers.

WARD:  Can you tell me about that GitHub Pages thing, too? Because that came flying across my screen and I didn’t quite know what that was about. Can you elaborate a little bit? Because that sounds like something I could use.

CIRO:  Yeah, so for example we were talking about proof of concepts, right? So for example, I’m doing this demo for a presentation and then I can just deploy to a GitHub Page. It is a command of the CLI. And then you pass your credentials. You configure it and run. It is in development at the moment. I don’t think that it’s ready. But it will be. You just run this command and you [inaudible] with the correct credentials. You’ll be able to have it in a GitHub Page. Like, the CNAME file, everything should be automatic for you. You don’t need to care about anything. Just say, “Okay, I want to deploy this repo to a GitHub Page.” Because the CLI also creates for you a Git repo. When you scaffold a project it automatically starts a Git repo for you. And then using this information you’ll be able to just deploy to GitHub Pages.

Igor actually wrote this add-on for the CLI that was supposed to reach the same goal. But now we are doing it differently. So for example, we will have in our build pipeline we’ll be able to build for production. And then with this package in hand we’ll be able to deploy it. So, the CLI will cover the whole workflow, not just scaffolding and running the project in your local computer but actually delivering it for production as well.

JOHN:  So, all the way from creating it, creating the Git repo, pushing it to GitHub, running a build process against it, and then deploying it up to an Azure or an AWS or Heroku. All that stuff would be included when this is all created?

CIRO:  This is the goal.

JOHN:  Well, we better let you go so you can go build all that, because we want that now. [Laughs]

CIRO:  [Laughs] I was actually much more involved with the project in the beginning. But I’m in this tough moment positioning between jobs. And I’ve been having this very hard time. [Chuckles] So, I’m not so active in the project anymore. But I’m always following the discussions whenever I’m free. I go to the repo and try to fix an issue or at least give some nice feedback to people. But the team is very strong. And it’s mainly built of community collaborators. So…

JOHN:  Nice, that’s a great point we should talk about. Because the CLI while Igor Minar is leading this, most of the activity of doing the work on this is from community contributors from what I’m seeing. Is that also what you’re seeing, Ciro?

CIRO:  Yes, that’s true. And a very great addition to the team was Hans who’s actually part of the Angular team, full-time. And he’s now the most active developer in the project. And he’s pushing really hard because we want to have all of these goodies for ng-conf. Is it the time for the applauses? Or no?

JOHN:  That should be an applause right there. So, you’re saying that the goal is to have something to show at ng-conf in May? Is that what I’m hearing?

CIRO:  Exactly.

JOHN:  That’s awesome.

CIRO:  Yeah, the team’s pushing really hard to have it in… how can I say, not beta state but covering this whole workflow of scaffolding to deploying to production.

JOHN:  So Joe, you’re on the ng-conf committee team ownership. I assume, is there an Angular CLI presence that’s going to be there that you’re pushing for?

JOE:  There is. There is. We’ve got a talk scheduled on the CLI. I think it’ll also be part of probably one of the keynotes, I assume. But there’s a whole talk on the CLI.

WARD:  You know, maybe we should do a few shout-outs to some of the other people that are on the team now.

JOE:  Yeah, that’s great.

WARD:  The problem with shout-outs is of course that I’m going to butcher everybody’s name.

JOHN:  That’s why I [wanted you] to say the names, by the way.

[Laughter]

WARD:  But I’m going to start with one I probably can pronounce, which is Hans Larsen. But as you say, he works for the Google team. But there’s Mike, the Italian pronunciation would be Mike Brocchi. And he’s super active. And John, you were pretty active on that. Pascal Precht is on there a lot. Filipe’s on there. Silva, Filipe Silva. Jan Kuri. And I just, the terrible thing about saying this is that I’m undoubtedly leaving somebody out. Jesus Rodriguez. So, I’m undoubtedly leaving somebody out who’s just, I feel terrible so my apologies to those of you. But these are all people who are using their own time.

JOHN:  [Inaudible] are putting a considerable amount of time. A lot of time.

WARD:  Oh, yeah, yeah, yeah. They’re [inaudible] day and night, you find them on. Because I’m one of those guys that trolls all the channels here.

[Chuckles]

WARD:  They’re always up. There’s always somebody. The sun never sets on the CLI is the way I think of it.

JOHN:  That does seem, actually it almost seems more active right now than the Angular core and the other types of channels that we’re listening to in the sense that there’s some internal chatter about what’s going on with Angular. And the core product is, it’s really come together in my mind. But now it’s time for these other guys to, these other players like the CLI and Angular Material 2, we did a podcast on, to take the next step forward. And I’ve been very impressed with what I’ve seen from CLI. And not just so much the output as I have the plans that they’re building. Listening to you talk Ciro about what it’s going to be, what its potential to be, is really exciting. And I also know there’s another project by, I forget the gentleman’s last name Ward, Minko?

WARD:  Yeah, Minko is, he’s also part of it. I don’t know what his last name is either. I can’t remember. Minko Gechev.

JOHN:  I’m going to have to Google [inaudible] [Chuckles].

WARD:  You’re just putting [me in a box] here.

JOHN:  Yes. Minko Gechev, G-E-C-H-E-V. So, he’s working on a tool called the ng lint I believe, the Angular linter. These things all flow together. So, the style guide is something that I’m working on with some others. Minko’s working on a linting tool for Angular 2 and the CLI’s team working on the CLI piece. And these all feed into each other. So in the end, hopefully we’ll have a very cohesive world where people can lint their code very specifically for Angular, can follow a guide or choose not to follow the guide, can use the CLI if they want to or they can just forge ahead and create their own project without the CLI. Angular will work either way.

But to me, it’s really exciting because we never had these things with Angular 1 out of the gates. And then the first couple of year of Angular 1 was very much hunt and peck and do Google search and hope that somebody wrote a blog post about it. So, I think to me it’s exciting. And I’m very happy to hear from you, Ciro. I’m glad that you contributed. So, thank you very much.

CIRO:  You’re welcome. [Chuckles] And thanks for having me here. I’m really excited about talking about all this stuff. Because as I said, all the guys involved in this project are volunteers. And they are all passionate about this community. And that’s what makes this really nice. Because when you’re working on the style guide and Minko is working on the linting tool, and the Angular team’s doing very nice work on the core, we altogether are much more stronger than each one of us trying to reach a goal without getting together to move in the same direction.

JOHN:  So Ciro, just switching gears a little bit here, I wanted to just do a call-out here. Because I know, I met you a little over a year and a half ago. And the reason we met is because you actually interviewed me, if you remember correctly.

CIRO:  Yes.

JOHN:  [Laughs]

CIRO:  That’s true.

JOHN:  For the Angular GDE program. So, you’ve got a GDE a very long time for Angular, one of the first ones, weren’t you?

CIRO:  Yes, I think so. I was the first Brazilian. But I think that I was one of the 10 first GDEs, if I’m not wrong. And this was mainly because I was doing a lot of presentations, many of them in Portuguese. And yeah, that was it. It was the easiest interview that I ever had, yours and Pascal’s one, because you guys are so active. I knew you guys much longer, way before interviewing you. So, it was really easy because I already knew your work, I already knew how passionate about the community you were. And that’s what we do, right? Ward is also a GDE if I’m not wrong.

WARD:  Yeah, yeah. I snuck in under the tent when they weren’t looking.

JOHN:  And Joe, you’re also a GDE too, are you not?

JOE:  Indeed I am.

JOHN:  Wow.

CIRO:  Alright. So, this is like a GDE show.

JOHN:  How many GDEs does it take to change a light bulb?

[Laughter]

WARD:  We don’t actually change it. We just argue about it.

JOHN:  [Laughs] But it’s great though. I remember when getting into the program there were only a couple of GDEs. I just thought it was pretty impressive that there were only… I think there was actually like seven at the time when I spoke to Ciro. And that’s impressive. So, you’re from Brazil. Is Angular really popular down in Brazil?

CIRO:  It is. It actually is. I started a meetup in São Paolo. And it was crazy. More than a thousand people joined the meetup group. And we had one special meetup at the Google office in São Paolo. More than 200 people went to this meetup. And it started as five friends just trying to hang out and talk about Angular. But we realized how many people were interested in it and using it in production. And many people coming from backend background and also from not software engineering but sometimes hardware and they heard about Angular and they wanted to be there to get to know a bit more. So, it’s really popular. I was impressed. By running this meetup I realized how many people actually use it. It’s quite cool. And it started spreading across Brazil. So, there are many meetups there right now. There’s a meetup in Belo Horizonte that I also got started. Belo Horizonte is my hometown. And Recife if I’m not wrong. So, the Brazilian community is also growing.

WARD:  That’s great. It’s great to hear. And I take it that Angular 2 is also picking up everywhere?

CIRO:  Sure. Many of the frontend Brazilian conferences, they have at least one or two speakers talking about Angular. And right now Angular 2 is the hottest topic.

WARD:  How do you actually say Angular in Portuguese?

CIRO:  [In Portuguese accent] Angular.

WARD:  See, it sounds so much better.

[Chuckles]

CIRO:  [In Portuguese accent] Angular.

WARD:  Well Joe, on that note I want to hear you say Angular and then what do we do?

JOE:  [Laughs] I’m not saying that.

[Laughter]

JOE:  Well, I think it’s been a really interesting discussion by far and certainly such an exciting tool. I don’t think that any of us are not interested in seeing what comes up, and especially what we might be seeing come ng-conf. And obviously I’m personally very excited for that. But I suppose it is time to move on and go over to picks. So with that, let’s start with John. I’ll bet you’ve got an awesome non-controversial pick for us.

JOHN:  Absolutely. I’ve actually got three picks tonight and I’ll go quick because I know Ward has got to go catch up and get his early-bird supper. [Laughs]

So, the first one is a great movie came out this week on DVD.

JOE:  Really, do tell.

JOHN:  And some of you may have heard about it. It’s called ‘Star Wars: The Force Awakens’.

WARD:  Oh, geez.

JOHN:  And you can go pick that up and [inaudible].

WARD:  Right, right. Because they need another billion of your dollars.

[Laughter]

JOE:  Disney’s barely scraping by.

WARD:  They’re barely scraping by so please, please save Disney. Go out and buy…

JOE:  Save Disney.

[Laughter]

WARD:  Disney, save Disney. Go buy their stupid DVD. And then you know what? You know what you can do with it? Just nail it to your house and buy another one. Just shingle your house in DVDs because Disney needs to money.

[Laughter]

JOHN:  For a second pick, just so Ward can calm down, just something a little bit different. It’s not a movie Ward. Don’t worry. But my other pick is going to be this new game coming out called ‘Star Wars: The Force Awakens LEGO’. And my son’s really looking forward to this one, too. Although I’ll play it as well. Those Lego games are kind of fun.

JOE:  Heck, yeah. Yeah, they are.

JOHN:  Yeah. And, as my third pick I wanted to pick some conferences that are coming up here. One of them is the Angular ng-conf which will be in less than a month now. But there’s also AngleBrackets which is going to be here in Orlando and it’s mid-April. I’m terrible with dates but I think it’s the 14th or 11th, something like that. It’s whatever that week is. And what’s exciting to me about this is there’s going to be a huge showing there of people from the .NET communities, from the web communities, from the Node communities, and the mobile. It’s going to be quite exciting to see everybody there at those events and I really look forward to this time of year when all the conferences kind of pile on each other. Because it’s a great change to get out and network with people. For me it’s not about learning new technology. It’s for meeting people and learning how they’re using technology, which to me is just invaluable.

JOE:  Well, awesome. Ward, how about you?

WARD:  I’m just speechless. I’m actually searching the internet for some means to burn every CD that comes out. And I don’t mean to create a new one. But no, no…

JOE:  Did you say CD?

WARD:  CD. DVD. Whatever.

JOE:  I thought for a minute there you were going to say vinyl or maybe 8-track.

WARD:  Yeah. Actually, I’m looking for Frank Sinatra sings from the Star Wars songbook. Haven’t been able to find it. But that’s big on my Christmas list. I’ve got nothing else for you.

[Laughter]

JOHN:  I love making Ward speechless.

JOE:  Seriously? That’s your picks, Ward?

WARD:  Yeah. Frank Sinatra sings from the Star Wars songbook. I can’t wait to buy    it.

JOE:  [Laughs] Oh my. Oh my. Okay. Alright, well let’s… Ciro will go last. I’ll put my picks down. So, John stole my pick of course. I was going to pick the same movie. But I realize now I should probably go out and buy a second copy just in case I lose the first copy or so that we can’t watch it in both upstairs and downstairs. I think that’s really going to be important. So, I’m probably going to buy [inaudible].

WARD:  Help save Disney.

JOE:  Help save Disney.

[Laughter]

JOE:  You know, what’s funny is they can make a billion dollars on a movie and it’s hardly anything because the movie division of Disney is so tiny compared to parks. It’s crazy. So yeah, unfortunately our DVD purchases are barely making a dent in Disney’s revenues.

But for my next pick I want to pick a song. Disturbed did a cover of ‘The Sound of Silence’ and oh my gosh, is it awesome. I just absolutely love that. And they’ve actually done some other cool others. The other one I really like is ‘Land of Confusion’. They did a great cover of ‘Land of Confusion’. What was really quite funny was at one point I was working with this developer about eight years ago who was 22 at the time. And he was talking about how great Disturbed was and I said, and I listened to it and said, “Oh wow. That’s a really cool cover, this song.” And he says, “Cover? You mean, they didn’t write ‘Land of Confusion’?” And I said, “No. It was Genesis.” And he had no idea who Genesis was. And I thought that was really sad. So, that’s it. That’s my second pick, is… well, first I guess because John picked Star Wars. My first is Disturbed, ‘The Sound of Silence’. Very awesome cover. Go check it out and listen to it.

And finally I’d like to pick the Hello World Podcast by Shawn Wildermuth where he interviews various programmers and talks to them about how they got into programming, which I think is a fascinating topic. Absolutely fascinating.

So, those are my picks. Ciro, how about you?

CIRO:  I want to pick this very short blog post by Jurgen Van de Moere. I don’t know if I pronounced correctly. But he talked about how he feels about Angular 2. And I just wanted to highlight this sentence. He says, “So, when I hear people complain about the new template syntax, I silently turn away, put on a smile, and think wait ’til you see what you can build with it.” So, I totally identify with that. Talking about any kind of open source project, there are many people that complain a lot about changes and this kind of stuff. But yeah, it’s worth the wait for it. And then you can see what you can do with Angular 2, with the Angular CLI, with the Angular style guide. There are many exciting things coming out. So, it’s worth the wait for them.

I also want to pick the Angular CLI repo. [Chuckles] You should definitely take a look at it. There are interesting stuff and also give your input so we can improve the project. And that’s about it.

JOE:  Awesome. And finally Ciro, if somebody wants to get a hold of you or follow you, I see you’re on Twitter. What other ways can somebody check you out?

CIRO:  Yeah, my Twitter handle is cironunesdev. So, you can just say hi and we can get in touch.

JOE:  Awesome. Well, thanks very much for being on the show. It’s been an excellent episode. Thanks John and Ward for your contributions. And we’ll see you guys in a week.

[Hosting and bandwidth provided by The Blue Box Group. Check them out at BlueBox.net]

[Bandwidth for this segment is provided by CacheFly, the world’s fastest CDN. Deliver your content fast with CacheFly. Visit CacheFly.com to learn more.]

[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you want to support the show? Now you can. Go to AdventuresInAngular.com/forum and sign up today!]

x