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

126

AiA 126 Incrementally Upgrading an Application to Angular 2 with Danny Blue


Incrementally Upgrading an Application to Angular 2 with Danny Blue

On today’s episode, Charles Max Wood, Alyssa Nickel, Ward Bell, and Joe Eames discuss Incrementally Upgrading an Application to Angular 2 with Danny Blue. Danny is a Software Engineer at LiveSafe, and is an expert when it comes to web technology. Danny talks about upgrading jQuery spa.   

jQuery Jokes

Danny agrees that developers love to joke about jQuery but the fact is, it works. it's hard to poke too much fun at that. But upgrades are needed he began looking for options.

The three options for Danny were Angular 2, React and Amber. Angular was his favorite because of how well it interacts with web components, and it uses inputs and events.

Custom Elements

Danny likes the fact that you can take custom elements and use them wherever you like in your Angular 2 application and the syntax for interacting with them is exactly the same.

This means your custom element can emit custom events and accept properties. Unless you mark it somehow you actually can't really tell that that thing is a native customer element versus an Angular 2 component.

Schemas

Schemas are an Angular 2 property. They are for the compiler. What most folks are used to now is getting some sort of an error.

If you create your component and you forget to declare it in your module and you try to use the tag somewhere you will get a compiler error. This is basically saying that Angular does not know what you are trying to do.

The default schemas are the normal ones you see all of the time. it will usually ask you to add the custom element schema to your NG module.

To hear the rest of Incrementally Upgrading an Application to Angular 2 with Danny Blue, download and listen to the entire episode.

If you are short on time, here are the highlights of  Incrementally Upgrading an Application to Angular 2 with Danny Blue:

Who is Danny Blue? (:48)

What is LiveSafe doing now? (3:40)

Angular 2 and NG Modules (11:25)

Server/NG2 build (21:35)

If you're doing the big bang rewrite (35:43)

Picks:

Alyssa: ng-book 2 and her awesome image on Twitter,  the deodorant love of her life by Dove and a YouTube video.

Joe: Star Wars: Rogue One, his friend Roman and the Overwatch game

Charles: Death Star costs

Danny: Doom 2016, Masters of Doom RX c-sharp unity library is out there for building games with reactive streams.

Links:

Hire.com bonus

 

 

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

AiA 126 Incrementally Upgrading an Application to Angular 2 with Danny Blue

 

Charles: Hey everybody and welcome to episode 126 of the Adventures in Angular Show. This week on our panel we have Alyssa Nickel.

 

Alyssa: Hello, hello.

 

Charles: Ward Bell.

 

Ward: Hey here I am phoning it in with Siri.

 

Charles: Joe Eames.

Joe: Hey everybody.

 

Charles: I’m Charles Max Wood from Devchat.tv. Quick shout out about [0:16] coming up. [0:17-0:18] coming up. You can find those Devchat.tv./[0:20]. We also have a special guest this week and that is Danny Blue.

 

Danny: Hey everybody. Thank you for having me.

 

Charles: Well, introduce yourself real quick?

 

Danny: Sure. Like you said. My name’s Danny Blue. I am a brand developer. I work at a startup called Live Safe here in Arlington, Virginia. I’m also a co-host on the web platform podcast and a Google developer expert for website techonolgies. So I like doing internet-y based things.

 

Alyssa: Were you at the Summit this year?

 

Danny: I was not at, I was not at  the Summit.

 

Alyssa: [0:52]

 

Danny: I have this, I have this terrible habit so like I’ll see things coming up on the counter that I wanna go do, but I forget about them until about the weekend before and I’m like oh, men, when is that happening? Oh it’s tomorrow? Alright, well that’s unfortunate.

 

Alyssa: I see.

 

Danny: Yes unfortunately I didn’t go.

 

Charles: [1:08] developer experts, man.

 

Danny: I don’t know but…

 

Charles:

 

Alyssa: They are a little fishy.

 

Danny: Yeah. We’re all over the place.

 

Alyssa: That goes back to a joke that Shai Reznik and I made about [MishCo?]. We made a little [fishco] joke. It was like [mishco with the fishpotty]. It was actually epic so yeah we’re a little fishy. If you get it. Okay. Alright, I give up now.

 

Joe/Ward: Oh!

 

Ward: You know what they say. Use a pun. Go to prison.

 

Danny: This is all fine. I can’t say all of this can be doing any better.

 

Joe : Let’s fix that.

 

Charles: [1:47] today to talk about upgrading an app Angular 2 and you corrected us before the show. We’re not talking about upgrading an Angular 2 app. We’re talking about a jQuery SPA which sounds like pain to me. So yeah. Why wouldn’t you wanna use modern tools to make your life easier?

 

