Building an Angular 2 + Typescript application template

Last time I showed you a way to create a Typescript application template. Now we can use that as a starting point for an Angular 2 application.

As usual, I have created a GitHub repo with the necessary sources and the list of steps to perform. At the end of the process, we’ll get our friendly web server showing a nice “lorem ipsum” coming from an Angular2 Component .

Also in this case the core of the system is gulpfile.js which exposes a bunch of tasks:

  1. ‘clean’ : as the name may suggest, this task is used to clear the www folder from all the external libraries, the transpiled .js files and sourcemaps
  2. ‘libs’: this will copy the depencencies to a specific folder
  3. ‘build’: this will execute ‘clean’ and ‘libs’ and then transpile the .ts files
  4. ‘default’: will execute ‘build’, fire up the webserver and watch the .ts files for changes

Worth of mention is also the index.html which contains the SystemJs initialization code.

Enjoy!

How to setup your environment to write Typescript client applications

Hi all! This time I thought it could be useful to write down a couple of notes about how to setup your development environment ( in my case the wonderful Visual Studio Code on Mac ) and start writing Typescript applications.
To be honest I am writing this only because my memory is becoming sloppy and I am getting lazier day after day 😀

I created a repo on GitHub with the list of steps to perform and an example project.

In a nutshell you have to:
1) create the project folder
2) install a bunch of npm packages globally and locally
3) initialize your project with npm init
4) start coding 🙂

You will find all the details in the Readme.md.

At the end of the process your dev environment will be configured to watch the /src/ folder for changes on .ts files, transpile them into Javascript and run a small web server.

Enjoy!

Xamarin: Text-to-Speech on iOS

hi All!

Almost a month has passed since the last time I wrote a post. Many things are happening in my life and unfortunately I can’t study anymore all the time I was used to.

Luckly the last few days I had the chance to install Xamarin Studio on my Macbook Pro and play a little bit. What a relief!

I spent a while trying to understand the interface (sorry but I’m used to Visual Studio, my bad) then I started thinking what could have been a nice thing to prototype. At the end I decided to start with text-to-speech. Why? Because I love the way my dog moves her head when I have my Mac calling her name 😀

I uploaded a sample on GitHub, as you can see the UI is pretty simple, just type the text and press “play”:

text_to_speech_screenshot

The core of the sample is in the TextToSpeech class which makes use an instance of AVSpeechSynthesizer , not exactly rocket science.

I am planning to add some customisation, like the ability to change pitch/tone and culture, so stay tuned 🙂

WordPress: how to handle page redirects in shortcodes

This is just a quick tip, something that I faced a while ago while working on a client’s website.
I had to develop a shortcode responsible to render a form and obviously after the submission I wanted to redirect the user to another url (following the POST/redirect/GET pattern).

It may seem easy but using something like wp_redirect directly in the shortcode rendering block may cause errors like this:

Warning: Cannot modify header information - headers already sent by ...

One possible (and very easy) solution is to register a function for the template_redirect hook and handle everything there. Something like this:

of course don’t forget to create an instance of the class!

How to handle string localization with AngularJS and Typescript

As many of you may already know, most of the times we developers write something is because we feel the need to create. Not because the current project really requires it, but just because we feel the urge to write some code, patch something up. Especially when the project is reeeeally boring.

In my case I needed a quick and dirty way to localize strings in my AngularJS app. I know there are plenty of standard and non-standard ways to do this but this time I wanted a way to escape the boredom.

What I came up with is a simple Service that looks like this:

(yes, I’m using Typescript)

The implementation takes care of reading a very simple JSON file containing all the available cultures and the respective labels. Something like this:

The example app itself is very simple, there are just two controllers:

LanguageController acts as a simple wrapper over the ILanguageService, exposing the list of available cultures and allowing get/set for the current one. On the UI there’s just a dropdown with the cultures.

MainController instead takes care of requesting the labels from ILanguageService and $watch-ing it’s currentCulture property. When an update is detected (eg. something changed on LanguageController), the new labels are fetched from the service.

Easy huh?

CQRS: on Commands and Validation part 2: the base handler

Last time we discussed how to use the Decorator pattern to validate our Commands. The approach works fine but while using it I started feeling something strange. It can be probably considered an elegant solution but there’s something missing, like a code smell.

What is the problem? Easy: how can you tell if you are really running the validation? What if you just “forget” to register the decorator? Nah, you need it.

Also, a better use for decorators should be all those cross cutting concerns like logging, tracing and so on.

Another very simple solution is to use a base class for the Command Handlers that takes an instance of IValidator as optional dependency and consumes it right before executing the command:

as you can see in this case the validator returns a “result” object that exposes a boolean status flag and a list of errors that may have occurred.
If the validation fails a specific exception is thrown, containing the list of errors.

If instead everything is ok, the protected method RunCommand() is executed, and that’s the only thing you have to implement in your Command Handlers 🙂

CQRS: on Commands and Validation

Let’s have a quick discussion about CQRS. There’s a lot to say to be honest, so let’s try to focus on just one thing today: validating your Commands (who knows, I could start a series after this, we’ll see).

The idea is simple: how can I make sure that the data I am passing to my Command Handler is valid?

Also, what is the definition of “valid” ?

There are several aspect to take in consideration, several “levels” of validation. I could just make sure the Command object is not null and/or the data it contains is not empty. Or I could run the validation against some kind of context and check the application Business Rules.

As you can imagine, having different levels means that we could have different implementations scattered in various places/layers of our architecture. For example I could have the API Controller (or whatever outmost layer you have) check for null and perform some Business Context validation later, before or directly in the Command Handler.

In my last project however, I decided to keep things simple and keep my validation in just one place.

Initially the right spot was the Command Handler itself, but of course this would have violated the SRP.

A quick and immediate solution was to have a separate instance of a IValidator<TCommand> injected in the handler. Easy.

Then I realised that my handlers are more “close to the metal” than expected: in most of the cases they access directly the DAL (passing through some kind of IDbContext) and I didn’t wanted to rewrite the call to the IValidator in case I had to switch the persistence layer.

Luckily enough, there’s a nice pattern that came into rescue: the Decorator! As explained very clearly on the SimpleInjector docs, you can create a ValidationCommandHandlerDecorator class, inject an IValidator<TCommand> and let your IoC do the rest.

Maaaaagic.

Bonus tip: in some cases you may want to skip completely the validation. Maybe you have a very good reason or maybe you’re just lazy. Whatever.

In this case, all you have to do is to write some kind of NullValidator<TCommand> class and instruct your IoC to use it when a specific validator is missing for that Command.

© 2016 Davide Guida

Theme by Anders NorenUp ↑