082 AiA Getting Started with Angular 2 With No Angular 1 Experience with Shayne Boyer

Special Guests: Shayne Boyer

Show Notes

02:17 - Shayne Boyer Introduction 
02:38 - Shayne’s Background
07:20 - Benefits of Skipping Angular 1
11:21 - Building Desktop Applications with Angular 2
14:18 - First Experiences with Angular 2
22:44 - ASP.NET 5
26:22 - Node
  • Aggregation
35:49 - HTTP, ReactiveX
41:16 - Tips to Jump Into Angular 2
Picks
John Papa’s New Angular 2 Course (Angular 2: First Look) on Pluralsight (Joe)
 Women in tech: Submit technical talks! (Joe)
 Star Wars: Episode VIII (Joe)
Rogue One: A Star Wars Story (Joe)
[egghead.io] Cycle.js Fundamentals (Ward)
Shayne’s Play by Play on Pluralsight (John)
Girls Who Code (John)
Pacifiers (Chuck)
Amsterdam (Chuck)
The Iron Druid Chronicles: Staked by Kevin Hearne (Chuck)
Calamity by Brandon Sanderson (Chuck)
Thinking in Angular 2.0 (Shayne)
Amazon Echo (Shayne)
Special Guest: Shayne Boyer.

Transcript

 

SHAYNE:

Ward, I wore my Star Wars shirt just for you.

WARD:

Did you – Oh, you're killing me. You’re killing me. He's off the show.

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

[Ready to master AngularJS? 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 and 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 could check it out at KendoUI.com]

