Dave's Notebook

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.

Photo credit: freddie boy via Visual Hunt / CC BY-SA

Read More

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.

Photo credit: Tamworth Borough Council via Visualhunt.com / CC BY

Read More

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

Read More

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.

Photo credit: archer10 (Dennis) 99M Views via VisualHunt.com / CC BY-SA

Read More

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

Read More

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

Read More

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

Read More

Real World RxJS Marble Testing Revealed

There must be some evil plot to keep this information a secret because whenever I search for how to use RxJS Marble Testing all I see is how to use it to write tests for RxJS.  Well I’ve finally “cracked the code.”

In this article you’ll learn the basics of RxJS Marble Testing and how to apply Marble Testing to your own code.

![](/uploads/2017/06/2017-06-13.jpg "Real World RxJS Marble Testing Revealed") Photo via [Visualhunt](//visualhunt.com/re/9662e0)

Read More

NgRX/Store Coding Sanity Epiphany

Maybe this is all obvious to you, but since I don’t see anyone talking about this when I search for “how to do NgRX” or the various variants, I thought I’d call it out in this weeks post.

If you haven’t been following along, you’ll want to review my previous posts on NgRX.

![](/uploads/2017/06/2017-06-06.jpg "NgRX/Store Coding Sanity Epiphany")
Photo credit: [spcbrass](//www.flickr.com/photos/spcbrass/394867154/) via [Visual Hunt](//visualhunt.com/re/cff786) / [ CC BY-SA](//creativecommons.org/licenses/by-sa/2.0/)

Read More

Functional Reactive Angular Revealed

Over the last month or so, I’ve been presenting the basics of how to use NgRX/Store with Angular. In the past, I’ve praised the virtues of Reactive Forms, also known as Model Driven Forms. These along with RxJS make up the pillars of Functional Reactive Angular Programming.

What is sad is that this reality is lost on so much of the Angular community. When I listen to podcast where they talk about any of these concepts individually, Function Reactive Programming (FRP) is barely, if ever, mentioned.

But the scary thing is this, there are many people who are going to use the new Angular the way they used the old Angular and they will completely miss the main advantages. They may even jump from Angular to React or (even) Aurelia. And that’s just picking on the most recent frameworks. Some will want to go back to Egypt and decide jQuery is a good choice!

Functional Reactive Programming is not just a hot new model. It solves a lot of problems.

![](/uploads/2017/05/2017-05-30.png "Functional Reactive Angular Revealed") Photo via [VisualHunt.com](//visualhunt.com/re/b10788)

Read More