Beware of THIS in Javascript

Coming to Javascript from other object oriented languages can be frustrating due to its alien syntax structure.  I was told and have read that a common hang up is with the this construct behavior in Javascript.  So, naturally, I fell for it right off the bat.

I was staring at the following code and everything looked fine:

    update () {
        
        this._renderer.render(this._world);

        requestAnimationFrame(this.update);
    }

But alas when run I was encountering the dreaded "Uncaught TypeError: Cannot read property '_renderer' of undefined." This is because this in Javascript does not retain its original context when called from a callback.

The most concise description of the problem I could find came from TypeScript's github here: https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript

This is where some of the new ES6 syntax comes in handy. This still feels alien and unnatural to me coming from AS3/C# as it should "just work right?"

So I chose to use the fat arrow approach to the problem so that update could be called as a callback and landed on this as a solution:

    public update = () => {
        
        this._renderer.render(this._world);

        requestAnimationFrame(this.update);
    }

Flash Refugee finds love with... JavaScript?

I was late to the Flash/Actionscript party when I first got involved with it for a Facebook game-startup back in 2010.  By this time AS2 had fallen out of favor and AS3 was becoming the standard.  Code snippets directly on the Flash file timeline (a horror of potential pit falls) fell to an object oriented language that gave "system level" control to the programmer (as far as byte code can be called "system level").

I was aware of Javascript at this time but avoided it feverishly due to its reputation as a "script kiddie" adventure in terrible coding standards.  Code snippets I read violated most of the coding standards I had developed throughout my career (in-line functions, weakly typed, dependent on 3rd party libraries like jQuery to do data queries etc) so I could not consider it a viable option for any kind of client development.

Actionscript 3, as it turns out, was a fork of ECMAScript 4  and was being championed as a standard by Adobe and ex-Microsoft employees at BEA Systems.  This, of course, was doomed to failure as AS3 could not converge to the current state of Javascript.  In April of 2010, the very year I was discovering and falling in love with AS3/Flash, Steve Jobs published his "Thoughts on Flash" which would be the beginning of the end for Flash. I, however, was blissfully unaware of these goings on and happily delved into the Facebook Gaming startup I was with to develop "Cruise Time" for Facebook with Flash/AS3.

When the startup folded, my love for AS3 could not be diminished and I pursued it faithfully at Williams Interactive (developing Flash-based "Goldfish Casino") and then subsequently in mobile by leveraging Starling and Adobe AIR at Jam City (developing Juice Jam, then leading teams for the subsequent Family Guy: Another Freaking Mobile Game titles).  All of this, I knew, was on borrowed time because of the steadily diminishing Flash community.

Unity was the only viable option to Flash during this period, but I did not favor it for similar reasons I didn't care for AS2.  Unity inverted the game development paradigm by basically providing an editor very much like Flash, where code could be attached to game objects.  This was too similar to "coding on the timeline" in the AS2 days for me to adopt Unity as the clear alternative to pure-actionscript AS3/Flash development.

Scroll forward to 2017 and my time at Jam City came to an end and I was left with a feeling of "what could be next?"  Previously I had dismissed HTML5 as premature as it could not yet do all of the things Flash/AS3 could do without a myriad of third party libraries.  But I was impelled to look again when I found that even the old Flash Guru Rex van der Spuy had converted to HTML5 and had endorsed PixiJS as the way forward.

Seeing that PixiJS had adopted the container concepts of AS3 made it seem like a very easy choice to convert from AS3 to Javascript.  The only thing wrong with it was, well, Javascript.  It was still this weakly typed script-style language that I could not embrace for large gaming projects.  But PixiJS was so intriguing  I could not give up on it.

Alas the answer was in TypeScript. TypeScript brings to Javascript what it had always lacked, strong typings, object oriented programming capabilities with class and modular programming concepts. Timed perfectly, Visual Studio Code was release in 2016 to make this transition easier and I could finally see the way forward from Flash/AS3 development.

As a predominantly 2D gaming enthusiast finding this combination of technologies in the sea of JavaScript frameworks gave me a renewed vigor for game development.  With technologies like Ludei/Cocoon and Cordova to bring HTML5 games down to mobile as hybrid apps further confirmed that HTML5 had finally arrived and was the way forward for cross platform game development.

So, here on this blog, I will attempt to catalog my progress as a Flash/AS3 refugee converting to Javascipt.  Javascript is the "assembly language of the web" and the filter through which you view it is the best way forward.  For me that filter is TypeScript.