jQuery Mobile Twitter Search
See the working Twitter App
Twitter is one of my favorite tools. I used it to let the world know that I've written a new blog post and to keep up with all things going on in the world wide web. So following the great tradition established by a long list of other authors, I too have created a twitter app. Specifically, it uses Twitter's Search API. Simply type in a term, then tap go. The application will then make a call to Twitter and return the last 25 tweets which match your query.
This tutorial is a little rough around the edges. Unfortunately, I am preparing for SoCal Code Camp San Diego 2012, which takes place the weekend of June 23-24, so I don't have as much time as I liked to prepare this tutorial. But I prefer to let my code do the talking anyways.
The meat of the code is in the RocknCoder.Tweet object of the twitter.js module. All of the work is in the load method. People are sometimes surprised when they see jQuery method calls inside of jQuery Mobile and I find myself reminding them that jQuery Mobile is built on top of jQuery, so of course I can make such calls.
One thing that the jQuery project was working on but has since stop is templates. Templates allow you to build HTML markup in a clean fashion using a snippet of HTML, the template, and some data. Since jQuery doesn't currently have a template engine, I am using another trusted tool, Underscore.js. Underscore.js is an incredibly useful toolbox, with large collection of methods, the templating engine is but one. If you are familiar with the ASP.NET MVC aspx engine, you will find the syntax similar but not identical. The templating engine is a critical piece of making your mobile web code small, but it is too complex to cover right now. Please take a look at the code and be sure to check out the template documentation at Underscore.js.
One small thing that needs a bit of explanation is the use of the setTimeout() at the end of the load method. The question is always raised as to why I didn't use a setInterval() call instead since it seems to be exactly what I want here. The answer for me is simple. I never use setInterval(). SetInterval() can be problematic, especially when combined with Ajax calls since the timing of such calls can never be known in advanced.
A more full featured app would have availed itself of the search API's methods which would allow us to ask only for the data added since our last call then the it would inject the new HTML in front of the old. But I just took the lazy way and simply do another full call and wipe all of the HTML of the previous call out. Someday after Code Camp I will revisit this and improve its behavior.
This is it for now. I will have at least one more planned tutorial before Code Camp, convert the calculator app to PhoneGap for iOS and I will probably throw Windows Phone 7 in as well since I really enjoy that platform. After Code Camp I will have tutorials which delve deeper into the PhoneGap API especially dealing with location and the camera.
