CoderCamps – Week Four – Typescript

After a “break” last week for the holidays, during which I tried not to forget too much, tried to learn something about Typescript and AngularJS, and watched some videos on Microsoft Virtual Academy, we were back to work today.

If Coding from Scratch (the “part 1” of the 12 week CoderCamps bootcamp) was mostly a refresher and felt like an easy stretch, this first day started off with a bang and some challenging homework.  It’s not easy being online in a “mixed” online/in-person class.  You have to be more vocal to get attention – and when your headset is not playing nicely with WebEx … well, that can be a problem!

Our first week (4 days only due to New Year’s Day) is dedicated to Typescript which is a “superset” of JavaScript designed to allow you to bridge the gap between older browsers (i.e. those supporting only the ECMAScript 5 JavaScript implementation) and the all-new ECMAScript 2015.  This latest version includes such goodies as classes and is strongly typed (so no more wishy-washy “figure out the type as you go along” – although if you MUST do that, there’s always the “any” keyword).

For day two we dug back into Typescript and the wonders of objects, arrays of objects, arrays in general, and some overview of loops, strings and dates.  The trickiest part for me was getting my head wrapped around the Array.reduce method which just didn’t seem to compute until I had that magic “A-HA!” moment where I realized that the first argument in the callback is whatever the current value (second argument) was the last time it passed through the array.  So if the current value is a (numeric) property of an object, it is simply the value of that property that is held in the first argument, not the object.  Ahhhhh – the relief when that all clicked into place.  In my defense I was hampered by being a remote attendee and unable to see the whiteboard in the classroom while it was being explained with diagrams on said whiteboard (something that did get fixed).

Our homework was three parts: a simple little Javascript date exercise, review of material covered to date (and tomorrow’s notes); and an attempt at writing a tic-tac-toe game.  Games are not really my thing – I was always one to curl up with a book rather than play any kind of game (physical, board, or otherwise), but breaking down a game into its constituent “business logic” parts is a good exercise.  Even so, I find a nice business workflow easier to deal with from a logic standpoint.  I spent a lot of time reviewing some code samples for this one.

Day three was spent back in my comfort zone of object oriented programming.  With ECMAScript 2015 there is full support for items such as classes, interfaces, namespaces, and even modules.  Our homework was to create a “vehicle customizer” using the concepts of classes and inheritance.  This also required some DOM updates (good review of what I learned in the first three weeks) and writing out the customized vehicle(s) to an array.  I didn’t quite have time to finish all the DOM updates, but if you use dev tools in your browser to look at the console, you should see the array of vehicles logged there.

Most of the fourth day was spent with Ajax.  This topic was almost completely new for me, although we spent some time on JSON which, if you’ve been following my blog, you may remember I used a little in my final project for the “part one” of this bootcamp.  I got quite excited to see JSON.stringify and JSON.parse again! Then we were off to more advanced topics such as httpRequestObjects which are used for making calls to Web APIs: think of when your weather app shows your local weather: chances are it’s making a call to a weather service API.

We also looked at the concept of promises in JavaScript.  Before I get into why that’s important, let’s understand what a “promise” is in JavaScript.  Essentially it’s a way for JavaScript to send a HTTP request off into the wilds of the internet, and then instead of having to hang around waiting for the actual data to come back, it gets back a promise that the data is on its way.  So think of it this way: If I’m in the middle of cooking something awesome and realize OH NO!!! I FORGOT TO PICK UP THE MUSHROOMS for my spicy black-eyed peas and mushrooms, well, no problem.  I send my husband off to the store so he can get them for me (the request), knowing full well that he will return with the mushrooms (the promise).

Now, here’s the key part.  While he’s off getting the mushrooms, I can continue with the rest of the dish.  I can chop the onions, garlic, gather the spices, cook the black-eyed peas.  So?  Well, JavaScript is single-threaded.  That means it can only do one thing at a time.  So before promises, it would be as if, having realized my mushrooms are missing, I had to stop cooking, get in the car, drive to the grocery store, get the mushrooms, return home, and then – and only then – continue cooking.  So in other words everything would have to stop until I got my mushrooms (i.e. my data).  With promises, however, JavaScript can just execute whatever else it can get on with right now, but when it does get the data back then it can do whatever it has to do with the data.   (And yes, “then” is a method on a promise).  Okay – but what if the data doesn’t come back?  Well, in that case you can use the second parameter of the then method which allows you to have a callback for a failure scenario (perhaps a large modal with a flashing red background saying “Danger, Danger!”)

Very cool stuff.

The homework for this weekend is quite the challenge …..

Essentially we’re building a variation on PacMan, complete with brain-eating zombies threatening to destroy our heroine (I’m using MsPacGal, no less).  Here she is:


This requires quite the collection of technologies: Canvas (brand new), random static maze generation, MainLoop (not so easy in JavaScript), and then just the straight game logic along with the classes, arrays and so on to handle all the endless updating.  Fortunately it’s collaborative, so we’ll see how far we get together.  I’ve found some great resources on how to do this, but even with all the tutorials and samples I’ve found, I’m finding this pretty tough.  Given more time I’m sure I’d get it finished, but right now it’s sitting in an incomplete state: I have the canvas and Ms. PacGal, and she even moves around the screen, but getting the zombies up there has so far escaped me.  I keep getting the dreaded null reference (on the zombie.render() function – and only on the recursive mainloop function).  The solution has escaped me – maybe sleeping on it will provide some inspiration!

With that, I’m off to watch the remainder of an AngularJS introductory video (ng-app, ng-MainCtrl, $scope, and ng-repeat, here I come!)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s