Danny: Yeah. So I’ve actually only been at Live Safe for about uh. I’m there since April so math until now. One of the first things that we started looking at is because we kinda growing from you know from scrappy startup to midsize company. That kind of thing. So where my first job’s coming in was that we were  trying to gonna pick a new technology to rebuild some of our legacy stuff and thinking forward of what we build all our new stuff in. Originally at that time the idea was that oh like it will all be like one, be done in one big rewrite. Right. So we’ll like we’ll maintain the legacy code for ex months and we’ll actually start transporting new features up. And because of the way the real world does tend to work. That’s not just the way it worked out. So we had to figure out one if we could and then how best to upgrade small parts of the existing application from our legacy code based to a shiny new Angular 2 one using Angular CLI to handle all our tool one stuff.

 

Ward: Which is in deep like early beta alpha [3:20] right?

 

Danny: Yeah.

 

Ward: All of the upgrade pass and you’re still here.

 

Danny: Yes I am still here. I think we have one, we still have one kinda like early preview thing that I built with it that was with the very early it was I don’t even know if it’s I think it’s still in on the RCs of [Smen] updated in a while still on the RCs of the Angular and I can’t even think much version on the CLI, but yeah I’ve been here through all that. I jumped on right after, right as they were when the CLI guys had a branch that was web packed is when I started working at the CLI.

 

Ward: Well, that would make it own story. But uhm, tell us a bit about you workin and you got jQuery everywhere. And so I think we can safely say that upgrade to anything is a step in the right direction of jQuery. You had choices.

 

Man 2: Backbone

 

Joe: Were you? Yeah. That’s a small step from there. It’s a decisive step better than jQuery I will say. But let’s assume that wasn’t on the table. What was on the table and how did you end keeping Angular on the table.

 

Danny: Alright. Well. So the first thing I will say is like we do joke a lot about like jQuery and that kind of stuff. So far it does still work. It’s hard to poke too much on something that is actually working. Pretty much anything would definitely be an upgrade. The three things that we looked at were Angular 2, and so again this was in the, I think when we made the choice that we’re gonna go that way, it was in beta still. Angular 2 was still in beta. I don’t even think the RCs have been released yet. And then we were looking at React and we were looking at Ember. What we did is we did the [5:10] We made a few small apps with each kinda started looking at the different things around and tried to make our decision from there. It came down a lot to and I used to be a really big fan of Amber early on actually before I started. I’ve been doin’ Angular, writing Angular as for quite a while now, but right after Backbone], I was really into Ember so we’re looking in that to. There’s something about it for me like that one I got pushed to the side pretty early. I neither do really cool stuff now with the glimmer engine and such. But that kinda I got pushed aside. It’s really between React and Angular 2. There were a couple things that pushed us towards Angular versus React. One of them is and anybody that follows me on Twitter or anything like that said that I’m a really big fan of web components. Angulars interacts story with web components is really good and a lot of that is because it uses inputs and it uses events.

 

Charles: You combined right to properties of the target object and you [6:17-6:18].

 

Danny: Correct.

 

Alyssa: What do you do? I don’t understand.

 

Danny: When you’re putting the brackets around a property, the template that is binding straight to an underlying property of that element and the same with when you are listening for an event. It is actually listening for an event coming from that element. In React, it doesn’t work that way. What that gives you is that means you could actually take custom elements and use them wherever you like in your Angular 2 application and the syntax for interacting with them is exactly the same. So your custom element can emit custom events and accept properties unless you mark it somehow you actually can’t really tell that that thing is a native custom element versus an Angular 2 component. React doesn’t work exactly that way because of its virtual dom implementation and synthetic event system. So I don’t know as much about React so I’m gonna try to just stick to the things that I do know. But So if you’re dealing with a custom element it doesn’t know about its properties and it doesn’t know about the events. What you end up doing is in React there is a special ref of property that’s available on any JSX object and that accepts the function that will return the actual element reference. So you think about how an Angular hashtag whatever name to grab or reference to something and you could be a child and all that good stuff. That’s how you do it in React. What you gonna do is that you end up doing [cringing] a lot of wrapper components for other web components and I personally like again I’m personally a big fan of web components so the fact that the [8:03] story for Angular 2 is that easy, is really, really awesome. The only thing you have to do is you have to add the custom elements schema to your ng module or the compilers will complain because it will throw the airs that it doesn’t know what this property you’re trying to combine to is because it’s not an Angular component and it’s also not a native element that it knows about.

 

Joe: Danny, can you take a pause on maybe like just take a look deeper into that specific aspect of it for

 

Alyssa: Just before you do.

 

Ward: Just before you do ‘cause that’s really a good point, Joe. But just before you do, I just wanted [8:40] you know some people always ask about Angular syntax, binding syntax, and why they did that and web components was very much in line in the design of Angular 2. So with that said, Joe’s question is great. What about this meditative thing?

 

Danny: The custom elements thing?

 

