I had so much fun writing the Facebook Live game in HTML5, that I decided to give this platform a try for my next prototype. Originally I choose MonoGame, but I put together a game prototype in no time with TypeScript and Phaser. So I thought, this is maybe a viable alternative for prototyping, let’s explore it some more.
The promise of HTML5 is old. Many years ago tech giants like Google and Facebook made huge bets on it, regretting it later. But recently, the rise of the MEAN stack (MongoDB, ExpressJS, AngularJS and NodeJS) has not gone unnoticed in the developer community. For gaming there’s Phaser, among other options. So I felt confident that I would be developing another nice game in no time.
Boy was I wrong.
Before I started, I wanted to make sure that I can include external JavaScript libraries (called modules). There are thousands of them so I want to have access to these valuable resources. From my .NET experience I was used to an organized, well established, coherent and well documented framework. Trivial stuff is abstracted or hidden in the IDE. The developer can focus on what he wants to develop and generally does not need to concern himself with plumbing and scaffolding.
The JavaScript world is not like that, I soon discovered.
Just to get a simple app running, requires understanding of frameworks, libraries, module loaders, task runners, bundlers, transpilers, compilers and sourcemappers. It has a steep learning curve.
There are so many options to choose from and they all have their advantages and disadvantages. Technology is being replaced in such a rapid pace that it is impossible to keep up with it.
Just to name a few of the frameworks and libraries I had to learn about: commonJS, AMD, SystemJS, Browserify, tsify, npm, bower, NodeJS, AngularJS, serve, lite-server, requireJS, gulp, grunt, karma, jasmin, babilify, tslint, browser-sync, watchify, sourcemaps, vinyl, webpack and mocha. Most of these require extensive configuration in magical json files.
JavaScript Fatigue
There is even a word for this problem: JavaScript Fatigue.
When you query this term on Google you get over one million results. It’s a real issue in the world.
The most frustrating result of this for me was that it took me more than a week, just to get a simple project working. I needed a simple webapp featuring TypeScript 2.1 and Phaser, that I could run and debug. Nothing fancy, I thought.
But putting this together in an IDE by yourself without help is… virtually impossible. There are huge collections of generators for new projects, that promise to rescue you. Yeoman is such a generator collection. The problem with this is, most of the generators are more than a few months old and technology moves so fast that they are already outdated and broken.
I tried many generators, boilerplates and tutorials from scratch. Many times I thought that I was almost there. Just needed to fix this little thing and then I would be king. But everytime it appeared that I had to go back to zero and try a new set of options. Sometimes I was willing to give up. But I found it fascinating nevertheless and I couldn’t give up.
The answer: tsify
Eventually I found this boilerplate template for Visual Studio Code and TypeScript, that is fairly recent and has what I need to get started. In the original project the sourcemaps are broken though, which are needed to debug in Chrome (I never got debugging in the IDE working and gave up on that).
It took me another few days to find the solution. But I did. That felt very rewarding! Of course there’s nothing to show to friends and family. So I can share this typical eureka moment with fellow developers only.
For those interested: the answer was “tsify”. The sourcemaps were crippled by the bundler (browserify). By integrating the TypeScript compilation in the bundler, I was able to debug my application.
Now that I finally have my plumbing ready, I can start coding my game!