Cross-platform mobile apps – possible or not?

What is Titanium and how it works. Titanium is an open-source solution for cross-platform, almost-native mobile app development. It has its own MVC, JavaScript and XML-based framework Alloy. Titanium is based on assumption, that each app can be divided into two parts: UI, which is platform-specific part and application core – business logic, common to all […]What is Titanium and how it works. Titanium is an open-source solution for cross-platform, almost-native mobile app development. It has its own MVC, JavaScript and XML-based framework Alloy. Titanium is based on assumption, that each app can be divided into two parts: UI, which is platform-specific part and application core – business logic, common to all […]

blog-product-titanium1

What is Titanium and how it works.

Titanium is an open-source solution for cross-platform, almost-native mobile app development. It has its own MVC, JavaScript and XML-based framework Alloy. Titanium is based on assumption, that each app can be divided into two parts: UI, which is platform-specific part and application core – business logic, common to all platforms. So, inside the app, we have native UI components and JavaScript interpreted logic, communicating with each other.

If you want to write your app in titanium, you only need to know JavaScript and learn to call Titanium API for UI components. Alloy, on the other hand, is more fun, because you have to write views in XML, model and controllers in JavaScript (+ Titanium API mentioned before) and styles in something called Titanium StyleSheets, which is CSS+JSON hybrid. I must admit, the language is not an obstacle for anybody who ever did web development, or any kind of script and markup languages. It’s easy to start working with this framework.

Beginnings.

To work with Titanium, you will need Titanium Studio – an Eclipse-based IDE adapted to write and deploy Titanium apps into various platforms and stores – AppStore, Google Play etc. It has a direct access to Appcelerator Titanium Marketplace, where you can download e.g. sample applications, widgets and plugins – paid for or free of charge.

After downloading Titanium Studio and necessary SDK’s I downloaded sample code called Kitchen Sink – an example, showing possibilities of Titanium Alloy framework. I chose a device and… it worked! After (very few ;-) years of programming I get used to difficult beginnings, long configurations before the first launch (whether regarding a web app, mobile app or any kind of desktop/command line app), but Appcelerator did a great job preparing IDE and integrating it with simulators, emulators etc. After the first success I played with Alloy for a few days and here comes my conclusions.

What is great about Titanium.

1. Simplicity. Apps can be build from small files and can be developed very fast. Everybody knows basics of XML and JavaScript, so you can start writing your apps straight away.

2. Architecture. Alloy framework is very well designed. It allows installing plugins, widgets, or even native modules in a convenient way. “Convention over configuration” makes this process faster – all you need to do is put the downloaded widget into the “widget” directory and add a dependency into config.json file.

3. GitTio is a search engine that indexes all Titanium modules and Alloy widgets. It is something similar to Cocoa Controls for iOS, but more comprehensive, because it automatically finds new modules in GitHub and indexes them. GitTio provides Command Line Interface, which facilitates installing and managing widgets.

What is not-so-great about Titanium.

1. There is not such thing as “one app to rule them all”. Mobile platforms have different controls, components and UI elements. The same things are implemented by different solutions. The more complex the app gets, the more platform dedicated code needs to be written. After all, I end up writing views and controllers for each platform separately.

2. Even if you can write one view for each platform, you probably shouldn’t do it. There is one thing I have not mentioned yet – User Experience. It is extremely different for each mobile OS. Android users are used to “back” and “menu” buttons, iOS users are using navigation bar, some OS’s are using swipe moves to navigate between window. Therefore, a universal app for all platforms is doubtful idea to start with.

3. Cross-platform idea stops working when you want to use external module. There are “iOS-only” modules or “iOS and Android” modules. Very rarely, they may also include mobileweb.

What is totally not-great about Titanium.

1. Titanium is still young. It develops really fast. A lot of things have bugs, while at the same time, a lot of features get deprecated. When you find a tutorial from 2011, you may never be sure whether it’s up to date. Differences between close versions (like 3.1.3 and 3.2) sometimes force re-writing the whole view or using another widget.