Ward: Yes.

 

Danny: The custom elements schema?

 

Ward: The fact that you add schema.

 

Joe: Maybe you could also talk about Angular 2 how, what it works in that case. If the air it complains about and why that happens and then the custom schema and how you fix it.

 

Charles: You kind of did but I think it could be a little bit more explicit for listeners who may not be familiar with that.

 

Danny: Yeah. Absolutely. I actually just listened to you guys an episode about like common pitfalls and stuff. And I started thinking about these specific cases. Well. So very specifically what will happen is

 

Ward: You mean when Joe put the no airs on there and wonder why it didn’t bind?

 

Danny: Yeah. No. It was good. I enjoyed it. I enjoyed that quite a bit. Okay. So very specifically what I’m talking about is so hopefully anybody messing with Angular 2 is familiar with an ng module and there are, you know about declarations bootstrap array all that fun stuff. There’s another property on there that is called schemas. And the schemas are really for the compiler. So what a lot of folks are used to now is getting some sort of an and I do recommend everybody go back and listen to that episode because it will also help clarify some of these other things. Say you create your component and you forgot to declare it on your module and you try to use the tag somewhere on. You get a compiler and actually at the moment there is an experimental language service plugged in for visual studio code where you’ll actually highlight it red saying that it can’t find specific thing that you’re looking at. That’s also a very cool thing if anyone looks into it. If it gets into the compiler, the compiler will complain to you that it doesn’t know, that it can’t bind to a certain property because it doesn’t belong to whatever the element tag is. Pretty much all I’m saying is it Angular doesn’t know what you’re trying to do. Which is really what all Angulars statically analyzable stuff. That’s what it’s all for. So it can try to figure out what you are trying to do so that it can kind of prepare for it.

 

Alyssa: I felt like it’s my Angular story. Angular never knows what I’m trying to do. So I thought that was brilliant. So continue.

 

Danny: So there’s default schema or the normal airs that you see all the time and a lot of time you’ll actually see if you get that air that I just referenced, the air message will say something that if this is a custom element used to add the custom element schema to your ng module  I don’t know exactly what it does, but I do know that if you add the custom elements schema to the schemas array in your ng module, the compiler will not complain about it anymore which is all in all good in this case because that means you don’t really have to change anything about the way you’re interacting with web components and I believe that the custom elements schema doesn’t come from core common. I can’t remember now.

 

Joe: I don’t remember either.

 

Danny: Is it in core?

 

Ward: No, I’m not sure.

 

Danny: So it’s either in core common. Try to find it in [12:40]. It will be in one of them. But that will let you use custom elements in there. It’s all for Angulars compiler. I felt like maybe I tackled myself in circles a little bit. Do we think that covered it?

Joe: I like it.

 

Ward: Yeah. It’s an escape patch. You can actually be even more precise than that because that’s kinda halfway to the nowhere schema. You could if you want create a schema for exactly the web components that you’re using and then everybody would know that would take work. That would mean that you’re really, really, you really, really cared about being that precise. But yeah. That’s pretty much it.

 

Danny: Yeah. I actually didn’t know you could do that. I didn’t know you could work with it and specify the elements what the elements were. I would actually have to go back and play with that a little bit ‘cause I like that better.

 

Charles: Just called Ward on Christmas morning and asked him. “Ward, it’s not working. I don’t understand. You promised me it would work.This is upsetting.”

 

Ward: Yeah. Hey you know what in passing human [13:48], you said it was very cool and it’s true. It’s very cool. I have been playing with it. That is the Angular. I think the official name is Angular template language service. It’s the Angular typescript language service and this is so cool and it will be available. It’s available now for people who are playing with it. It will be public soon. What it does is it gives you IntelliSense and stuff about your templates whether they’re [14:24] templates or just like freestanding html templates so that you can see you know it knows when you’re sleeping, it knows when you’re awake. It knows if you don’t have the component or not. And so there you go. Anyway, I just thought of throwing that in there because you mentioned it and you were having a good time with it and I am too.

 

Danny: Yeah. One other thing. This is one I would think will  help out a lot especially after listening to the pitfalls It will also complain if you have decorated a class with component and it is not included in a module anywhere. So that’s anytime. When you’re getting that so, as you’re writing it, you talk about getting these airs. You’re not sure exactly where you messed up. It will tell you, “Hey, this component isn’t declared in the margin anywhere.You can’t use it.”   

 

Charles: So we’ve gone done some various rabbit holes that allow any way that get back to allowing you to use web components which was important to you.

 

Danny: Yes.

 

Charles: Your decision that you said, “Man, I like Ember ‘cause it makes working with web components which matter to me. Easy and I did not find that to be that easy as in React. And that was the decisive point or you just ended up there because it suit your architectural preferences…

 

