DDevelopment & Design

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.

— Previous article

Sonar Gerrit Plugin Release

Next article —

Micro services on the JVM part 1 - Clojure

You May Also Like
DDevelopment & Design

Clojure web development – state of the art

It’s now more than a year that I’m getting familiar with Clojure and the more I dive into it, the more it becomes the language. Once you defeat the “parentheses fear”, everything else just makes the difference: tooling, community, good engineering practices. So it’s now time for me to convince others. In this post I’ll try to walktrough a simple web application from scratch to show key tools and libraries used to develop with Clojure in late 2015.

Note for Clojurians: This material is rather elementary and may be useful for you if you already know Clojure a bit but never did anything bigger than hello world application.

Note for Java developers: This material shows how to replace Spring, Angular, grunt, live-reload with a bunch of Clojure tools and libraries and a bit of code.

The repo with final code and individual steps is here.

Bootstrap

I think all agreed that component is the industry standard for managing lifecycle of Clojure applications. If you are a Java developer you may think of it as a Spring (DI) replacement - you declare dependencies between “components” which are resolved on “system” startup. So you just say “my component needs a repository/database pool” and component library “injects” it for you.

To keep things simple I like to start with duct web app template. It’s a nice starter component application following the 12-factor philosophy. So let’s start with it:

lein new duct clojure-web-app +example

The +example parameter tells duct to create an example endpoint with HTTP routes - this would be helpful. To finish bootstraping run lein setup inside clojure-web-app directory.

Ok, let’s dive into the code. Component and injection related code should be in system.clj file:

(defn new-system [config]
  (let [config (meta-merge base-config config)]
    (-> (component/system-map
         :app  (handler-component (:app config))
         :http (jetty-server (:http config))
         :example (endpoint-component example-endpoint))
        (component/system-using
         {:http [:app]
          :app  [:example]
          :example []}))))

In the first section you instantiate components without dependencies, which are resolved in the second section. So in this example, “http” component (server) requires “app” (application abstraction), which in turn is injected with “example” (actual routes). If your component needs others, you just can get then by names (precisely: by Clojure keywords).

To start the system you must fire a REPL - interactive environment running within context of your application:

lein repl

After seeing prompt type (go). Application should start, you can visit http://localhost:3000 to see some example page.

A huge benefit of using component approach is that you get fully reloadable application. When you change literally anything - configuration, endpoints, implementation, you can just type (reset) in REPL and your application is up-to-date with the code. It’s a feature of the language, no JRebel, Spring-reloaded needed.

Adding REST endpoint

Ok, in the next step let’s add some basic REST endpoint returning JSON. We need to add 2 dependencies in project.clj file:

:dependencies
 ...
  [ring/ring-json "0.3.1"]
  [cheshire "5.1.1"]

Ring-json adds support for JSON for your routes (in ring it’s called middleware) and cheshire is Clojure JSON parser (like Jackson in Java). Modifying project dependencies if one of the few tasks that require restarting the REPL, so hit CTRL-C and type lein repl again.

To configure JSON middleware we have to add wrap-json-body and wrap-json-response just before wrap-defaults in system.clj:

(:require 
 ...
 [ring.middleware.json :refer [wrap-json-body wrap-json-response]])

(def base-config
   {:app {:middleware [[wrap-not-found :not-found]
                      [wrap-json-body {:keywords? true}]
                      [wrap-json-response]
                      [wrap-defaults :defaults]]

And finally, in endpoint/example.clj we must add some route with JSON response:

(:require 
 ...
 [ring.util.response :refer [response]]))

(defn example-endpoint [config]
  (routes
    (GET "/hello" [] (response {:hello "world"}))
    ...

Reload app with (reset) in REPL and test new route with curl:

curl -v http://localhost:3000/hello

< HTTP/1.1 200 OK
< Date: Tue, 15 Sep 2015 21:17:37 GMT
< Content-Type: application/json; charset=utf-8
< Set-Cookie: ring-session=37c337fb-6bbc-4e65-a060-1997718d03e0;Path=/;HttpOnly
< X-XSS-Protection: 1; mode=block
< X-Frame-Options: SAMEORIGIN
< X-Content-Type-Options: nosniff
< Content-Length: 151
* Server Jetty(9.2.10.v20150310) is not blacklisted
< Server: Jetty(9.2.10.v20150310)
<
* Connection #0 to host localhost left intact
{"hello": "world"}

It works! In case of any problems you can find working version in this commit.

Adding frontend with figwheel

Coding backend in Clojure is great, but what about the frontend? As you may already know, Clojure could be compiled not only to JVM bytecode, but also to Javascript. This may sound familiar if you used e.g. Coffescript. But ClojureScript philosophy is not only to provide some syntax sugar, but improve your development cycle with great tooling and fully interactive development. Let’s see how to achieve it.

The best way to introduce ClojureScript to a project is figweel. First let’s add fighweel plugin and configuration to project.clj:

:plugins
   ...
   [lein-figwheel "0.3.9"]

And cljsbuild configuration:

:cljsbuild
    {:builds [{:id "dev"
               :source-paths ["src-cljs"]
               :figwheel true
               :compiler {:main       "clojure-web-app.core"
                          :asset-path "js/out"
                          :output-to  "resources/public/js/clojure-web-app.js"
                          :output-dir "resources/public/js/out"}}]}

In short this tells ClojureScript compiler to take sources from src-cljs with figweel support and but resulting JavaScript into resources/public/js/clojure-web-app.js file. So we need to include this file in a simple HTML page:

<!DOCTYPE html>
<head>
</head>
<body>
  <div id="main">
  </div>
  <script src="js/clojure-web-app.js" type="text/javascript"></script>
</body>
</html>

To serve this static file we need to change some defaults and add corresponding route. In system.clj change api-defaults to site-defaults both in require section and base-config function. In example.clj add following route:

(GET "/" [] (io/resource "public/index.html")

Again (reset) in REPL window should reload everything.

But where is our ClojureScript source file? Let’s create file core.cljs in src-cljs/clojure-web-app directory:

(ns ^:figwheel-always clojure-web-app.core)

(enable-console-print!)

(println "hello from clojurescript")

Open another terminal and run lein fighweel. It should compile ClojureScript and print ‘Prompt will show when figwheel connects to your application’. Open http://localhost:3000. Fighweel window should prompt:

To quit, type: :cljs/quit
cljs.user=>

Type (js/alert "hello"). Boom! If everything worked you should see and alert in your browser. Open developers console in your browser. You should see hello from clojurescript printed on the console. Change it in core.cljs to (println "fighweel rocks") and save the file. Without reloading the page your should see updated message. Figweel rocks! Again, in case of any problems, refer to this commit.

In the next post I’ll show how to fetch data from MongoDB, serve it with REST to the broser and write ReactJs/Om components to render it. Stay tuned!