Angular 2 - Time to jump in! (Intro)

*** This blog was written with Angular2 RC-3, I will be updating to the latest release shortly.  Thanks! ***

Introduction

I consider myself a MEAN Stack evangelist, I love being able to use JavaScript / JSON from database to browser, its just easy to ready, easy to debug and overall just brings the fun back to programming (coming from writing Java for 10+ years).  When I first saw Angular 1.X, I thought it was 'black magic', two-way data binding... amazing.  Using Angular Controllers, Services, Directives, along with Mongoose, express-restify-mongoose, and some really cool templates from Wrap Bootstrap (Inspinia), I created some great web applications for my customers.  Naturally I was very excited to hear about 'what's next', thinking "Oh 2.0 is going to be awesome, I'm a $scope / controller fiend" and then at ng-conf 2015, the news broke:  "Angular 2 is throwing out controllers and swapping in components and oh by the way, we partnered with Microsoft and we are writing it in Typescript."  Wait... WHAT????

Fast forward ng-conf 2016 and it appears the initial shock has subsided, Angular 2 RC1 has been released, it appears the clouds are parting and the sun is starting to shine.  I was unable to attend the 2016 ng-conference, but I watched every video on their YouTube channel.  After watching the presentation on Angular CLI, I saw the ability to create a new Angular2 application without having to worry about architecture, gulp or webpack, and I said... "It's time to jump in".  By the way, shout out to the folks over a Scotch.io, I love their write-ups and they have a great summary of ng-conf 2016.

I believe that the best way to learn anything new is to pick a problem and solve it.  I play in a local racquetball league and we keep score on a piece of paper taped to the wall.  I think its time to bring our league's score board into the 2000's with an Angular 2 app (all jokes of old guys with head bands and goggles aside ;) ).

Development Environment

Everyone has their favorite OS and IDE but it just boils down to what is the fanciest text editor that makes me the most productive.  A while back I stumbled on an article about someone using a Chromebook for development and was introduced to Cloud9.  At first I was skeptical, probably just NotePad++ in a browser window, but WOW was I surprised!  Cloud 9 has full command line access, the editor has type-ahead, formatting, easy to search and display files, split views and much more.  I'm just amazed at what can be done through a web browser, and using Cloud9, I don't have to worry about setting up CentOS in a VirtualBox, my IDE travels with me where ever I go, exactly where I left off.

Code Examples

I decided to call my racquetball scoreboard application Splat-Shot in reference to a type of shot in racquetball that creates a distinctive 'splat' sound when it hits the front wall.  So I have the problem I want to solve, but where should I start?  Well let's see what everyone else is doing and then pick the best practices that work best for me.  The speakers at the 2016 ng-conf were great, so I downloaded each of their code examples to my Cloud9 IDE.  Some of them are listed below:

Issue-Zero
Following the same thought process of 'finding a problem and solving it', the Angular team created Issue Zero to help triage the GitHub issues for Angular 2.  This is a really great example, it includes Firebase, Authentication, Observables, Angular Universal... and the list goes on.  While great code, I found trying to learn all of these new technologies at once was a bit overwhelming.

Puppy Love
This is a great example for the use of Angular2's version of Google's Material Design.  With Angular1 I am a huge Bootstrap fan and with the Inspinia template, I had all the UI components I needed to make great looking web applications.  There are other layout / UI component libraries for Angular2 including ng-bootstrap and Telerik Kendo UI, but I'm an Android nut and I love the look and feel of Material Design so I decided to stick with the Material Design team.

Tour of Heros
This is the 'official' Angular2 demo application from the tutorial on the Angular website.

Movie Hunter
My Splat-Shot application demonstration is the culmination of many hours of learning, destroying, and rebuilding the application, again learning what's out there and picking what works best for me.  It was not until I watched the presentation on Angular 2  Forms from Deborah Kurata that I finally said, "Yes, this is what I want my code to look like".  She also has several training videos on Plural Sight.


ng-book 2
I jumped in on the early-bird pricing for this book and was not disappointed.  This is a great summary of Angular2, the code samples are well thought out and easy to read.


Just one more quick reference to the guys at DevChat.tv, Adventures in Angular is a great podcast on everything Angular, they have excellent interviews with Angular team members, 'people in the know' and just all around 'good banter'.

With your IDE set and sample code downloaded, check out my next post getting the Splat-Shot application setup and start writing some code.