2. Titanium and Titanium Alloy are two different worlds. Having got used to the beautiful Alloy MVC code I tried downloading a widget written in “plain Titanium”. This was a lot of code with a completely different approach and not so easy to integrate with Alloy. Then I found out, that I don’t have “631 Titanium modules” (gitt.io), but “178 Alloy Widgets”, so I had to found widget with similar functionality, written in Alloy. Another “little” bump on the road.

So what?

With some experience with Titanium and some experience with PhoneGap, I don’t think it is possible to write a good cross-platform app. It is hard even when you try to do this for iOS and Android only, but we have also Bada, Tizen, Firefox OS and new OS’s are developed as we speak – Ubuntu Touch, Sailfish OS and some more. Also, it is always good to have mobile web version of the app. But, even if a cross-platform app would be possible to write…

You shouldn’t do this. When you write a native app, you can learn user habits and good practises for each platform. When you write one app for every platform, you probably break about a million good-UX rules. But, if you are desperate and want to do this anyway…

It won’t save you a lot of time. When you write cross-platform apps, you have to deal with OS-specific quirks, you sometimes get native-code errors (good luck with Objective-C errors without any iOS knowledge) and it is not too difficult to miss some crucial things (while testing on 9 devices at the time).

Of course, in some cases, cross-platform apps can be a good solution. Nevertheless, in my opinion, it is not the universal solution for mobile app development.

You May Also Like

Using WsLite in practice

TL;DR

There is a example working GitHub project which covers unit testing and request/response logging when using WsLite.

Why Groovy WsLite ?

I’m a huge fan of Groovy WsLite project for calling SOAP web services. Yes, in a real world you have to deal with those - big companies have huge amount of “legacy” code and are crazy about homogeneous architecture - only SOAP, Java, Oracle, AIX…

But I also never been comfortable with XFire/CXF approach of web service client code generation. I wrote a bit about other posibilites in this post. With JAXB you can also experience some freaky classloading errors - as Tomek described on his blog. In a large commercial project the “the less code the better” principle is significant. And the code generated from XSD could look kinda ugly - especially more complicated structures like sequences, choices, anys etc.

Using WsLite with native Groovy concepts like XmlSlurper could be a great choice. But since it’s a dynamic approach you have to be really careful - write good unit tests and log requests. Below are my few hints for using WsLite in practice.

Unit testing

Suppose you have some invocation of WsLite SOAPClient (original WsLite example):

def getMothersDay(long _year) {
    def response = client.send(SOAPAction: action) {
       body {
           GetMothersDay('xmlns':'http://www.27seconds.com/Holidays/US/Dates/') {
              year(_year)
           }
       }
    }
    response.GetMothersDayResponse.GetMothersDayResult.text()
}

How can the unit test like? My suggestion is to mock SOAPClient and write a simple helper to test that builded XML is correct. Example using great SpockFramework:

void setup() {
   client = Mock(SOAPClient)
   service.client = client
}

def "should pass year to GetMothersDay and return date"() {
  given:
      def year = 2013
  when:
      def date = service.getMothersDay(year)
  then:
      1 * client.send(_, _) >> { Map params, Closure requestBuilder ->
            Document doc = buildAndParseXml(requestBuilder)
            assertXpathEvaluatesTo("$year", '//ns:GetMothersDay/ns:year', doc)
            return mockResponse(Responses.mothersDay)
      }
      date == "2013-05-12T00:00:00"
}

This uses a real cool feature of Spock - even when you mock the invocation with “any mark” (_), you are able to get actual arguments. So we can build XML that would be passed to SOAPClient's send method and check that specific XPaths are correct:

void setup() {
    engine = XMLUnit.newXpathEngine()
    engine.setNamespaceContext(new SimpleNamespaceContext(namespaces()))
}