Danny: So that was a pretty big one for me personally and I kinda get to spearhead the decision which helped out a lot. There were also just some other things that I liked about the way Angular 2 is going because again this was still on the beta days but the grumblings of the air [16:08] compilation stuff were coming and I’m really big fan of [16:15] because it’s the kind of thing where I feel like okay after they get this right, they can write the framework they want, and with the developer experience they want, and all of the really hard optimizations stuff is gonna to be handled by the compiler. So I know that’s overstating like exactly what that does, but I was really excited about the opportunities of [16:51]. One of the other things was the way they were handling the packaging. See I graduated from college in 2011 and have been doing it since then and the [17:05] and everything gets more complicated but everybody’s heard of the Java Script [17:09] and all that stuff but the way which overall is good thing because it gives us all these awesome tools. But I like the way they were packaging everything. I like the way that okay here’s Angular if I wanna do forms I use the forms module. If I wanna do HCTP, here’s the HCTP module. The fact that they are managing all these libraries at once, I was finding myself very rarely having to go to a third party library to get anything done which I appreciated so there was nothing that I needed to do that I immediately felt I had to reach out to a third party module or a library for which is how a lot of front development for me not up to this point but especially leading up to. It was really tempting to just reach out to something somebody already made but to me anyway with Angular 2, it was straightforward how I would do it by myself.

 

Charles: Now, I’m gonna push us along just a little bit just because of time.

 

Danny: Okay.

 

Charles: We have [18:13]  

 

Danny: Yes. Sorry. I can definitely ravel.

 

Charles: No, no. It’s fine and I think all of these questions kinda helped people figure out in their head why do I care about [18:21] gives me. But you know the title of the show is Incrementally Upgrading to Angular 2 and so I want to get into the process of actually doing the upgrade before we get into picks. We got about 15 minutes or so before we have to get picks. So.

 

Danny: Okay.

 

Charles: So. How did you start? What did you run into? Like was it easy? Was it hard? I’m really curious.

 

Danny: So there’s definitely a little bit of churn on the way to the final solution that we ended at. A bit thing was that we wanna do we wanted to use the CLI. I’ve been subscribed to those issues and stuff [18:57] few things, but we really wanted to use the CLI because that was one thing we didn’t. If you [19:03] with all these other moving parts, we could have one thing that would handle build for us, definitely, definitely wanted to try to use that. So really how we got started was okay I need to render an Angular 2 component inside of this existing application and I need to able to communicate back and forth from that component to the outside world and vice versa. So what we did first is that we just took an Angular 2, default project that you get when you do ng new with Angular CLI. So we got the entire four structure. We got everything set up from that, and we adjusted the build, the target folder from just a normal disk to server/ng2build. So this is all. Some of the other [20:03] is done in php which will matter in this case. And so what happen is it then we would take all of the existing code would seat in that server folder. So everything with its [20:21] set-up all kind of lived inside the same capsulated server folder. And then instead of the normal surf, we had it set-up. We had a map set-up to serve that folder and when we just change in pm start to do build dash, dash watch instead of sturf. So whenever you make a change, everything would build into this ng 2 build folder inside the server and then at the root, the index php file, a very small php script that would look inside of that build and grab the JavaScript files in the correct order and display, not display, and then write that to the page. In that way we were just have to point [21:18] to that one server folder and then when we need to deploy, we just run the Angular 2 build and everything in that folder just goes to the server. So that’s how. Just to get it working so we could start displaying things on the page that’s kind of what we’ve landed at which is working, which is working pretty well. Unless you guys have any questions about that specifically, I’ll talk about communicating between the Angular 2 code and a non-Angular 2 code.

 

Joe: Yeah I think.

 

Ward: That’s where I wanna go

 

Joe: I was gonna say so far it doesn’t sound that far off from what you know people would come up with in the other language. So let’s.

 

Danny: Yeah.

 

Joe: Let’s dig into yeah how do you get into jQuery SPA to talk to and Angular 2 SPA.

 

Danny: Alright. So this is where things get a little bit weird and just remember that all these things are done in the name of [22:14]. One of the third party [22:19] that we are using is ngrx and we are using ngrx store for all the state management. For anybody that’s not familiar with that, it is a redox inspired state management library that uses reactive streams.

 

Joe: You’re not [22:37] right that? I was gonna say

 

Ward: Very, very funny.

 

Joe: We’ve been there [22:45].

 

Ward: Just carry on, sir.

 

