However, if we are to be practical, what interests us developers in our work is —or at least what should interest us— is to get an optimum level of efficiency: maximum impact at the lowest cost and with the best quality. Cheap and cheerful, yeah! And, of course, with such a wide and varied range of development technologies around, one doesn’t know where to head to; if one decides to boldly go forth and plunge into all of them at the same time, one of two is happening, either one has ‘plenty of money to spend’, or is exceptionally intelligent and with a lot of time to spare (that is, with no family, no friends, no hobbies necessary for a good mental health …) in all likelihood his or her personal or professional project will end up in failure, or, what is worse, it’s doomed to indifference and failure on the Internet. Of course it could end up well in some cases, but it won’t be definitely easy (as it was not 3 years ago).

And it is here indeed where one stops to reflect on what has been learnt and think: How can I get my praiseworthy and humble objective without die trying?, that is, how can I develop the next cross-platform Killer App that will retire me from work and earn me fame, endless wealth and a complete catalogue of related merchandising? Well, I am sorry, I don’t have the answer, perhaps in another blog near here … Meanwhile I suggest you take advantage of your technological inertia, gained in the last few years. Doing what? Well, simply benefiting from your —or others’— skills and knowledge on web development and all the things that you know, that you master and, most of all, that you like (HTML, Javascript, CSS, XML, JSON…) so this finally becomes your best tool for the development of applications, only this time not just for the Web.

Yes, this is possible with relatively little effort and great accomplishment in a few days (even hours!!) though this, like everything, has a trick. You will again encounter many options and you will spend little time sleeping and plenty of time searching, reading, learning, testing, installing… until finally you can see some light at the end of the tunnel. And that is the reason we are here, we are here to help you identify the Web technology that best suits your knowledge and your needs and, if possible, we can help you pave the way for and materialize that idea you’ve had in mind for months and that, due to a lack of time, you’ve been unable to fulfill.

In this blog we’ll be talking about 100% Web browser-based applications, quite similar to the ones that the very same Apple was trying to convince us some time ago that were the future for the development of mobile devices —and which the worldwide developer community set out to demonstrate that was not exactly like that, thus pressing Apple itself to publish its SDK. Here you will find all guides and libraries from Apple, and libraries as complete and powerful such as jQuery Mobile and Sencha Touch. I must say, to be honest, that in the end not only did Apple realize its mistake and ended up freeing its SDK (we could spend hours talking about how good and timely this decision was) but it also eventually gave green light to the development of iOS applications without making us toe the line of XCode, Cocoa and Objective-C; maybe this was more out of fear of competition than understanding that the most important thing is the creativity of the developers and not the tools they build their applications with. We’ll also talk about native cross-platform applications, about their features, advantages and drawbacks, such as those generated by Adobe Flex Builder or some of the latest trends in mobile development with Web technologies —mainly Javascript— which mean no less than a true revolution due to their simplicity and power (even though they are still relatively immature software pieces). We are referring to PhoneGap and Appcelerator Titanium.

As stated, we shall start by reviewing each one of the three proposed areas as options to develop mobile applications by means of technologies ‘traditionally’ aimed at and used for the Web.

100% Web Development

This is the easiest option, the most natural one if you come from the Web world. This consists, no more and no less, of developing web applications in HTML —and even better if you dare with HTML5—, CSS and Javascript, adapted to be run from the Web browser of a mobile device, either a mobile telephone or a tablet. Logically, you may use any server-side technology such as PHP, Java, Ruby, ASP, etc.

The main advantage of this kind of applications lies in the possibility of reusing a great deal of your Front code and, if you have developed it correctly enough, almost your entire Back code. For the latter, it is very important how you plan the architecture of your application, by conveniently separating the data access layer from the presentation layer and the application logic (in a pattern Model-View-Controller or MVC; you guessed it!). Besides, distributing your application is as simple as communicating its URL to the rest of the world, which though not trivial it’s always simpler than forcing people to download several megabytes into their mobile phones). This is also quite advantageous, logically, for the various updates you will surely perform on your application; only you will decide when each and everyone of your users may avail of the latest update. Furthermore, with a relatively low effort, your application shall be compatible with plenty of mobile platforms.