[This episode is sponsored by Digital Ocean. Digital Ocean is the provider I use to host all of my creations. All the shows are hosted there, along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent. And their VPSes are backed on solid–state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code “Angularadventures” you'll get a $10 credit!]

CHUCK:

Hey, everybody and welcome to episode 82 of the Adventures in Angular show. This week on our panel we have John Papa.

JOHN:

Hi, everyone.

CHUCK:

Ward Bell.

WARD:

Hello, hello.

CHUCK:

Joe Eames,

JOE:

Hey, everybody.

CHUCK:

I'm Charles Max Wood from Devchat.tv. This week we have a special guest, that's Shayne Boyer.

SHAYNE:

Hey, guys.

CHUCK:

You want to introduce yourself really quick?

SHAYNE:

Sure. I'm Shayne Boyer. I'm in basically, Orlando. A little outside of Orlando. And been doing a little Angular 2 lately but generally live in a world of APIs and architecture and putting old solution together. So, thanks for having me.

CHUCK:

All right. John was explaining that you didn't have a lot of Angular 1 experience and you're getting into Angular 2. Is there more to it than that, John?

JOHN:

Well, let's use Shayne's words, right? Let's have Shayne explain where you came from. From JavaScript, Typescript and before your Angular experience [crosstalk] and then we kind of talk about–

WARD:

All right, explain yourself, Shayne. [crosstalk] Why aren't we listening?

JOHN:

From birth! No, before that. [laughter]

JOHN:

Family history.

SHAYNE:

My history is – you know, I started with Typescript, I guess, pretty much the day it came out or couple of days it came out. And there's a ton of naysayers that stayed with it. And they said "Why do we need typing?" I liked it because my background is aninternet developer. A .net developer from a client side development but also, just a web world as a web developer. So, I had a lot of JavaScript experience. A lot of just client server experience. I've got a lot of APIs and pretty versed and node, web APIs from the .net side.

So, I spend a lot of time on the server side of it. Not too much in Angular 1 or 1.X other than being able to dig in and look at it just from the JavaScript side, understand how it fits together sort of a high knowledge as to how it works and understand the MV* framework. So, I understand the other frameworks from a web perspective as far as Knockout and things like that.

So, I have a good understanding what it does, what it accomplishes, and what it's used for but not really got down into building a true application from suit to nuts. So, getting into what Angular 2 is offering and how it's coming out and all. Seeing the wave of the Angular 1 development community and how large it was knowing in what we're using and my job what at the community. I think "You know what, I better get into seeing what's this is about because the wave two is going to be better, they're going to build up on what's already there. So, I'd better get my hands deep in what's going there, knowing they were building Typescript.” I've got that experience so it should be easier for me to pick up instead of trying to understand how everybody was building the first version of Angular.

JOHN:

So, Shayne was it – I'm curious when you started to make a decision to get into Angular 2 because of Typescript. It's sounds like you're saying that that's one of the driving reasons you started looking at Angular 2 because you have the Typescript experience. Is that right?

SHAYNE:

I would say that that's part of the reason. But knowing – just looking at the – I wanted to say I started in Beta 40 something and seeing some of the examples that were coming out the structure that was there was less verbose to me than what I had seen in Angular 1 Examples and codes that I've been writing for years. It just seems to make more sense. It seems like I didn't have to worry about where things went and when I started to build the components and the directives, there was less keywords. And just some of the initial ideas around what was the keywords and things were being reduced; kind of a what you needed to know to get into it was just much smaller. So it says "Okay, I've got some SPAce in my old brain. I'm an old guy when it comes to the development community." Something goes in something's got to leave because I have a little bit of room I can grow out this. So I think that was the attractive part of it; they were reducing some of the things you need to know to get started.

JOHN:

Can you get some examples of some of those "Aha!" moments for you?

SHAYNE:

Yeah. I think the initial parts of the wire up like what do I need to get started? Just a basic "Hello, world" was I need to do the Bootstrap piece. So Bootstrap and the routing was much simpler for me. If I just look at the simpler component; I had my component which is now a class, right? So, I have a class, I've done .net, I've done Java. It's typed so I can just type and have to think about the ‘do I have to do an if here or can I just do a simple function?’ I just type a class and that was very simple for me.

I'm doing Typescript and the decorators and the DI – the dependency injection model was much easier from a sense of – I just put the annotation of add and injectible. The hardest part for me was "Crap. I forgot to put the ellipsis on at the end of it." So, that was a struggle but having to remember that and just being declarative about setting up the other pieces of defining my template with its simple we have templates goal and great styles. Yes, my style is there. Not trying to mash up all of that in 4, 5, 7 different files and trying to put it altogether programmatically somewhere else. You know, some other function of it or reason why your network [inaudible] or something like that to try and put it all together and make it work. I think that was the easy part, just see one file. I can put it all there in one file and then have the option of breaking it up if I needed to later if we got bigger.

CHUCK:

So, it seems like coming from kind of a casual acquaintance with Angular 1, I think a lot of people coming in Angular 2 are coming from Angular 1. Were there things you think people sort of assumed you already knew coming into Angular 2 that you didn't have a background or a deep background in the that may have made it a little harder to pick up?

SHAYNE:

You know what’s interesting is that I think it’s easier for me to just – I’ve had to make the language switch many times over my career going from JavaScript or ES 3, to ES 5 or going from VB, straight old school VB to .net or to a Java. And I've always taken the direction of just kind of forget what you know before you move on to the next thing. And I know for a lot of people, that’s hard. They go, “Woah, we used to do this." And that's almost a benefit going to Angular 2 is I don't have a deep seated knowledge of Angular 1.

I see a lot of the videos, presentations – they say, "Well here's a grit." So Angular 1 this is how they did directives and in Angular 2 this is how we're going to do it. You only need to – we use the add directive when you don't have a template and we use add component when we do. So, there's these comparisons that I see a lot of Angular 1 developers – they’re trying to understand like "this is how I used to do it, how do I do it now?" Me, as a new developer, and I think as a lot of new Angular developer who come in this and saying, “I'm coming from React where I’ve never done Angular before,” they do have the benefit of not having that kind of preconceived notion on how to do it before coming in. I say "Oh, this is just how I do it." It’s almost like a new technology for them; a new framework from them coming in so I think I benefit from that.

JOHN:

Well, I think that's interesting. I was at a code camp last weekend IN South Florida and I did back–to–back sessions on Angular 2 to get people started. And it was very popular but that wasn't what was really interesting to me; it was half the people when I asked at the beginning, "How many of you here have done Angular 1?" Less than half of them actually raised their hands. And I actually asked again with like "Are you serious? Is that all there really is?" And with that many new people in the room who had never done Angular 1 before who were interested in learning Angular 2. And especially on this show, I've got to think of my most – my best recollection. We had mostly been talking about how do you get in Angular 2 if you came from Angular 1. But it is interesting to hear from somebody who hasn't done as much Angular 1 to see kind of what's that experience like?

SHAYNE:

Yeah. I think that's a big attraction quite honestly. As almost the desktop application developers are looking for what's the next job; what's the next skill that I want to jump to? Is it mobile? Is it the web? And if they do go to the web, a lot of desktop application developers are looking for language or framework because that's what they're used to. And if you're a job developer, a C# developer, you use the typing. So immediately you're attracted to Typescript.

And if you're looking for a framework that offers that, I know that obviously Aurelia's out there. They support the Typescript language to build their framework; Angular 2 is there. That's truly one of the, probably 50%, if not larger, the reason that I grabbed it to Angular 2. So, I can just type it. I don't have to think. Am I doing it correctly? Am I have to worry about syntax? If I'm passed, If I'm using an input, I know I can type an input and expect that a person is a person when it comes in and it's going to tell me – give me the "Hey, stupid. You didn't – this is not a person coming in." And if don't want to type that, I don't have to. But I guess it'll sustain that nice language and given these features – and the tooling has gotten so much better because of things like that. I think that's the big attraction to a transitioning developer from a Type language, or from a desktop application development, to a web development.

WARD:

So speaking of being a desktop-oriented developer, so how does Angular 2 approach the line of your thinking about how you would build such applications. Where does it surprise you; where does it disappoint you; where does it encourage you?

SHAYNE:

I think from, the MV* framework, the MBVM frameworks and talking just more of Windows development standpoint, I think there are some similarities there. We have, in Angular2, we've got this observable patterns. I think there's a lot of reactive extension developers out there in the Windows world. And they used that kind of model for the development. So that's a parallel type of development stream. You've got the pub–sub models, again those are parallels to kind of come over. I think it's kind of easy for them to kind of groc as they come on over.

I think where the question comes in is where are – do we make DID decision points of how do I get to a printer? How do I get to as scanner and these external devices? And I think that's when these desktop developers are really saying, “Oh, I had to put it inside an Electron” or I have to go with a desktop thing and how do I do that? You know, using an Angular 2 framework per se. I think that's still a decision point for them to make for those who have decisions.

WARD:

Yeah. There is something there at the boundary. That's just the difference between writing a desktop app and encountering a SPA like how do I make my SPA talk – a single–page application, JavaScript application, talk to the environment. And it's interesting if you've brought up Electron because I've seen some action on that front. Have you played with any of the Angular 2 Electron combinations?

SHAYNE:

I haven't but I've read a lot of – you know, I want to say a lot; probably less than a dozen articles around it and I say this is really great. The deployment story is great because it gives you cross–platform.

I know a number of use have use the Visual Studio code and that's obviously all developed in Typescript and Electron. I think that's a great story but again, what is the decision point that the web isn't good enough? Where Angular 2 is not good enough? And I think it comes around if I have to hook up something that's not a normal device. If it's not a microphone, if it's not a keyboard or a keyboard wedge. You know, like a card reader or something like that – a scanner. How do we interface with those from Electron? I don't know if that stuff exists, right? So I don't know if the story is. But I think that might be the decision point where they say this is not good enough. I know PhoneGap had all that.

Some of those things with these native shims; can we get Angular 2 to talk to these native shims? You know be it Typescript and – do we really want to make that leap for us and say that that's good enough? I think that would be a good story and see if we could do that within Electron. And appwise, do we really need desktop apps to live in? I can.

JOHN:

So, Shayne, when you got started doing Angular 2, we actually – me and you and Ward – we were all at the Orlando Hack Night for Angular 2. I think it was October, November last year.

SHAYNE:

Yeah.

JOHN:

At that point was that the first experience with Angular 2? You're so – kind of– how did that go for you?

SHAYNE:

Other than maybe a couple of days, or week or so before that, just walking through whatever documentation existed, I want to say that it's interesting. I think there was three releases that week before we went to that Hack Night. [crosstalk].

JOHN:

Yes, there were. [laughter]

SHAYNE:

42, 43, 44 something like that. So, I think HTTP had just – was coming out a week. HTTP is like a third of what it used to take to do there. Getting started from that point for me, the language was easy again because it was Typescript. It was interesting to walk around the hack night and see who was having struggles with what.

A lot of it is around how to get my environment set up with typings. How do I do HTTP calls? How do I get into talk– where do I put my templates? You know, my templates in the template definition. Can I put it on my HTML externals? There was a lot of that type of set up in the tooling. And obviously, that's much more mature now. It’s been almost six months later.

For me it was, how do I get – I had my code all working, now I want it to look pretty. How do I get material design to work in this? It was – well that's not there yet. I think we had somebody from the material design team or somebody from the Angular team there with us. But it was, how do I make it pretty now? How do I get my routing to work? So, I think routing was still being worked. So understand what's the next thing?

I was watching the webcast last week. And there was this whole story around forms. You know, and I haven't even looked in the forms. What don't I know about Angular 2 and the framework that’s available. So I think it's the unknowns that we don't know. So making it pretty, how to get the CSS; and there goes the story about how do I get it on my servers so I can show somebody what I built? I think those are the struggles that I was having at that point. How do I push it to the cloud? How do I push to my hosting so that I could show to somebody instead of just running it locally? And I know that one night, the challenge about add injectible and I forgetting the parenthesis at the end of that thing and that threw me for a loop.

JOHN:

[chuckle]

SHAYNE:

I know Ward sat with me for about ten minutes and we both went blurry trying to find that.

WARD:

Who's looking for parenthesis, you know?

SHAYNE:

Ward's like, “Take this out, take this out, take this out.” Okay, now we have a component.

WARD:

Something’s got to be different now. And you know what? That's what led me to put in the big yellow box in the documentation, that experience. Just something simple like that that can bite you.

JOHN:

Now, I think this is good because that's where – that Hack Night, I think Ward and I benefitted more than anybody who was there which is – honestly, I got so much out of that, just watching everybody "Aha!" light bulb moments from people. And things that they thought really worked well that they enjoyed which was the overall theme. But there's also those pain moments that you pointed out like the injectible and forgetting the parenthesis. Or you know, how do I do routing or how does an observable work with HTTP? Those kind of questions, I think they've influenced how I've started teaching Angular. And as Ward have mentioned – you mentioned Ward, has that influenced the docs in any way?

WARD:

Every time I see somebody learning this thing, it influences the docs. I have another "Oh" moment where I just wonder about it. And you know what, any of these frameworks have those moments, too. You hit these strange walls where the feedback that you're getting is not helping you figure it out. The problem with the missing parenthesis was that you get a mystery message back that didn't seem to relate to anything. And that's what lead you to put those things in the docs.

SHAYNE:

You know, I find that – Ward, it's funny you mentioned that strange messaging. I find that to be, today, my biggest struggle. And it's funny that in my head, I have a list of strange messages for Angular 2 index that if I get this message, I know the five things to go look for. In the messages, it means nothing for what the error actually is. You know it could be like – I don't know I forgot to – I misspelled the component named wrong somewhere but the message is completely – ‘no provider found’ can be the name of the error. But I misspelled person component or something like that.

WARD:

And you know what, we take it for granted – we say that "Oh, that damn Angular 2! How could they do that?" We take it for granted that we have an exactly the same inventory in every other language that we're in. And we don't even think twice about – we see that message and our brains just immediately connect to the solution. We know exactly what went wrong. We think our language – that old environment is just great because we know all those things. And we expect that everybody else is not going to have these problems. And it's just not true. This is part of the pain in learning any technology.

SHAYNE:

Yeah. I find that going back to the hack night, the biggest challenge – I know that this has gotten a lot better, is around the tooling and getting to set up. It was how do I get X IDE or editor set up for Angular 2? And you know, where do I have to have my typings folder? Or my typings TS config file. I think that that story has gotten a lot better over the last four, five months.

And I think that if it continues to improve where I can just fire up the VS code or add more brackets or Visual Studio or Eclipse to help you. You know whatever those – the big fat editors are. And I'll group Visual Studio and things like Eclipse together because they are big heavy editor but there are developers who love that environment.

But they have to, say, file a new project, Angular 2, Spot app. If that can go away because developers will blame that development experience on Angular 2. "Oh, Angular 2 stinks because X" It's not –it's because it's Angular 2. This does not work well in those editors or these IDEs. I find that to be still a struggle. And it's probably true of React and Aurelia, and who knows what else. If the tooling is in the way, it can be blamed on the frameworks.

JOHN:

The things that you're mentioning aren’t Angular, right? You mentioned the TS config, you mention the typings. You mention the [inaudible] stuff as you’re alluding to some of the set up. It's not the Angular's stuff; it’s the things we need for the tool. And even the editors.

Some of these editors now like Webstorm, if you just open it up and pointed it out in an Angular 2 progress, "I know what that is." I think those things are improving. I don't think they're done improving quite frankly. I know Ward and I recently had some internal yelling at each other about things that we struggle with lately with the tooling and how we still think it could get better. Not yelling at each other but yelling with each other.

And there's things to go through that I think we've – it's just got to get better, quite frankly. And I think this is for any of these model frameworks. But I'm hoping that people don't get discouraged by that experience. Not just for Angular, but for React, Aurelia or any of these because to me, they're such a wonderful pot of gold at the end of that rainbow if you get through that struggle in the beginning. And for people who start six months from now, maybe there isn't that struggle at all, you know?

SHAYNE:

Sure. I think the other part of the story, there's a setup, there's a development, and then there's the local publish, right? The publish story is going to be the biggest story of all. Three of those Because we still don't know who is the winner. Is it JSPM? is it webpack? Is it Xtool that still somebody's developing in their garage? Or how do we publish this thing? I'm going to pack it, and I’m going to deploy it out and I'm going to put it in my CI pipeline. What does that look like? And I

spent many hours deep diving into a few of these to see "Hey, I just want to type something and do a command line and have it build and deploy my thing,” and gave up.

JOHN:

I think it's where – I know, we’ve had a few chats, too, Shayne. I think that's also where we were looking for Angular CLI which the Angular team’s still working on in public, get a repo. They’re hoping that's going to solve that problem for us so that'll be a good thing.

SHAYNE:

Right.

JOHN:

So Shayne, you have a lot of background on other technologies, too. Recently, did a Pluralsight video with me on ASP.net Core 1.0 is that a new name for the darn thing?

SHAYNE:

Yeah, it was K then DNX. Then there's another name that came out and they gave up on that. [Inaudible] been out of five, yet – then A's [inaudible]. So yeah, we just did that. That was fun/

JOHN:

What is that? Can you explain that for .net programmers?

SHAYNE:

So yeah. ASP.net core is the re–platform or rewrite of what we all know as ASP.net. So if anybody who's done a kind of web development on the .net platform we use to hearing web forms, server side development somewhere to something like PHP, post [inaudible] development.

The rewrite of .net or ASP.net is now completely cross-platforms. So it will run on the [inaudible] on Linux, on OSX. If you want to do development on the Mac, it will run Air and of course, on Windows still. It’s super light. It's very note-esque from a sense of middleware being to put that in there. It’s super–fast from a performance stand point.

There is a blog post that just came out they're doing 1.15 million request per second on web servers. So, it's super–fast. You can grab it [inaudible] up to git.asp.net and install it and run it again on all those platforms. Super easy to develop from some examples out there. The doc site, the docs.asp.net is under development right now. We made some suggestions on how they can improve that. I even sent over the Angular 2 docs as an example [chuckles] so we could improve some of the content. But I enjoy developing it from an API sample and I think that’s the big strength there is from web API and developing on the server side and delivering that back. So I really enjoy developing the API's on that platform.

JOHN:

So are you doing Angular 2 with ASP.NET Core or kind of what's your stack of choices?

SHAYNE:

Yeah, that's my favorite thing. I recently did a post where I did – I took the Tour of Heroes demo and added a minute change and used observables to hit an asp.net Core API and put that all inside of docker containers and engine X and use that to make a full end to end app. Even through some [inaudible] in there, in the back to store the content. [crosstalk]

WARD:

You've got to give us the link to that so that I can put it up there because that’s just – that sounds so cool.

SHAYNE:

It's called Legion of Heroes [laughter]. Yeah, that was fun. I think that's going to be, for me, on a "go for" basis, the asp.net core stack right now is in RC1. They're doing kind of a re–platform on what they're calling the .net CLI. But they're doing some good works on the performance.

The Stack Overflow team right now is kind of dog-fooding some of its stuff currently in the environments. And they're doing some super great performance on their platforms. So for those who don't know, Stack Overflow does run on .net on Windows. So from the performance standpoin, it just does do the job. But for me, on a "go for" basis, I would certainly recommend Angular 2 .net core on the server and choose your back end from a data base. They’re all pretty good from this stand point.

WARD:

Check me if I'm wrong on this, but haven't you also done some node work?

SHAYNE:

Yeah. Actually, I did have done quite a bit of node. I’ve been doing it at work and I’ve been doing Node on a little over four years. I do like Node as well just because it's like the JavaScript development environment.

I've tried to do Node and Typescript and I find that the wire up portion of this is more work than it’s worth, so I rather just write straight JavaScript from a Node perspective. And from an aggregation stand point, you know kind of our stack, what we're doing at work is using Node to talk to our java.net layers and doing some aggregation to serve our Angular front end. So it's super great; they’re very fast. It's great serving mobile front ends. And it's nice to be able to share the Angular development experience and the Node development experience because of JavaScript.

JOE:

By aggregation, you mean something that our listeners may not know. I mean, at one level its served the so–called reverse proxy idea that the client is calling to your Node backend which then makes the call out to the other servers. But it goes beyond just being a bounce off the wall kind of thing. Your notion of aggregation does something quite different and maybe you could talk about that.

SHAYNE:

Yeah, so in line with business apps, you've got a lot of existing services in the back. The challenge with existing services is you don't have either the money to change them or you don't have the knowledge to change the. So, you've got – and I'm going to say a bad word – you've got a lot of soap services and on the back end that you need to connect to. So putting something like Node in the back is being able to talk to these XML services, soap services, and even [inaudible] services that are sending back very, very large payloads. We're talking about megs of data and using Node to chunk through that and reduce the payload to deliver only what you need to for the front end being an Angular app or even a mobile app is a big benefit. It's what the Node does best, what JavaScript does best is string parsing, right?

So getting back to JSON or XML data – say you only need the first, last and an address. And if some large, you know, megs and megs of data to send across the pipe, it’s a big benefit to be able to parse multiple endpoints, put it in to something that can return and then send it back?

WARD:

We're not saying that they did it wrong. It wasn't necessarily wrong using soap or it wasn't wrong to deliver the big payloads because they were delivering those from server to server on that side of the wire and they were meeting different needs. It’s just that server to server communications, unless those requirements are different than what the client is asking for and we shouldn't expect the same API to be able serve both consumers well. And that's what you're doing in there, right? You're reshaping it – the request and the responses so that they suit the long–distance client customer.

JOHN:

Here's a real world example here. Let's make up something like you're going out to make an order for widgets, right? So in the old model, if we did an order for widgets and they had a massive payload, they were doing that because [inaudible] it's like a server–based web server, right? So, it's strange – [crosstalk].

SHAYNE:

Right.

JOE:

Occasion. So how would you remodel that for what you are doing now?

SHAYNE:

Well, the – let’s put it in a different perspective. Let's say we've got a large order database that – let's say it's a brand new product and we've bought it and some big CMS back there. And we have a POS system that sits on a hard desktop typically send back those large pay loads because we have benefit of that front end POS system to be able to chunk through that data. Now what we're doing is using Node on the server to take that large payload and maybe use it for paging. Maybe doing – looking up specifics orders that or maybe stored into cash or something like that. On the Node server where we rent a server something like that.

So we think and notice like an air and traffic controller almost to get to the [inaudible]. Just what we need for a specific view instead of sending all of that data down to the web browser sell to be able to chunk through it and increase a response time that you wouldn't necessarily get if you send it all down at one chunk.

WARD:

And you also talked about aggregation which I think – I mean, that's the way you introduced it. We just talked about how to shrink a payload from an API that delivered too much. Another one of those things that I thought you did – it’s a very interesting technique is "a client says I need an X." You know that in order to satisfy X it has its three different servers on the back–end. Three different servers that they pull together everything that's really needed for X and you can just take that single request from a client go make – on the server – make all those different calls. Get there from to their different APIs, get that stuff back, filter out the stuff they don't need, mush together the stuff that they do need and come up with the next payload. That's kind of one of the features of it.

SHAYNE:

Yeah. And that's a perfect example because the kind of the beauty of Node is that I can send off that request being a single tray all the way down to the low level. It is multi [inaudible] so I can spawn off these multiple acing request. And say go hit my CMS. Go hit my customer database. Go hit a file server somewhere off from the distance. Bring back those three things, put them all together into a mishmash and create the smaller objects of those three together and then bring down just what I need. And that's a big benefit for me without having the way to make the client wait for all that. Make those either simultaneous calls or in–sync calls one after the other to put it together.

WARD:

So why don't you just tell those three backend servers to rewrite themselves so they give you the X directly?

SHAYNE:

[Chuckle] Well, you don't know if you can and if you have the money to do that. I have the money. I have the money and knowledge to make that one API and develop that one API, but if it's a vendor product in the backend or if it's a main frame – so we've got some large AS 400 that you don't have the knowledge but it has an API that I can hit, that's great. That API might be select star from table, right?

JOHN:

Some of the other downsides, too, is if you have the client that's hitting there, that client doesn’t need to be a browser; it could be another web server or another server. If that server is already talking off an API, should modify the API? Now, I have to go update every client that’s talking to it too, right?

SHAYNE:

Yeah, exactly. Because more often than not, when you're talking about big enterprise, you've got more than – especially with main frames or large backend CMS type systems, you got more than one client hitting it and like guarantee it's more than five in most cases on these large enterprises.

JOHN:

Yeah. There's one thing large enterprises don't have an app type for. If you're going to change your code that's one thing, but don't be breaking something that's already working in the production. So don't be touching my stuff.

SHAYNE:

Yeah.

JOHN:

That kind of thing, it's pretty coupled, right? And the architecture that you're talking about is using Node as an aggregation layer in the middle or where the API façade, that's more of an in direction. And it makes it easier to you to modify and move forward.

SHAYNE:

And also insulates me from change. So if I’ve got a reservation system or if I've got a CMS in the back that is degrading or we need a new – a replacement, it allows me as a business to replace that backend system. And then I only have got to make the Node API change to hit the new system and it insulates my Angular app from – that changes itself. So I don't have to go to change the Angular app and change the API and change the 15 layers that sits in between my Angular and the back–end, I just change my Node app by itself. Because it just talks to one interface, I just have to change the connectors to the new CMS.

WARD:

And I don't think this is just about old stuff, too. There’s been this whole move to micro services in which people have been trying to devise lots of little services, self-contain services at the back end. That's great if you can afford that kind of chattiness to go hit them all up. But, it's tough to run a client that's going to make 20 calls to be able to satisfy our current need. Then again, if you use that Node and server to aggregate things for you, you have control. You can live in a world of micro services and still deliver semantically viable, single request from the client and give them the response they need.

SHAYNE:

Yeah.

WARD:

So it's not just about overcoming legacy. I think it fits into the new world of micro services.

SHAYNE:

No, I would agree there for sure. In some, the architecture of micro services is the joke. It is kind of like SOA done right but it's the one service done one thing correctly. Do one thing and do one thing right. And then if I just happen to Node service – that Node service is more than just the proxy that we talk about. A lot of people, a lot of architects will say “well it’s just a proxy, it’s just a pass through.” It can be a lot more than that because if I have a bunch micro services in the back, I may have a customer micro service and I have a product. You know, a product micro service that subsequently talks to three or four other micro services, right?

If I had the one entry point that does a job and it can scale because Node scales very well by putting those in containers or some sort of a service scaling and AWS or Agile or [inaudible] view, it allows me to just rewrite that one layer and be able to service the front end and insulate the front end for any change.

JOHN:

So kind of bringing this back to the Angular 2 side of things, you didn't mention this earlier about HTTP and your experience with it. You also mentioned – we talked about how to get the data. We talked a little bit in the show about how we can use promises with HTTP library or we can use RxJS with observables with it. What’s been your experience? What have you used and how has that been for you?

SHAYNE:

I initially started – so going back to the hack night, observables weren't in. I think we're still at promises and I've had some – the promises experience with Node using libraries like Bluebird. So initially started with promises I've then – since switched over to observables. It's kind of out of the box right now.

I like observables for a couple of reasons. I’ve used Reactive extensions and .net being my background so I understand the model. Secondly, I like the retry model that exist in observables so I can retry to get the data. It allows me to do that. I kind of like that model. I find that the code for me is just more familiar and so I think I can try to type it a little bit. It's just kind of comes off the fingers a little easier than the promises for whatever reason. Maybe it's just the familiarity from the .net work. So I happen to like it the observables. I'm glad to see that within Angular 2.

WARD:

Yet so many people are shocked to learn that Microsoft came up with reactive extensions first [chuckles]. Because that's just like – everyone’s like, "Oh, Microsoft couldn't have come up with that." [crosstalk] Well sorry [crosstalk].

SHAYNE:

Do you have a little bit of history about that, Ward?

WARD:

Well, maybe Shayne have a little bit to [inaudible].

SHAYNE:

I actually don't know the history; I was mistaken because I thought it was started back in Silverlight. I think it was more of the Silverlight and WPF worlds where I thought I started using that, maybe a little later than that in the Windows phone world.

JOHN:

Right. So those observables were actually slightly different. But yeah, the RX.net stuff – I don't remember when it came out but it's been a long time. I was out for quite a bit. I mean, RX – the all Reactive extensions kind of thing is usually in the ReactiveX.io website like all the languages out there. It's not like RX is a brand new concept by any means, right? It's been around for a while. And it's been in different languages longer than others, too. I'm not exactly sure how long it's been out in JavaScript. Are you, Joe?

JOE:

No. You know, it got really a bunch of notoriety and popularity in the past, what, 1 year? 18 months? Maybe two years? But I think that got to be a little bit around that at least

JOHN:

Like anything though, right? Once it becomes people you're like, "Wow! It’s just invented" and right. Unlike – I’m looking at a reactive website, I put a note – the link in the show notes. There's Java, JavaScript, C#, Scala, Clojure, C++, Ruby, Python, Groovy, jRuby, Kotlin and Swift. So, I mean, there's many flavors of RX that are out there and it's been out for quite a bit. But I honestly don't know where it actually originated from; I just know that RX.net. It's been around back when I had hair. [Laughter]

WARD:

Well, wasn't that long ago? [chuckles]

JOE:

Just right before he started being on the show.

WARD:

It goes back at least to 2012 and for people who know Link or – it was [crosstalk].

JOHN:

Right? [Inaudible] link.

WARD:

Yeah. It was a realization that you could come up with a language for a way of looking at events and streams of events over time that modeled exactly the way you looked at looking at arrays or things like that. And Link had become very successful on the .net world and people behind it had this other realization that started to develop essentially what was link for events, and that's what reactive extensions became.

SHAYNE:

Yeah, I started using the reactive extensions when I was doing Windows phone development. That's like whenever when these phone–.

CHUCK:

Oh, you we're the guy that did that!

SHAYNE:

Yeah. [Laughter] Yeah, it's funny. I was just looking at an old blog entry from like four years ago and then– and I saw, like I was doing Windows development back– Windows phone development back then, and I was like oh yeah, that was a long time ago.

JOHN:

Yeah, I was an evangelist for Windows phone way back when, so I am laughing at myself.

SHAYNE:

Yeah. Silverlight– looks like Silverlight 5 and Windows phone 7 won is when reactive extensions came out. So however long ago that was. But yeah. It was a Microsoft thing that challenged it, open source world.

WARD:

Well, and the current library that was just, well, what's known as Reactive 4 is maintained by a guy who either is currently still at Microsoft. He certainly was, Mark Kawasaki, and now it's RX 5, which is actually – he still has a hand in. He's now being developed intently by people who have no Microsoft connection. But it does have a pedigree. Just given some props where they’re due.

SHAYNE:

So yeah, anyways, observables is kind of my preferred over the promise. And if I’m not incorrect, I’m pretty sure that the HTTP default return at Angular 2 now returns as an observable that you can just call map on, right? To get the return.

WARD:

Right, it's an observable first. You have to decide that you want to convert it into a promise.

SHAYNE:

Right. So observables win. [Laughter]

JOHN:

Of course Shayne, if you had a one tip you could tell people who are kind of jumping into Angular 2 or considering going to Angular 2 who never used Angular 1 before because that's kind of where you came from. What would you– what would you tell them?

SHAYNE:

I would say definitely look at Typescript. I mean I think that takes a lot of the challenges away from the nervousness if you will, getting into Angular 2. Learn Typescripts and then run through the Getting Started and the Tour of Heroes stuff on the documentation. I think that that's like "ok, I get it now" on how to put a quick application together. I think, that was "ok, I got it" and then just try it from that point. I think it's very comfortable. I find that with those 2 things, going through those 2

things, you'll find that the framework kind of falls away. You're doing Angular in the classic sense.

CHUCK:

Alright, well anything else before we talk about picks?

JOHN:

I just want to really note that Shayne's famous nickname is Beardy, just so everybody understands that [chuckles].

SHAYNE:

It’s what John calls me when he's in a funky mood. [chuckles]

JOHN:

Either that or what was your other nickname from that waitress, Shayne?

SHAYNE:

Hostile Shayne.

JOE:

Hostile Shayne? Yes, yes. [Chuckles

CHUCK:

Okay, we're waiting for the new framework, Beardy.JS to come out.

SHAYNE:

I'm going to go take that right now.

JOHN:

It’s probably [inaudible]. I'm going to go Google that.

SHAYNE:

Beardy.JS! That's my pick!

CHUCK:

Alright, well let's do some picks. Joe, do you want to start yourself with picks?

JOE:

Sure, I could do that. My first pick is going to be something that I haven't seen and isn't even out yet. But I am so confident that it's going to be awesome and amazing, that I’m going to pick it anyway, and I'm going to stake–.

WARD:

I am terrified; I am absolutely clinking over here. What are you going to do with it, Joe?

JOE:

I'm going to stake Ward Bell's reputation on it. If it sucks, then Ward sucks, and that's– [chuckles].

WARD:

That's a given.

JOE:

That's how much I am confident about this. And that is John Papa's new Angular 2 course on Pluralsight. Should be out by the time this goes live, hopefully, if not within a week or two. But John Papa wrote a course on – it's called Angular 2: First Look. Right, John?

JOHN:

Yes, yes.

JOE:

And I have given him some – little bit of feedback, tiny bit of help here and there and talked at length with some about it. And I know that it's going to be an awesome course on Angular 2 so I’m very excited for that course to come out and I hope that everybody who wants an instruction about Angular 2 goes and checks that because it's going to be great. So that's going to be my first pick.

My second pick is going to be not ng-conf itself but something conference related. Recently chose talks for ng-conf and one of the things I noticed was that even though we had a decent number of women in text submit talks, that we needed more technical talks submitted by women in tech. So if you are a woman in tech and for any reason, you feel scared at all to submitted a talk to the conference, do not avoid that feeling and instead just put yourself out there and submit a talk. Especially a technical talk, not a soft skills talk, even though we do need soft skills talk; people should submit those to conferences. We also need technical talks done by people of all backgrounds. So that's going to be my second and final pick.

CHUCK:

Alright, Ward, what are your picks?

JOHN:

Hold on one second. I'm sorry. The reason I was laughing is I was for sure you were going to say something that's not out yet, that's going to be awesome: Star Wars 8. [Laughter]

SHAYNE:

I was so prepared for that. [crosstalk]

CHUCK:

Yeah.

JOE:

Alright, I’m going to go ahead and pick that, too.

WARD:

I was cringing. tell me that’s not coming out soon.

SHAYNE:

You know what, 2 years, John?

JOHN:

Yeah.

SHAYNE:

But Star Wars Rogue 1 is coming out when? John, you have got to [crosstalk] – when is that?

JOE:

The next – Star Wars 8 comes out December of 2017. Rogue 1 comes out.

WARD:

I think that an asteroid might strike the earth first and that would be a good [chuckles].

SHAYNE:

Rouge one comes out in December of this year, at the end of this year. I'm going to pick that. I'm just going to pick; I'm going to pick Rouge one while I’m at it. [Chuckles]

JOE:

I was not done with picks. One more pick, Rouge one, that's my pick.

CHUCK:

Alright Ward, what are your picks?

WARD:

Oh in that, on that one I’ve been looking up buyabunker.com where you can have a bunker installed in your own backyard. And I was thinking that would be right with the [inaudible] when Star Wars came out. [Laughter]

But if I can't afford that, then you probably can't afford it either. I'm going to pick something that's going to really freak Joe out. He's going to be shocked. And that is that I’m recommending Cycle.js, the videos, to go watch that, not because I believe a word of it [laughter].

JOHN:

You have to back that up, what does that mean?

WARD:

Cycle.js is a framework and it's really a collection of ideas about how you can turn everything into one function. That's a teaser. But it's– it's react– it uses RX, it says that you should be able to model your entire application as a function of streams of observables, in and out. And I recommend it for three reasons. One, it's really well executed set of Egghead videos. Really well executed. And the story telling is really good.

Secondly, it's a thought. I think it's a great way to get a handle on this way of thinking that's going on, that’s behind this view of how applications can be constructed. And the third reason is that he uses RxJS – well he's using RX not RxJS, but he uses RX in ways that are purposeful. You know, it's very easy to encounter this stuff and just have a grab bag of methods thrown at you and wonder how to sift through them. But here, at least you see the operators, the observables operators appearing with a purpose. And you can sort of say "Okay, I can see why I would do that and what that operator’s actually contributing". So it's actually a good way to learn observables.

So for all three reasons, not because I think you actually should build your application that way, but because this is such a great learning exercise, I highly recommend Cycle.js.

CHUCK:

Alright. Joe, what are your picks? We already did Joe. [Laughter] John, what are your picks?

JOE:

Wait a second, don't skip me over–. [Crosstalk]

WARD:

I just forgot he even existed.

JOE:

I'm going to pick Star Wars 7. Star Wars 8, Star Wars Rouge One, and everything else that Ward detests.

CHUCK:

Alright John, what are your picks? [Crosstalk] Sorry.

JOHN:

Yeah, it's been one of those days here. So I’m going to pick a play by play that I did with Shayne. Actually the Shayne was the star of that play by play, and I forgot what we actually titled this thing [Crosstalk]. Is it up on Pluralsight?

SHAYNE:

Yeah, I suppose it was. [Crosstalk] It’s getting that Core 1 on any OS.

JOHN:

Yes [inaudible] that Core 1.0 on any OS with Shayne Boyer. It's up on pluralsight and it's been pretty popular. It's less than two hours long, and it's basically Shayne sitting there and showing me how to build an ASP.NET core app for a web application and it's pretty cool. He's doing the whole thing out on Mac, which should blow out people away who've been used using .NET on their Windows. And my second pick is a non–coding pick but more a group called Girls Who Code.

So recently I’ve been more and more involved with trying to do things with groups who don't always get a lot of support for getting into the coding industry. So some of them are children like Hour Of Code. We've talked about that before. And Girls Who Code is a wonderful organization what will help young girls get into coding and they do these immersed programs in summer. There were companies who like to sponsor them to do these wonderful coding exercises, and they also do a lot of things at conferences. So something I have taken an interest in. I've got three young daughters and one of them especially is very into coding. And if you are looking to volunteer and kind of help other group, definitely check out Girls Who Code.

CHUCK:

Alright, I've got a couple of picks. The first one is pinkies are pacifiers. My wife took all the kids except one. Guess which one that is. And that's why I'm able to get the show done without a whole lot of extra noise. So I’m holding my three month old right now.

SHAYNE:

Are you also going to pick cough syrup and whiskey?

CHUCK:

No, that's next week.

WARD:

I think I’m going to merge that with my pick and we'll have pinkies and bunkers. [Laughter]

SHAYNE:

That will keep you quiet, Ward. [Laughter]

CHUCK:

Alrighty. I also want to pick the city of Amsterdam, I was out there for ng-nl last week and it was a lot of fun. Great conference and the city is just a kind of a cool place to walk around.

It's an interesting mix of canals and roads which – anyway, I really enjoyed being there. So yeah, so I’m going to pick Amsterdam as well. And finally, two of the book series that I’ve kind of been reading as they came out came out with new books within the last month. The first one is the Iron Druid Chronicles came out with Staked, which is the latest in that series. It's about a druid, big surprise. And he has to deal with people or gods from all kinds of different pantheons who are basically fueled by the belief that we have in them or people who have had in them in the past. So anyway, really interesting fun story.

SHAYNE:

That's just like the show.

JOE:

Yeah.

CHUCK:

The second series is the Reckoners series by Brandon Sanderson. He just came out with calamity which is I think the last book in that series. Haven't gotten around to start it yet but I’m sure it's great so those are my picks.

JOE:

It's been great so far, Chuck.

CHUCK:

Awesome. Shayne, what are your picks?

SHAYNE:

I want to mention something really quick about Hour of Coding. They tweeted something today that I thought was really cool. Chicago is the first city to make Computer Science a core subject. That was a pretty important thing so I want to mention that.

My first pick is a YouTube webcast from the guys at Wrangle.io. They created the batarangle component tool. But they did a webcast called Thinking in Angular 2.0. It's about an hour long and they go through the whole Getting Started; they talk about decorators, benefits of Typescript, rallying the CLI, dependency injection, testing. So that was really good. I watched that. They go through the whole forums portion, too, which I think is missed in a lot of talks about Angular 2 so that was really, really quality.

My second pick is a little toy that we got in the house that I think my kids are starting to like and that's the Amazon Echo, which if anybody's had that in the house, it's a fun thing to have just to get people to integrate with home automation and adding things to shopping list and I don't know, it's just a fun toy. I know, another guest – Dan Wahlin just got one in his house as well and he's fun with that so I want to pick that.

CHUCK:

Yeah, I gave one to my wife for her birthday yesterday so, we're still figuring it out.

SHAYNE:

Yeah, it's cool.

CHUCK:

Alright. Well, Shayne, if people want to follow up with what you've been up to or follow you on Twitter, where do they go?

SHAYNE:

On Twitter, SPBoyer, S–P–B–O–Y–E–R, and you can always reach out to me there or my blog is at tattoocoder.com.

CHUCK:

Alright, well, thank you for coming. We'll wrap up the show and we'll catch you all next week.

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

[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. 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!]

Album Art
082 AiA Getting Started with Angular 2 With No Angular 1 Experience with Shayne Boyer
0:00
54:08
Playback Speed: