Incremental Type Driven Development in Angular

All Software Engineers rely on two important things in their daily work.

A programming language and lots of Data!

Front-end developers, for instance, rely on, well of course, the language of the web i.e JavaScript (and Html of course). They use it to Get, Transform, and Send Data of different kinds from any source or destination. Developers however, in order to effectively manipulate data, depend on Type Systems, such as the ones we find on the Typescript language.

Programming using Typed Data Models

We all know how important it is to have a proper structure both in code and data, and as such, we will see a rather useful, but sort of unconventional, way of developing new features for a product i.e

Thinking backwards up to the base model structure!

Use case

Let’s decide on the goal of the project. We will build a web application displaying a list of countries along with their flags.

Technologies

We will use Angular and 2 external apis:

• restcountries.eu
• countryflags.io

Guidelines

Let’s also use 3 rules that will keep us moving in the right direction:

1. What do you wish for?
2. Fake it till you make it.
3. Remove hard coding afterwards.

So let’s proceed…

Initial Step

Initially create a new Angular project

ng new ng-itdd

Step 1

Then, create a new component named “Countries”

ng g c Countries

and use it in our App

Step 2

Now let’s remember our 1st rule:

What do you wish for?

Answer:

A list of countries!

And this is what we are going to do i.e draw a list of countries.

Let’s update our view i.e countries.component.html

Now this is where it gets interesting!

Take a look at the console.log errors

Angular Cli Errors

Wonderful!😁 By the way you will see a lot of those errors when you decide to work that way.

Step 3

Now remember the 2nd rule:

Fake it till you make it!

So let’s create a countries object and also assume that it is somehow provided ;)

We gave ourselves an object to display i.e countries, and also assign it a type. Country type is left empty on purpose, because this is the main idea. We will fill it in with more properties, as soon as we find out what we actually what to do with it and when.

By the way… no errors!

Compilation success

Good!

Step 4

Now let’s “fake it” i.e provide it to the CountriesComponent via AppComponent

Step 5

Now, remember 3rd rule:

Remove hard coding!

For that we need to retrieve the list of countries from somewhere. Let’s use Angular’s http client and, by applying best practices, connect to a remote REST api for that.

A lot is going on here:

• App component is now providing a list of countries asynchronously via an injectable
• CountriesService injectable is providing the list asynchronously via a REST api

Well yeah! But the end result is not what we would expect

🤔…

Something is going wrong!

Step 6

Aha!💡 I got it!

Now let’s start from the beginning…. rule number 1!

I wish for a list of countries and specifically a list of country names together with codes!

So there you go…

You see where this is going. We start from the end result and then we go backwards i.e create our models, define their types and then we fake the result until we find a way to get it.

That is the idea!

Now see what we get as a result

Now what is this () ?

Step 7

It looks like that county.code is not displaying anything.

Let’s look at what the api is giving us:

Ah! We have a name but we have alpha2Code instead of code. And what can we do to solve this problem now.

The answer is:

Mappers!

The main idea is to create a view-model that will be the desired one. Afterwards, a mapper from the original model to the view-model will have to be created and after a few adaptations to the providers, the result is

Perfect!

Step 8

Now, by repeating the same process again and again by applying the 3 rules, we end up using another api providing us country flags, and thus…

Final Result

Countries with Flags

Final Thoughts

Start from where you want to go (feature) and go backwards, by updating the model, updating its type and adapting the codebase properly. A proven effective and safe way to reach the end goal, together with type safety, along with the proper tools (cli, IDE intellisense) we, developers, could be certain for the end product result.

Note: Source code of the project can be found here.

Thanks to Dillon Kearns for his insights on Incremental Type Driven Development in Elm