Danny: Okay. So anyways. So we’re good. That is what we have decided to [22:53]. That what I decided that I wanted to use, and then there’s actually good article that I will put in the dock that is in general is using reactive streams for state management. Anyway, we may eventually move off  of ngrx for just that pattern instead. But the one thing that we get is that we get one single source of truth which when we are, when you are dealing with two applications have to talk to each other. That’s really important because you need the state and the Angular application in the state and the jQuery code to match. Because if those start getting offset, then you’re just saying that you’re just in the world of [22:33] trying to troubleshoot stuff. So one of the things we did is we set-up one, what I’m gonna call it, one dirty component that is called exposed store. So in this legacy code there’s a LiveSafe namespace. So like very classic. So like things are [23:57]. LiveSafe.model.create. That type of thing. And we just put that component on the page. So that’s the first thing that Angular loads onto the page. That’s bootstrap complete, entirely separately sharing the same providers as everything else. And all that does tucked away in the corner where nobody can really see it is it exposes the store to that LiveSafe namespace. So now as everything. So now the jQuery code can subscribe to that store and listen for changes on whatever users or whatever else that you would wanna think, so you know you like updating users. So if you needed to display a list of users, regardless of where the actual call gets made to fetch that list of users, it gets populated into that one same store. So then if your jQuery code needs to do something with it and your Angular code needs to do something else with it, they’re both dealing with the same source of truth which in this type of situation is extraordinarily helpful. That’s the first way that we’ve done it. The other way that we have managed that is also with built-in custom events. So anybody that’s [25:27] with. So, you can always create new events, and have it be whatever you have to be able to create specific custom event to send data with that event, with this special detail property. What that prop. And I think that works IE 11 I think is where it cuts off but then IE 10 has support for it but the syntax is different. You can include a short polyfill maybe 25 launch code that kinda levels that playing field. So you could also do the same thing. Say you have a list of an event feed or something like that, a news feed of some sort that’s rendered in Angular 2, but when you click on it you need to trigger something else that’s happening in the jQuery code somewhere. So what you can do in that case is two things. You can either do something to update the state or you can either say like okay I need you to update the state in the store and your jQuery code is listening to that or you can emit a custom of not an Angular 2 event with the event emitter, but an actual custom event. And then from there the rest of your code can listen for whatever that custom event is and [26:50] with. So those are the two ways that we at the moment are messaging between the Angular 2 code and the legacy code.

 

Joe: I think my brain’s trying to catch up.

 

Danny: So I can talk fast about some of this stuff sometimes. So please let me know if you want me to go back and cover anything again.

 

Ward: Well, can you give us the game plan for getting from a jQuery app to an Angular app like you know in a higher level ‘cause you all have this app for us to help you bridge.

 

Danny: Yeah.

 

Ward: So that was important, but your end goal is to not be using jQuery? Right?

Danny: Yes.

 

Ward: You’re on your way there or you are there?

 

Danny: We are on our way there at the moment. One of the deals that I made when it kinda came time that’s like okay, unfortunately this is what we have to do because I don’t think this is anybody’s first choice or how you start building stuff is that whenever we build something in the Angular pit, we are deprecating and removing something from the jQuery. So overall, so the game plan overall is that we have separate individual, we have separate components. So rather than bootstrapping a single component right now because in that bootstrap array in your ng module, you can add multiple components as long as Angular confine that tag in the page, it can bootstrap that component. But it still shares the same dependency injector instance. It still shares all that same stuff even though multiple components are being bootstrapped. So the game plan for us is to deprecate large chunks of functionality at a time. Not deprecate functionality but to replace large chunks of functionality at a time with the Angular 2 stuff. So this is not small things where it’s like okay we’re gonna update all the input fields to our new fancy and your two input or buttons or anything like that it’s fairly large chunks of functionality that are being upgraded at any given time. So the idea is so okay so we have our sprints. Okay we are upgrading this part, we are upgrading this part, we are upgrading this part. At the end of that, that means that we are now deleting the legacy code that was originally there, and that we are implementing these little systems to make sure that everything is still working the same way that it was still working before. Like you said Ward, the ultimate end goal is that eventually all of these parts will be everything will be in Angular and then the way that I see it is happening is after the last bits of the jQuery code are gone, there’ll be, there’ll have to be a bit of reorganization of all of these parts to kinda get rid of these exposed pieces that don’t need to be there anymore. Once everything is in Angular 2, you can go back in moving and kind of reorganize some of your logic to work more in this holistic Angular sent versus this kind of split personality that we’re currently dealing with.

 

Alyssa: Do you have a timeline for that just as like months, or year, or weeks until you are at that point?

 

Danny: I think that will be months based on the way we’re going now. It will take months to do that. But this also depends on your team. We’re a small company, not infinite resources. But the other thing this actually brings up one of the last points I wanna make about it is that if this [31:04] do you decide to go? Because really it’s not as painful as I expected it to be extremely painful and I expected not to go this way, but after getting bits of it to work, kinda realized that this is actually going to save us more time in the long run with this ultimately being where we want to go of having everything in Angular 2. But if you do, the problem with having the split stuff is that legacy code tends to stick around a little bit. And so you have to be disciplined about trying to get rid about the legacy stuff. But it is a little bit of a slow process especially if you have to keep things in production to make sure everything is still running. So you go a little bit of a slower clip then maybe if you just start it from scratch. But then pretty much everything kind of freezes in time.

 