protected Document buildAndParseXml(Closure xmlBuilder) {
    def writer = new StringWriter()
    def builder = new MarkupBuilder(writer)
    builder.xml(xmlBuilder)
    return XMLUnit.buildControlDocument(writer.toString())
}

protected void assertXpathEvaluatesTo(String expectedValue,
                                      String xpathExpression, Document doc) throws XpathException {
    Assert.assertEquals(expectedValue,
            engine.evaluate(xpathExpression, doc))
}

protected Map namespaces() {
    return [ns: 'http://www.27seconds.com/Holidays/US/Dates/']
}

The XMLUnit library is used just for XpathEngine, but it is much more powerful for comparing XML documents. The NamespaceContext is needed to use correct prefixes (e.g. ns:GetMothersDay) in your Xpath expressions.

Finally - the mock returns SOAPResponse instance filled with envelope parsed from some constant XML:

protected SOAPResponse mockResponse(String resp) {
    def envelope = new XmlSlurper().parseText(resp)
    new SOAPResponse(envelope: envelope)
}

Request and response logging

The WsLite itself doesn’t use any logging framework. We usually handle it by adding own sendWithLogging method:

private SOAPResponse sendWithLogging(String action, Closure cl) {
    SOAPResponse response = client.send(SOAPAction: action, cl)
    log(response?.httpRequest, response?.httpResponse)
    return response
}

private void log(HTTPRequest request, HTTPResponse response) {
    log.debug("HTTPRequest $request with content:\n${request?.contentAsString}")
    log.debug("HTTPResponse $response with content:\n${response?.contentAsString}")
}

This logs the actual request and response send through SOAPClient. But it logs only when invocation is successful and errors are much more interesting… So here goes withExceptionHandler method:

private SOAPResponse withExceptionHandler(Closure cl) {
    try {
        cl.call()
    } catch (SOAPFaultException soapEx) {
        log(soapEx.httpRequest, soapEx.httpResponse)
        def message = soapEx.hasFault() ? soapEx.fault.text() : soapEx.message
        throw new InfrastructureException(message)
    } catch (HTTPClientException httpEx) {
        log(httpEx.request, httpEx.response)
        throw new InfrastructureException(httpEx.message)
    }
}
def send(String action, Closure cl) {
    withExceptionHandler {
        sendWithLogging(action, cl)
    }
}

XmlSlurper gotchas

Working with XML document with XmlSlurper is generally great fun, but is some cases could introduce some problems. A trivial example is parsing an id with a number to Long value:

def id = Long.valueOf(edit.'@id' as String)

The Attribute class (which edit.'@id' evaluates to) can be converted to String using as operator, but converting to Long requires using valueOf.

The second example is a bit more complicated. Consider following XML fragment:

<edit id="3">
   <params>
      <param value="label1" name="label"/>
      <param value="2" name="param2"/>
   </params>
   <value>123</value>
</edit>
<edit id="6">
   <params>
      <param value="label2" name="label"/>
      <param value="2" name="param2"/>
   </params>
   <value>456</value>
</edit>

We want to find id of edit whose label is label1. The simplest solution seems to be:

def param = doc.edit.params.param.find { it['@value'] == 'label1' }
def edit = params.parent().parent()

But it doesn’t work! The parent method returns multiple edits, not only the one that is parent of given param

Here’s the correct solution:

doc.edit.find { edit ->
    edit.params.param.find { it['@value'] == 'label1' }
}

Example

The example working project covering those hints could be found on GitHub.

Mentoring in Software Craftsmanship

Maria Diaconu and  Alexandru Bolboaca are both strong supporters of Software Craftsmanship and Agile movements in Romania, with years of experience as developers, leaders, architects, managers and instructors. On their lecture at Agile Central Eur...Maria Diaconu and  Alexandru Bolboaca are both strong supporters of Software Craftsmanship and Agile movements in Romania, with years of experience as developers, leaders, architects, managers and instructors. On their lecture at Agile Central Eur...