As a disadvantage we may note mainly the need for an Internet connection whenever we want to use the application; though this is not entirely true. Today, with the functionality provided by HTML5 local storage (I recommend reading http://diveintohtml5.org/storage.html for more information on that) it is possible to store a massive amount of data in the devices; although, eventually, storage is not everything. Another disadvantage, the major one in my opinion, is that you won’t have any access to the SDK that controls most of the hardware of the device. It is in fact possible to access the accelerometers or even the geo-positioning, but not the wide range of sensors and gadgets that are nowadays being incorporated in a more or less standardized way, starting with cameras. Besides, you won’t have all the native visual components to create the user interface of your application, therefore you’ll need to resort to third parties’ libraries to get, not without effort, some professional usability and design.

Regarding this last point of the user graphical interfaces, bear in mind that their design and planning will take up most of your time, originally allotted to the development of the application, and without a doubt for the vast majority of users it is the GUI that encourages them to keep on using the application, or spread the word and recommend it to other users, or immediately reject it. It’s as simple as that. Therefore, it is important for you to choose a way to get quality results in Front, timely and in an appropriate manner. I recommend two alternatives —amongst the tens of them you may find— which are for me the most important, mature and apt for a professional use as of today: jQueryMobile and Sencha Touch.

jQueryMobile is the mobile version of possibly the best and most extended javascript framework that exists, jQuery (now comes the hard part, when the supporters of Prototype, Dojo and the remainder of frameworks all come against me … ). jQueryMobile will provide you with a great number of ready-to-use visual components, such as bookmarks, dialog boxes, tool bars, buttons, layers, forms with all kinds of input elements, lists, grids… as well as a wealth of functionalities to manage events, exploit the HTML5 capabilities of your device, plus effects and animations, the possibility to make AJAX calls to services and remote resources in XML and JSON as well as many other things. And, would you like to know what’s best? your application will be compatible with iOS, Android, Blackberry, Bada, Windows Phone, Palm Web OS, Symbian and Meego. Furthermore, mostly if you have used jQuery before, its learning process is quite simple and its documentation and examples are fabulous. As a black mark —just being critical here—, I’m not particularly happy with the final appearance of applications, which loose part of their interactivity and typical “agility” of native applications and other third parties’ libraries, with visual endings not as refined or sharp, with delays and rather basic transitions, which don’t provide a professional look & feel.
Nevertheless, the team of developers and the community behind them are moving forward at staggering speed, and I am convinced that in the next versions we’ll see new, great advances in this regard.

Sencha Touch, from the creators of the well-known library javascript Ext JS, is becoming one of the options with most possibilities for the development of mobile applications with Web technologies. It includes the most complete catalogue of components (both graphics and utilities, for communications, control of gestures …) and fairly versatile, with an appealing visual display, quite close to the appearance of the native components in iOS and with astonishing speed. It also includes, just gotten out of the box, a new subset of classes for the creation and management of complex graphics, which will undoubtedly improve your business applications and make them look much better with little effort. The learning curve is slightly steep at first, but as soon as you complete a number of examples and understand the basics of the operation you can start developing at more than acceptable speed. The documentation is excellent and the examples are varied and quite didactical, even with complete sample applications. As a rather negative aspect, and taking into account that it is no terrible thing, your applications shall ‘only’ work on iOS, Blackberry and Android devices. Besides, for non-commercial projects it is free of charge, but if you want to sell our applications you will have to license the library.

Although we will analyze it as a third option, I already advance you that one of the best options to reuse your code and past experience in Web development is to encapsulate these 100% Web applications into native applications that load them in a browser-based component view, for example, in iOS, in a WebView. And the only thing left for us to do now is to search for the way to access the device hardware from javascript… but we’ll come to this point later.

Development with Flash/Flex technology

Whereas in Android devices the presence of Flash is something natural, the fierce fight maintained by Adobe and Apple does not escape anyone’s attention; from the very beginning of the launch of the early iPhones they have argued whether or not to include this technology in Apple’s devices and they don’t seem to be going to solve the issue in short, and I wish I were wrong. Nevertheless, the situation has improved a lot, and Apple, as it is also the case with other development technologies, already allows to compile applications built with Adobe Flex Builder for iOS although these are no native applications, therefore the first thing we see is a rather poor performance (very poor in fact), the lack of certain native functionality, e.g. buying from within the application, and we don’t have the possibility to use the visual components typical from each type of device: buttons, tableviews, toolbars, etc. The latter might seem an advantage for some of you and quite a disadvantage for some others. On further reflection, if we develop our Flash/Flex application in such a way that the user interface respects the principles of usability for mobile devices (scrolling, button size, types of lists, etc…) upon developing our desktop application we will be just one step away from having the same application working in a tablet. For a mobile telephone you will have to be prepared to turn the screw a bit further and create a better adapted interface, an issue that arises more than anything from the size of the screen. However, it is not a question of magic, although it can certainly appear that way, and you will have to make changes for sure, but one thing is clear, you will minimize the development time.

In terms of functionality, apart from the fact that it is unable to create any native visual components, the current version of Adobe Flex Builder is surprisingly complete as to what your code can do in a desktop application and, that very same application, running on a mobile device, i.e. the portability, is almost perfect. The main problem, as already stated some lines above, is the poor performance of the executables generated in iOS —despite the great progress made in their latest beta version—, up to the point that either you develop your whole application directly with AS3, or trying to use high-level components will result in your users being forced to use at least an iPad 2 and even in that case the speed will be rather slow.

But in order to remain objective and be consistent with the title of this article, this is the best possible way for those Web developers who have spent these last years working with Flash, to be able to position themselves in the promising world of mobile applications with little effort, by fully exploiting the inertia of their professional background experience, by simply improving their skills and adapting their design and developments to a more global vision of the architecture, which should allow to be reused.

Another point in favour of this technology is that you will avail of such a powerful and mature development environment as Flex Builder, which has also improved a lot in its latest version —mostly in all related to the packaging and distribution of the applications generated, hence you won’t have any heartache publishing your developments.

Development of applications with a native look in Javascript

First of all my apologies for the intricate title of this paragraph, but it’s the best way that I found to describe what I want to explain in a few words. I’m telling you this because you’ll find many people on the Internet who call these “native applications”, but this is not like that in reality, these are no native applications. Perhaps because they are 100% Web applications encapsulated into WebView components as in iOS or because they use some kind of bridge or interpreter to allow your javascript code to control native components, the harsh reality is that the final result is that of applications with a similar look & feel, functionality and performance to those of native applications, but with limitations (depending on the specific product we are talking about).

PhoneGap was the first software I ever used that would let me access the main functionality of the device, —both software and hardware: contacts, calendars, camera, accelerometers, GPS, voice, compass, local databases, etc.— from my HTML5/CSS/Javascript code; It is really easy to use, in a couple of hours one can do great things and the documentation and examples are very practical and complete. It means an important progress and an efficient complement to add more power and functionality to your Web applications, but don’t be deceived, in the end you still will have a Web application encapsulated in a native application, which is far from having all the features of a real native application —for example one developed with Cocoa for iOS or in Java for Android. Most of all, you should bear in mind that the graphical interface will have to be made from scratch by you with HTML5 and CSS, or by making use of libraries such as jQueryMobile or Sencha Touch, which will never get to be native components. In my own case, working with PhoneGap finally became an impossible thing, so I opted for a return to XCode and Cocoa (an option that I won’t leave, willy nilly) or go in search for another nice alternative… which I think I finally found: Titanium Appcelerator.

Titanium Appcelerator is my last ‘great’ discovery when trying to recoup the knowledge and experience of many years in the development of Web applications applied to mobile development. And it really annoys me that this has been like that, because if I had known it before, I wouldn’t have wasted so much time in other technologies, although it is also true that such learning is always welcome, but to be honest, and being practical, I would have preferred to have been told about the existence of something like this, and something that works so well.

Having said that, I would like to tell you about the main advantages of Titanium: its Open Source version gives us more functionality than we could actually need for most of the applications we could probably have in mind. Nevertheless, upon payment of a special development fee, of course, we can have some additional modules which will allow us to make purchases from within the application, as well as PayPal transactions, Open GL, graphics, Push notifications, and many more options. Furthermore, the developer community they are building around the product is quite large and it’s well backed by the company, therefore new Open Source modules are appearing all the time, which will allow you, for example, to use the Box2D physics engine in your application. The API documentation is very complete, with tutorials and new content being constantly added, with articles where they delve into certain aspects of the tool, and a battery of examples that is really astonishing and which you’ll surely want to slice and dice until the end, since, as it is the case, sometimes a visual speaks louder than a billion words.

In Titanium, the number of platforms upon which you may deploy applications is still quite limited, only iOS and Android are accepted, plus a beta version for Blackberry, but that will certainly be enough for most people. Best of all is, in my opinion, that the most complicate parts to use in Cocoa, such as memory management, amongst others, disappear in favour of a more natural programming style for all of us Web developers, which will help us focus on the objective of our application. By the way, as a major disadvantage, apart from the native functionality that cannot be reached and the slow performance seen in some cases, what I miss the most here is an adequate tool to create the interfaces in a visual way, like Interface Builder, instead of having to lay out everything by using code (sometimes even with no reference, just working it by eye) which is always more laborious and lets you test less possibilities and less easily; in the end one feels forced to prepare some very good and almost definitive mockups at the beginning of the development process, so as to go directly to the end then.

SingularTouch is a project that aims to respond to the specific needs of developers who have decided to apply their web-programming knowledge and skills, acquired after years and years, to the development of applications for the vast and growing market of hand-held devices, mainly smartphones and tablets. A growing market, yet to exploit, which will bring big surprises and still bigger oportunities of all kinds and, what is best, for everyone.

This is a project in which the user community we are building around will play an important role. That is why your collaboration is so relevant. We believe we can mutually benefit from each other. Would you like to write in our Blog? Do you want us to promote your next app or game? Do you need any components, modules and/or templates to perform your job in a more efficient, professional way? We can help you for sure!!

Our main objective is to help you get the best results, in addition to keeping you informed and trained in all aspects related to mobile development with web technologies, such as Appcelerator Titanium, PhoneGap, jQueryMobile, Sencha Touch, etc.

We will publish many components, some of them free, i.e. open-source components, others not. We will publish application templates, modules, tutorials, tips and notes in several languages… (mainly English and Spanish) And always with a very practical approach, so that you can use it all in your projects as soon as possible and in the most advantageous way, the way that suits you best!

Keep abreast of updates and developments, don’t forget to register to our Feeds and share this site with all your friends.

And if you feel like working with us, please contact us!