Blogging Fusion

JavaScript Patterns & Titanium Mobile

Understanding good JavaScript pattern and practice is essential to ensuring that you write good Titanium Mobile apps. One of the best all round books I have read that goes a long way to explaining good JavaScript practices is JavaScript Patterns by Stoyan Stefanov. It's a moderately light read, weighing in at only around 200 pages, but there is no fluff here. It's straight to the point, there's tonnes of examples, and this will make you a better JS coder and a better Titanium Developer - period.

Go and buy JavaScript Patterns now - you won't regret it.

As suggested below, another must have JavaScript book is Douglas Crockford's JavaScript: The Good Parts. I don't have this one personally (yet) but it's on my list and comes highly recommended.

Appcelerator + Cocoafish - First Impressions

In case you hadn't heard, Cocoafish is an application "backend service" in the Cloud, and allows you to build your apps against their API's instead of having to go through the process of buildling your own and hosting them. It's a great idea, and one that has been done before by StackMob and others, but of course for a Titanium developer the most interesting aspect of Cocoafish is that it was recently bought by Appcelerator, who intends to build its API's smack-bang into the Titanium framework.

As someone who got an early invite and has built a client application on this framework already, I thought I'd give everyone a brief heads up of what to expect when Appcelerator rolls it out as "Ti.Cloud" sometime in March or April.

The Pros:

1. It's quick. That's quick to get setup, quick to build against, and quick to both query and return data. I'd estimate it's saved me about 10-15% of development time so far, and once the API's are built into Titanium directly and I'm more used to building against Cocoafish's "types", it could legitimately save me even more time.
2. It's nice and standardised... I have obviously used JavaScript to hook into it from Titanium mobile, but I've also written some PHP classes to interact and perform some routine tasks against my CF objects via CRON scripts. Writing the PHP API was a breeze.
3. I like the way all requests generally bring back the attached user object in question as well. For example, querying photos will always return the basic user information associated with those photos.
4. It's stable - even in Beta I have had zero problems with uptime or stability. Everything has worked. Nothing to complain about here.
5. There's no need to worry about hosting uptime, bandwidth, storage permissions, etc. For anyone who has ever managed a large web service system, that's a good thing.
6. No f**king around with photos. You upload them, they thumbnail, crop and store them in a variety of sizes.
7. I can imagine all the checkin and place data is very very useful, though I have personally had no need to use it yet.

The Cons:

1. The backend data entry interface needs work. Specifically, I'm creating a lot of objects in my database to seed it, but each time you add an object entry you have to do it from scratch - if there was some kind of template mechanism or "duplicate" entry thing that'd be great. I have heard that this backend will be updated in the coming months anyway.
2. There needs to be an overall "administration" account login, whereby I can access CF via the API's and update ANY photo, ANY user account, etc. I have a need to update a custom data field for each of my users every day, based on some outside factors (we'll call the field "rank"). I currently can't do this against the user accounts via my scripts, it requires another object to be set in key-value pairs or custom objects. 
3. Limiting of page sets. I realise this probably has more to do with the platform performance than anything, but I'd really rather not be limited to 100 records. By all means, default to a 100 max unless otherwise specified, but I have objects in CF that I want to update via some scripts on an Ad-Hoc basis and having to do that with paging is just a bit of a pain more than anything.
4. No real "randomization" ordering. I'd like to be able to set an order parameter of "random", which can't really be done yet. The CF guys were helpful and pointed out a way I could kind of do it by assign a random number to an object and then doing $GTE where clause based on a random input, but that's not really random. It would be good to see a random order set for all API calls implemented.
5. Cross-object joins. Probably not something everyone would want, but if I have 2 custom objects I would like to fetch at the same time then a cross-object join API call would be great. For example let's say we have a user record, and that user has a role_id attached to it as a custom field. If I want to then fetch a set of custom objects called "role_permissions" and another called "role_details" (both of which have a role_id field) I would have to now make two separate calls and pull back the objects separately. It'd be great if you could do a request for multiple objects that join on the same custom field.

Have you used Cocoafish yet? I'd be interested in your opinions of it so far!

Survey on the future of Titanium Desktop

Hi All, Please take the following survey if you are interested in the future of Titanium Desktop. Doesn't matter if you're just a user or you wish to contribute, all opinions are welcome.

The survey will be closing on the 1st of March, 2012.

http://www.surveymonkey.com/s/X76TXG7

Thanks,
Boydlee

NEW for Titanium SDK 1.8.1+ --- addRoute() Support in Android for Titanium

Update! Armindo has rebuilt this for SDK 1.8.2 for everyone. Again Armindo, we salute you! ;)

Since I first uploaded this back in September last year there have been lots and lots of people using the updated SDK and extending it for other platforms and to do other things.

Armindo recently made so great updates to the SDK and has taken it even further now and made some vast performance increases, so you can now use the addroute() stuff for Android in an updated 1.8.1 SDK branch and it'll be even quicker than before. Download details are below, as is an example implementation.

Download the Pre-Compiled 1.8.1 SDK for Mac OSX

