Angular 2 based Piano Note Training game side project

With Angular 2 hitting beta I decided to take it for a test drive and give it a spin. As a huge, (and vocal!) fan of TypeScript I was keen to see what the Angular team had done with it and was really interested to see how the component based approach to Angular 2 made writing Angular applications different to that of the first Angular.

Before I go into the details on the application, feel free to try it give it a try here.

The application

After playing with Angular 2 for a few evenings and liking what I was seeing, I decided I wanted to build something more real life than a throw-away To-Do list. Don’t get me wrong, there’s nothing wrong with building to-do lists, they’re a great way to get to grips with a framework, but nothing beats a real world project - with this in mind I decided to cross a side project off of my “apps to build” list and build a piano note trainer (source code available on GitHub).

As someone who is currently learning to play the piano and isn’t a great sight reader, I’ve been keen to develop a note trainer that records your progress over time to give you indicators as to just how well your sight reading is progressing.

So far the application is going well and I’m extremely impressed with Angular 2’s component based approach (heavily inspired by React if I’m not mistaken - but more on that in a moment). At the time of writing the application will generate random notes and draw them to the HTML 5 canvas whilst monitoring the user’s input to see if they press the appropriate key on the CSS based piano (credit to Taufik Nurrohman for the paino, it looks great and has saved me a tonne of time!). If the user presses the correct key then the application informs them of the correct key press and then moves onto another key. If the user fails to press the correct key then the application lets the user know and waits for them to try again.

As I continue to build the piano note trainer I’m finding Angular 2 feel more and more intuitive, and whilst Angular 2 is structurally different to Angular 1, it still feels quite similar in many ways - bar no controllers and the dreaded scope object.

Angular 2’s component based approach feels really nice, because we’ve learned over time that composition over inheritance the best way to build software

One of my main gripes with Angular 1 is the $scope object that was passed throughout an application and all too easily became a dumping ground of functions and data. This often inadvertently resulted in controllers taking on dependencies and quickly becoming tightly coupled to one another. Alternatively, the component based approach in Angular 2 naturally encourages encapsulated building blocks that contain the behaviour, HTML and CSS specific to the component and its role - the component can then expose a strict surface to its consuming components. This component based model follows the all too important _“composition over inheritance”_ approach and allows you to build your application out of a bunch of easily testable units.

For instance, if you were to take the following screenshot of the application in its current state and break it down into the various components it looks like this:

Overall I’ve been really happy with Angular 2 so far and can’t wait to see what tooling we start to see appear for it now that it’s using TypeScript. I can’t help but feel 2016 is going to be a big year for Angular.

The source code for the application is available on my GitHub profile and once finished I plan on submitting it to builtwithangular2.com. I’m hoping to have a live link once the application has reached a point that I’m happy with it to be used (I’ve still got to add sharp and flat notes which are causing some issues). In the mean time, feel free to give it a try via my GitHub profile.