For the last 18 months, I’ve been working for an organization that has what some might consider a unique requirement. Because of where our application’s data is sourced, we need to aggregate data on the client side rather than on the server. What this means is that for any one screen, we may make multiple calls to the server to grab all the data we need. Fortunately, because we adopted NgRX early in our adoption of Angular, we could avoid a lot of the headaches associated with client-side aggregation. 
Dave's Notebook
Upgrade to Angular from...
As I’ve been interviewing for a new contract, the question, “How do we Upgrade to Angular from …?” has come up several times. And as I’ve thought about the question, several patterns have emerged. 
This One Tweak Improved my Angular Code
I made a tweak to my Angular code process over the last month or so that has resulted in greater productivity in my development environment and fewer bugs.
Now, I didn’t make this change because I thought it would improve my productivity. At least that wasn’t the primary reason. I made the change because I thought it would reduce the chance of introducing bugs into my code. And while it does reduce the number of bugs in my code, the result has been generally improved productivity.
What is this great secret? 
Thinking in JavaScript
Over the last week I’ve gradually come to the realization that the fundamental reason why most people have trouble with JavaScript is because it doesn’t fit their mental model of how programming should be done. This isn’t to say that most programmers don’t manage to achieve their end goal. But if you sit back and take an objective look at the code we end up writing, you have to admit, the code ends up being quite ugly.
Now, this isn’t a dig at the way we’ve been doing things. We’ve all been doing the best we can with what we have. But, the JavaScript world has progressed and there is a better mental model that has developed and should even be expanded which will allow us to develop more complex and feature rich applications now and well into the future. 
Model View Presenter, Angular, and Testing
While testing Components is possible, it is not easy and is often pointless. Using the Model View Presenter pattern, or a variation of it, solves the problem.
Here’s the deal. Long time readers of my blog know I’ve been a proponent of Unit Testing for a very long time. While I was learning React, I went through the exercise of trying to write test as I was learning. Now, the great thing about Angular and React is that it is possible to test your components. The problem with testing components is that you are either testing that your HTML ended up in the right spot, that Angular directives did what they should, or you are evaluating the DOM to verify that component logic worked. In most cases, putting tests that do any of these at the component level is the wrong way to test. 
Angular Observable Secrets Revealed
If you’ve been programming JavaScript based applications for any length of time, you’ve probably already made the progression from callback hell to promises, but just to recap. Whenever we make any kind of asynchronous call in JavaScript, we need to provide a callback function to the call so that, when the call completes, the function can be called with any resulting data. Function calls you may typically make that need this kind of feature are setTimeout(), setInterval(), and AJAX calls using the various libraries that support this.
The problem with using callbacks is that you can end up with “Callback Hell” where you have callbacks inside of other callbacks. Our code becomes messy and difficult to reason about.
To try to flatten this situation out, promises were created. Instead of creating a callback function and passing it into the asynchronous function, the asynchronous function returns a promise that has a function we can pass our function into. This function can return yet another promise. The result is that instead of having nested callbacks, all of our callbacks live at the same level.
However, in the process, we lost the ability to cancel an asynchronous function using callbacks. Most of the time, this was not a huge concern, but in the case of AJAX calls, we did end up making more request than we really needed to. Most people never even recognized this as an issue. But if you go and take a look at some of your older code, you will see that you have several places where the code would work more efficiently if you were able to cancel a call that was being superseded by a new call.
Meanwhile, some additional functions were added to JavaScript Arrays. Maybe you’ve seen some of them? map(), reduce(), and filter() are three of the more common functions.
What? You haven’t seen these? If you have and you know how they work, you can skip this next section. But, if you haven’t, pay careful attention because this next section is critical to understanding how Observables work. 
Photo via VisualHunt.com
Enforce TypeScript Functional Programming
As consistent readers of this blog are aware, I’ve fallen in love with Functional Programming. But I also live in a primarily Angular/TypeScript world where some code is still Object Oriented and other code is more Functional in nature. And while TypeScript lets you do some Functional things, I’ve found it hard to force functional concepts in TypeScript. So, I’ve gone searching. Wouldn’t it be great if there were some sort of flag you could set that said, “Hey compiler, I’m in ‘Functional’ mode now!” And the compiler would make sure that you never used a conditional statement, never accessed hidden parameters, and never mutated state?
Well, I think I’ve figured out some of how to manage all of this using nothing more than TypeScript and some TSLint rules. 
How to Implement Angular Routing
In the old world where all of our pages were on the server and every change on the client side required a full round trip to the server, each page was a unique URL on the server. In the SPA world, we only load one “Page” from the server and the client takes care of making it look like we have moved from one page to another.
When done well, we can create pages that reuse existing content on the screen causing a minimal screen refresh while still allowing the user to link to a specific “Page” in our application.
These “Pages” are called “Routes” As in, here is the route to some code I want to execute. 
Photo via Visual Hunt
How To Be an Awesome Programmer
It isn’t what you think. Being an awesome programmer, or being awesome at anything has a lot less to do with any given topic: programming, boxing, writing. It has a lot to do with being a healthy human. So, the simple answer to the question of “How to be an awesome programmer” is simply, “be healthy.”
But what does healthy look like?
I really couldn’t tell you what got me started, but I’ve been reading an experimenting with Brain Hacks, Diet, Exercise, and Social Skills for over a year now. Turns out, they are all related. Now, most of my audience has less than 5 years of experience. I can say that because most of the programming population has less than 5 years of experience, so I’m going on the assumption that the people who read this blog, are a small representation of the global population. Many symptoms I will reference are going to be things you may not suffer with … yet. If you fall in that group, think of this post as a letter from your older self. I was young once too. I remember, I thought I was immune to some of these issues and if I wasn’t, there wasn’t much I could do.
But we’ve learned SO much in the last 20 years. Much of what we’ve thought was “normal” really isn’t. We are just proverbial frogs in a pan of water being heated to death. 
Photo via VisualHunt.com
Upload an Image as a File in Angular
This past week, I needed to be able to upload an image in my application to the server as a file so that I could crop it and upload it.
Now, uploading an image that you pulled up using the file upload control is relatively straight forward. But, in our case, the image we want to be able to upload didn’t always come from the user’s file system. This causes two problems.
First, you can’t crop an image you retrieved from a different URL using the HTML Canvas because of Cross Origin restrictions and second, you can’t upload the file using the standard file upload mechanism because you didn’t get it from the file system. 
Photo via Visual Hunt