Alyssa: So if you meant you’re not solely focused on rewriting the legacy stuff thing or two, but you’re also writing new features.

 

Danny: Yes.

 

Alyssa: Like in Angular 2. Right? Like you’re not and so do you have like a ratio for I get to write one new feature per one old feature I refactor? Or like how do you keep yourself accountable for that?

 

Danny: So it’s a little bit tricky based on some other stuff that we’re dealing because a lot of it touches a lot of pieces. So it’s one those things where okay this legacy piece is being refactored into the Angular but it includes, but that piece includes new features in it. If that makes sense so.

 

Alyssa: No it does.

 

Danny: Alright. So it’s kind of buff.

 

Joe: I guess the other thing going back to your decision when you picked Angular whatever, why didn’t you do a big rewrite? I know a lot of people try it and they rewrite it, but I’m curious ‘cause it always sounds like a good idea right before you do it.

 

Danny: Yeah. So when it comes down to with any businesses decision that has to be made, it’s time. Right? So you have to weigh if you can tell your stakeholders and your customers not many new features are going to go out while we focus on doing this rewrite. So a lot of it comes down to timing in the business decision and what you think your customers can tolerate well to them ‘cause ultimately for them like all they see is that oh, this is working faster. You hope that all they see is oh, the performance has improved. But ultimately to a lot of people, it’s just gonna look like you’re standing still even though you’re not. If you couldn’t do the big bang rewrite, you have to have the resources and the time to do it and make sure you do it correctly. And in our case it just ended up in being more where we just couldn’t buy it off that much time to do it correctly where this is going to take a little bit longer, but each of the piece that gets redone will be redone in the way that we want them.

 

Ward: Yeah. My experience is also that you get about halfway ending your big rewrite and you realize oh, the problems we’re trying to solve are still hard. We know how to solve, but it’s still hard. And so it winds up a lot longer than what you thought so then you’re stuck in a limbo for a lot longer than you really had planned on.

 

Danny: And then there’s also always like the hidden features, right? Like oh, nobody uses this, but you find out that a few people do. We completely forgot what’s this little hidden model over here and oh men that’s [35:06] complicated.

 

Alyssa: That is like the primary reason that like it’s just daunting to us because there are so many things that have been around for so long, and I’ll be going through like the code [35:16] what. What is this chunk? Is it even working? We’ll go back like oh that’s been there since the dawn of this app, and then we go back and now asking the CEO, “Do you like this? Is this actually a feature?” And he’s like, “We are kind of accustomed to it.” So you do. You have things like that aren’t actually on the road map of your application of what you’re providing. And yet now all of a sudden it’s associated with you forever.

 

Danny: Yeah. It’s, it’s tough.

 

Ward: Only one tough [35:41] using this and you know it’s like so we’re gonna turn it off, so you turn it off. And then your biggest client that accounts for your app business goes, “Oh! We needed that.”  

 

Danny: Yeah. Luckily those are not decisions that I have to make. Those decisions sound hard and scary.

 

Charles: Anything else that you ran across? I mean one thing that I’m wondering is how do you test this thing as you’re gonna have it halfway between?

 

Danny: So if you are disciplined about testing your app state, it actually is not that, it’s really not that difficult at all. So depending on what the tested state of your existing stuff is, a lot of it hopefully is not gonna change. If the tests are really okay when these properties come in, this needs to change that kind of stuff it actually becomes really easy to test in that way. So as long as you are again you have to make sure that you are managing your state in a single place and then really you just write your tests about. Testing is actually then one of the only things that is not then a bit of a brain teaser try to wrap our head around as we’re working towards this end goal.

 

Alyssa: Like it’s been the easy thing?

 

Danny: Yeah. Obviously enough [36:57].

 

Alyssa: That is not speak well to this process if you’re telling me testing is the easy part.

 

Ward: We’re all laughing and somebody else, one of our listeners is going through this and going “Oh-whoah-oh!”

 

Danny:  [37:10] is never an easy, so it’s not the most straightforward thing to do some of the stuff. You have to have a game plan of what your ultimate end goal is because obviously the stuff we’re doing now is not the current desired state of everything. Great. Like this is a means to an end. But the other thing that I wanted to make sure I said is that it is possible. A lot of stuff that is out there for Angular is all like oh if you’re starting fresh. A lot of things that [37:54] cover the fact that you can bootstrap multiple components at the same time. So there’s even little things like that you have to I mean I hope you could because it was an array and so I dropped another component in there it found out. Then there are certain things like that I don’t think are common knowledge yet. So it is possible to do as long as you have a single source of truth. Whatever that is, whether it’s redox, ngrx, or a home-old implementation of something if you’re at making the single source of truth, it’s actually going to go much smoother than you think.   

 