Download the Pre-Compiled 1.8.2 SDK for Mac OSX

Download the Java Source

Armindo has also kindly provided a full implementation example:

Everyone needs to thank Armindo for his hard work and effort in making this even better!

Experiments with Arduino, PHP & Appcelerator Titanium

Here is a short couple of videos showing some experiments I made using simple Arduino circuits, which read in data over serial/usb via PHP (running MAMP locally). The PHP is executed via a Titanium app running on an iPod touch.

Controlling A Basic Arduino Circuit Using An iPod & Titanium Mobile from Boydlee Pollentine on Vimeo.

This second video is the same concept but using a piezo element to play some basic music...it's pretty straight forward basic beginner stuff but if anyone wants the source code I'm happy to post it.

Appcelerator Titanium Keyboard & Arduino w/ Piezo Element from Boydlee Pollentine on Vimeo.

Appcelerator Titanium - Understanding the Namespace Pattern

A couple of people have asked me to write an explanation on the namespace pattern in Titanium - otherwise known as "Tweetanium" - however for the purposes of this example I'm going to continue to call it the "Namespace" pattern as that is its proper name in Javascript. Appcelerator is also currently pushing the CommonJS pattern which is fine, however I find the namespace pattern simpler to understand and if you can implement this properly in your apps you'll go a long way to acheiving better performance, stability and memory management.

There are three main reasons for using this kind of pattern;

1. It stops you polluting the global scope. It does this by creating one (ideally) global object that all the functionality for your app is added to, 
2. It helps you avoid naming collisions or excessive variable prefixing (ie creating stacks of vars that look like item1, item1_1, __item1, etc),
3. Memory management - by putting everything into the same global object namespace, you avoid multiple Ti.include() statements, which are essentially including files over and over again unnecessarily. This is particularly prevelant when you start opening multiple window objects and have all your Ti.include() calls at the top; this rapidly leads to memory starvation and your app crashing.

Let's create a basic example application that reads in a couple of RSS feeds and shows them on two separate views, which have 2 separate JS files, and use the same context.

Create a new project in Ti Studio, call it whatever you want (I've called mine NamespaceMethod). Delete the pre-set code out of the app.js file, and then create two new files called feed1.js and feed2.js respectively, and add these to your Resources folder.

Now let's create the TableView for feed1.js...

...and feed2.js and save both of those files:

Run your app in the simulator now and you'll (hopefully) see a screen that looks like this:

Now let's fill those two TableViews with some data from 2 separate remote RSS feeds. We're going to define the feed URL's in app.js, then create a new javascript module file called api.js which is going to handle calling and returning our JSON data. Note here that you will probably want to structure your app a bit differently to this, but this example is more about showing you how to keep everything in that single namespace context.

Edit your app.js file by adding the following couple of lines to it, right after the RSSAPP declaration at the top. Note that I've used YQL to automatically do the XML Feed -> JSON conversion for us.

Now create the api.js file and save it to your Resources directory. Type or paste in the following code. This simple module just accepts a URL and creates a HTTPRequest and passes back the JSON-formatted response data via the 'success' function, or throws any errors back via the 'error' function.

Now we can call our "grabFeed" method from within the api.js file from anywhere in our app that utilizes the RSSAPP namespace. Let's populate the table1 object first - open up feed1.js and enter in the following code, just before the final line where you are adding the table1 object to the window. It should look like this:

Run your app in the simulator again and you should see that the first tableView (top of screen) is populated with RSS data from http://boydlee.com/feed.html.

As we're on mobile devices and we want to avoid using too much bandwidth (not to mention HTTPRequest collisions) we're going to populate the second table only when the first table has finished its data request/population. Add the following function call to feed1.js directly after the line "RSSAPP.table1.setData(rows);"

And now let's update feed2.js so it looks like the following:

Finally, run the app in your simulator. You should see table1 populated by data from http://boydlee.com/feed.html, via YQL, and when it has finished you'll see the data from the Appcelerator Developer Blog feed populate table2.

So what have we learnt from this sample? Firstly, you can see we no longer need to import the same file a hundred times - both the feed1.js and feed2.js files can access the webservice functions from api.js without multiple inclusions. This means less redundant code and less memory usage.

You also now have a convenient global structure - properties and objects added to the RSSAPP namespace can be accessed from within any part of your app at any time.

App-wide data can be instantiated once, and used over and over again. You can see this happening from the properties we created to hold the feed URL's - these were defined in the namespace from within app.js, and then accessed and passed around throughout our files.

Functions can now be defined as belonging to our namespace, meaning they can be executed from anywhere. You can see this happening when we call the loadFeed2Data function - it is declared within feed2.js but we're calling it directly from feed1.js, essentially removing the need for firing off multiple events or doing unnecessary Ti.include()'s.

Because all your windows and views exist in the same namespace they can be immediately instantiated - giving you faster app performance.

You can download the sample project here, and please comment if there's any mistakes in it (I wrote this fairly quickly!).

Or if you prefer use one of our linkware images? Click here