krawaller

Hey folks! Thanks for sticking with us even when we're not the fastest guys around. I'm rea-he-lly glad to give you this promised behind the scenes post of how Golingo came to be. In case you've been sleeping under a rock (without any means of browsing the intertube), here's a quick recap for you: Golingo is our rudely addictive word game for the iPhone - it was released about a month ago, as one of the first to use the totally revised 1.0 branch of Appcelerator's Titanium Mobile. It is currently the #1 word game in the Swedish App Store. Fun stuff!

If you're not at all interested in how to create top paid apps using only Titanium with JavaScript, HTML5 and CSS3, this post not for you. Otherwise, please go ahead!

The code is hosted here at our brand spanking new Github account. Hold your horses or check it out straight a way!

But let's start from the beginning. Golingo was born from a thoroughly cosy word game played using Scrabble©-tiles at Café Agape in the tiny Swedish fishing village of Bovall. We've tried to create an electronic adaption that stayed true to the concept of a blazingly quick, enthralling word juggling game. But how did we do it? Come along!

The first experimental version was created as part of a school project back in 2008. It wasn't much more than a concept, but still hade multiplayer capabilities courtesy of Orbited. Back then it looked like this:

It fell out of grace in my busy brain while some other idea events bubbled up to my master node. But at the 16th of febraury this year, I coudn't hold it back any more - I had to have a neat project to try Titanium Mobile out, and there it was in the back of my head. I pulled it out and started prototyping straight away. I'm a hands on, iterative programmer, so I quickly got some initial results looking slightly ugly, but still promising.

Everything in-game is pure JavaScript, HTML5 and CSS3, which made it possible to develop the game itself in Safari, and dropping it into Titanium only when it was almost done. This was crucial to keep up the speed and sanity during development. Titanium is a great piece of software, but it doesn't have very good debugging capabilities, especially not for webviews. And Safari/Chrome/Webkit Nightly have extremely good debugging tools for both logic (JavaScript) and presentation (HTML and CSS), so why not use them?

I decided to use as many tools as possible to simplify my work, which resulted in the following toolbelt:

• Titanium Mobile
• CSS3 with Webkit extras
• jQuery 1.4.2
• Low Pro for jQuery
• Glyphish icons
• Uri-parser
• Swedish word list
• CouchDB
• Flag icons

In hindsight, I would probably have replaced jQuery with XUI or tailored code. jQuery is wonderful to use, but it's a bit heavy on mobile devices both to load and during execution. However, it does save time for the developer, so it's not a crystal clear choice. Also, make sure that you keep up with the flow of new exiting tech that might relieve your work - for example both css3please.com and cssdesk.com were release during Golingo's development.

The Construction

Most of the actual game was made in a few weeks time, but from scratch to published app it took almost six weeks of part time work. A lot of this time was spent banging my head into various walls. Again, Titanium is great, but it's a young framework with all the kinks that follows. There has been quite a few bugs, and the documentation hasn't always been up to date - but this is much better nowadays. What more - since most other developers are as clueless as yourself, It's been hard finding good resources and getting help. I did however get a trial for Appcelerator's Premium Subscription, with 48-hours guaranteed response, and I must say it's really good stuff. The developers themselves answers all your stupid questions and relieves most of the wall banging. If you can afford it, go for it!

By releasing the code for Golingo, we hope to relieve some of the headaches surrounding developing packaged HTML5 apps. I do not say that it's not full of faults, because it is, but at least it is a working example full of faults. Please don't hesitate to dig through the code to see what is going on. We believe we've solved some common problems that you too will run in to when using Titanium, for example transparently calling native functions from a webview (and vice versa) using callbacks and trickery. Here's a quick recap of that:

Connecting Titanium Contexts

Your Titanium application is built up of javascript files. There is a main file called app.js which is responsible for bootstrapping your applicaiton. As a matter of fact, you could actually put all your code in app.js, but that is only viable for very small apps. Therefore Golingo consists of lots of different files - pretty much one file per window and some util libraries. Whenever you open a webview or a window with a url pointing to a js file, they run their code in a new context - meaning you cannot easily communicate with app.js or any of your other windows or webviews. Or at least, you couldn't had the brilliant minds behind Titanium not given us app-wide events. But since they are brilliant, and they do have given us app-wide events, let's use them to let the different parts of the app communicate.

A common problem with this event-driven way of programming is that you cannot pass functions transparently back and forth between contexts since the event bridge serializes all passed data. Because of this, most people have a hard time figuring out how to call a function in another context and pass the result back to a callback specified in the calling function. We use a pattern looking something like the following, where we hijack the event firing and handling functions to hack in support for transparent callbacks.

Low Pro like a low pro

Another nice library helping the development of Golingo is Dan Webb's Low Pro. Low Pro is used to make it a breeze to attach beaviour to elements, and does it well. All our letters and boards should behave the same way, so they're all instances of the Letter and Board classes respectively. We ended up using Low Pro in a very basic way, but it does actually have support for inheritance as well as event binding and delegation. Our code should probably be rewritten to more accurately follow Low Pro and it's object oriented ways, but coding in a hurry sometimes results in less than perfect code. We'll fix that as soon as there is peace on earth. Nevertheless, I get a warm feeling from being able to just write:

Sexifying

In Titanium, you use JavaScript to create and layout native elements and windows. This is incredibly powerful out of the box, but my feeling is that Appcelerator care more about laying the groundwork and creating the low level functions than making a sexy API. This is totally fine by me. I love that their focus means a quickly maturing API. But since I'm also all about the sexy programming, I've taken on the sexifying part. In Golingo, we started this journey by abstracting the menu creation somewhat. However, these we're only the first baby steps.

After finishing Golingo, I've been working on a few different Titanium based projects. And the more I do work with Titanium, the more I like what you can achieve, but also the less I enjoy how Titanium does it out of the box. It's way too verbose and clumsy for my liking. Also, there is no good way of separating the layouting from the element creation. Since I love HTML and CSS, I decided to do apply them to Titanium. The result is not present in the current Golingo release, but I'll talk about it in an upcoming blogpost. Here is a sneak peek of an exampe:

Even though the HTML parsing might mean too much of a overhead for big files, a better layouting mechanism is needed, but I'll elaborate on that subject in an upcoming post.

Get dirty

I repeat: the code is hosted here at our brand spanking new Github account. Isn't it time for you to dive in?

We are very curious what you'll do with the code and all. We'll continue to develop Golingo as well as other cool apps, so stay tuned as usual. Also, we promise to catch up on the HTML5 vs Objective-C series, where we'll try to match the basic functionality of popular apps in a days worth of programming. Please feel free to leave tips for what apps you'd like to see us take on in the comments!