Alyssa: That’s really great advice.

 

Charles: Anything that we should hit with this before we go to picks?

 

Danny: No. I think I covered it from my point anyway.

 

Charles: Anyone else have questions?

 

Ward: No. I’m glad i’m not doing it.

 

Charles: Oh! It’s so true, though. It’s like yeah this are [38:50]. This doesn’t sound like tons of [38:52]. I got my problems. I’m not sure if I’d trade those problems for your problems, Danny. You keep those.

 

Danny: Oh you guys sayin’ I know I’ve kinda made it sound it like a horror show, but it’s actually not. It’s actually a lot better than that.

 

Charles: Alright. Let’s go ahead and get some picks. Joe, do you wanna start yourself with picks?

 

Joe: Oh, you always start with me first.

 

Charles: Ward, do you wanna start yourself with picks?

 

Ward: Okay. Well, I kinda picked it in my show, but I’m gonna pick it again because I’m so intrigued by the Angular typescript language service which by the way, I expect the whole bunch any IDE or editor that can, that listens to the typescript language service today that is to say anyone that supports typescript is going to be able, the author of that is gonna be able to whip together something that makes you, so the Angular typescript language service. And then you’re gonna get all that cool feedback that helps you square up the fact that you wrote your template against some component that was in your imagination, but is the actual one that you’re binding to. So now the problem with that pick is that it is still has no public link to it, but you know keep your eye on it, it’s coming. My second pick was going to be how easy it is to create your own schema, and I just had a quick pick at the code. I can tell you that maybe we should hold off on doing that this afternoon.

 

Alyssa: What?

 

Ward: It’s not. It’s actually not that hard, but I guess there’s a reason why they haven’t documented it yet because it’s there. You absolutely can do it. It doesn’t sound like. What a pick! It’s not so like an exactly shout out and say “Go do that”.

 

Alyssa: Is this like an anti-pick?

 

Ward: It’s an anti-pick. It’s actually not that that it makes total sense.This is not a 3-minute pick. So anyway, moving right along. It’s Joe’s turn.

 

Joe: Alright. So first off, there’s one very obvious pick. Ward would have picked it. He might just have slipped it his mind, but just last weekend there was an amazing movie released.

 

Ward: Harry Potter. Oh wait. No, no, no. Headful Sharpening Three with Sharpening Pens, right?

 

Joe: Sharpening pens. Star Wars Rogue One was released. It was fantastic to sob for the second time last night.

 

Ward: And critically just got slammed as a snooze.

 

Alyssa: What? No it didn’t.

 

Ward: It was like fresh on rotten tomatoes like 84% which was really high, not as good as episode 5 or 7. It’s a popular vote, but the people  you know, the thinking.

 

Charles: There are at least three people who didn’t like it and those little [41:51] cares about, and they haven’t seen the other movies they didn’t get it.

 

Joe: Ward was [41:57] of them.

 

Alyssa: Well, what point do we actually get to talk about the plot? Like it’s that never. Like when is that socially acceptable to overrun a movie? It’s like years?

 

Ward: [42:04] It’s like a year.

 

Alyssa: Oh men!

 

Charles: [42:06]

 

***different time stamps***

 

Ward: For we could talk about it ‘cause this will go out a couple of weeks. So if you haven’t seen it in the first three weeks. Yeah. [42:15] you guys also see a spoiler. But anyway, I’m gonna pick that. Very [44:34]. [44:36] follows a great movie. I also wanna pick a real game I’ve been playing a lot of lately. Overwatched super fun video game. Lots of variety to it and just very approachable game.

Alyssa: Who’s your favorite character?

 

Ward: Oh! [44:52]. I think I’m a [44:56] person.

 

Alyssa: Wow. I’m a Mercy person so.

 

Ward: Oh! Alyssa You’re so stereotypical.

 

Alyssa: What the fudge! What does that mean? It’s like women are healers or something? I don’t get it.

 

Ward: Don’t be that, Alyssa. Don’t be that like “Oh women are healers.” No. You gonna come out here and say. I’m [45:15] girl. I work some major booty with [45:17]. That’s what I want to hear.  

 

Charles: Hey [45:18]. Does [45:20] have [45:20] hair?

 

Joe: Uh, [45:23]. I don’t know. She’s [45:25].

 

Ward: Who else do you like besides Mercy, Alyssa. Let’s hear it.

 

Alyssa: I’ve probably more of I guess a  [45:32] character because I last longer. And trying to [45:34] name of the one that’s all like metally and galaxy The Transformer and he shoots really fast whenever he goes in.

 

Ward: No. You’re talking about [45:43].

 

Joe: You know that girl [45:44]

 

Alyssa: Well, [45:46] is pretty cute too ‘cause she’s pink and I’m all done for that, but.

 

