How to Upgrade NgRX to 4.x

This week, I discovered that NgRX 4 had released. Yeah, we skipped over version 3 here too to get in sync with the Angular version numbering.

There is a pretty complete upgrade guide that you can find here.  But, the upgrade guide assumes that you are creating Actions by instantiating a new Action object rather than returning a literal as I’ve been instructing.

So, in this week’s post, I plan to cover the exact steps I recommend going through to upgrade to NgRX 4, why I don’t think instantiating an Action if the right way to create new actions, and some possible enhancements you can make once you’ve upgraded to the new version.

How to Upgrade NgRX to 4.x
Photo credit: Sean MacEntee via VisualHunt.com / CC BY

Continue reading “How to Upgrade NgRX to 4.x”

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.

Angular Observable Secrets Revealed
Photo via VisualHunt.com

Continue reading “Angular Observable Secrets Revealed”

TypeScript Basics for Angular Developers

For the most part, TypeScript feels a lot like JavaScript.  Most people pick it up without having any formal training.  

But, here’s the deal.  “Just because you can, doesn’t mean you should.”

The thing that makes me most nervous about Angular is that it is structured so that you can write some really clean code.  But, you don’t have to.  Which mean most won’t.

In fact, recruiters continue to contact me about Angular jobs with rates that make it obvious that hiring an Angular programmer is the same as hiring an HTML “programmer” 10 years ago.  Sorry gang, JavaScript has grown up and so has Angular.

So, here are a few things you need to know about TypeScript that will make you a better Angular developer.

TypeScript Basics for Angular Developers
Photo credit: MIKI Yoshihito. (#mikiyoshihito) via VisualHunt.com / CC BY

Continue reading “TypeScript Basics for Angular Developers”

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

Continue reading “Enforce TypeScript Functional Programming”

How to Implement Angular 2+ 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.

How to Implement Angular 2+ Routing
Photo via Visual Hunt

Continue reading “How to Implement Angular 2+ Routing”