[indistinct chatters]

 

Charles: Pink with guns. That’s gotta be great.

 

Alyssa: But yeah. I just like to go on a heel on [46:02]. It’s a whole lot fun.

 

Ward: You know what. That’s what Anna is paid for. Anna is so much better than Mercy.

 

Alyssa: Oh, I’ll give her a try, but you have to be good at sniping with her, right?

 

Ward: No. Not necessarily. [46:14]. Alright. Enough Overwatched talk. Enough of me being [46:18].

 

Charles: I was gonna say I think Joe and Alyssa were just having a fight over which girls were awesome or.

 

[everyone laughs]

 

Joe: Yeah. Every girl that I have picked so far is a better girl. Right? Well, they’ve got my favorite. So anyway, so moving on. My last pick is gonna be a friend of mine. His name is Roman and his last name is unpronounceable. He’s Ukrainian, and I’m not gonna even attempt to massacre his name on the podcast. I met him at Angular connect. He was assigned to me. I was like helping out Angular connect people so with their scholarships.  And he came on scholarship. He went back to the Ukraine, and he was so inspired by what he saw at Angular connect that he started up a meet-up in Ukraine for Angular. And he’s organizing a meetup. He’s gonna organize a [47:11]. He’s organizing a ng [47:12] extended event. Just [47:15] stuff. Alright. Went back and just got excited about Angular and realized I don’t need to be somebody that everybody knows in order to contribute to the community. And that’s of course the way that people get to know you is because you did contribute of the community. So he’s been doing an amazing job like I find it inspiring to hear about the things he’s been doing in Ukraine. Yeah. So that’s my pick. It’s not just him, but everybody else that spends time giving life to the community in some way that’s organizing a meetup, contributing to documentations, finding bugs, telling other people, just telling other people about podcasts, people on Twitter to follow, stuff like that. Finding blog posts. Whatever. That’s my final pick.

 

Charles: Alright. Alyssa, what are your picks?

 

Alyssa: So I just did a tweet about it today. A link to the awesome picture of me with my ng book 2. I was so excited. I got the hard [48:21] it’s like a paperback. One of my followers was like “Wow! Is that a [48:25]?” And it really is. It’s a wonderful, wonderful [48:27]. So I got. I had this a PDF version for a while, but I wanted to have the physical. And I’m one of those nerds that goes through code books. Actually like [48:36] code, and like to type along with it. So shout out to ng book 2 in a physical form and another one that I have is don’t laugh guys. I have this deodorant and it’s like Dove, and it’s like a spray, and it’s smells amazing. I kinda use it like perfume on everything. So and ladies out there  I guess you could use it too for your [49:03]. It’s amazing and it smells wonderful and you must try it. So yes, ng book and Dove deodorant.

 

Joe: Dove deodorant. You spray Overwatched characters everywhere.

 

Charles: Exactly. I need the link. Alright. I’ve got a couple of picks. I was gonna pick Rogue One. I really enjoyed it. And listeners sent in a link for Ward. And it’s as Rogue One arrives in cinemas, we estimate the cost of powering the [49:32]. So this is actually like Physics and Math. So maybe Ward won’t object to this but it was really interesting just [49:38]. I think.

 

Ward: I think we send a case of Dove to everyone who asks about Rogue One.

 

Alyssa: Wait. You’re saying that like it’s a punishment.

 

Ward:  I wanna try the…

 

Charles: No, no. I think you should be deodorized and Dove sounds like [49:55]. But anyway, I think it took like 6.5 or something octillion pounds. It [50:04] pounds. So I don’t know how many dollars that is but it’s a lot.

 

Joe: [50:09] for how long?

 

Charles: It talks about lighting, it talks about cooking food, and it talks about powering up the weapon and tuning it. It talks about jumping the hyperspace with the [50:22]. So yeah. They kinda figured everything out. They actually got some professors involved in this so it’s really credible I guess. But I was just laughing at the end. I was like holy cow.

 

Ward: It must be true ‘cause it is in the interweb.

 

Charles: Right.

 

Ward: It must be.

 

Charles: And you know how much it cost to run it? You know it’s being funded by a government. Anyway, so yeah I’m gonna pick that. And then I should pick something else. So when this comes out. I think this comes out next week. It might be the week after. Anyway, the first week of January I’m going down to Las Vegas for CES. And so if you’re interested in any of the gizmos gadgets. Things with APIs is kinda what I’m looking for. I’m gonna spend at least just one day looking at all the stuff that’s cool that doesn’t really have much bearing on programming which is some of the help stuff depending on how the VR works, some of the VR stuff. But yeah. I’m gonna be putting all the videos in my YouTube channel. So if you go to youtube.com/c/devchattv. Anyway, I’ll put a link in there then you could see all the nifty stuff that are coming out with this year

x