Mobile devices development using HTML5/JS – part 3 – Sencha Touch

It took me some time from part 2 to part 3 and that is because part 3 was Sencha Touch (https://www.sencha.com/products/touch/). This baby is far from JQuery Mobile… completely opposite side of the mobile frameworks spectrum. JQM was a markup-driven framework and you deal with a lot of HTML5, in Sencha Touch index.html had only one function and that is to load JavaScript file containing you app. So, it’s fully JavaScript and almost no HTML (unless you use it in some templates inside JavaScript code).

I was playing with Ext JS for desktops some years ago and was surprised that Sencha is actually a new name for it and Sencha Touch is mobile variant. That helped me a lot as everything was familiar. Even more familiar than JQM will be to JQuery users. Sencha Touch has amazing documentation and community. Every object, method, property, event… neatly described in a doc (done in Sencha) when you install framework. I kept it open all the time while programming.

Doing the same app as in JQM I got first impressions and first one was: FAST. There is no dubt Sencha produces faster apps. Sencha app on my Desire, without any fine tuning (preloading, optimiozation) almost could pass as native app. Remember, JQM had no chance here. Second impression was: Cool objects. I really like Sencha panels which easily transform to carousel, cards or other layouts with all transitions and details available by default with few lines of code. Third impression was: this is HUGE. Every little thing has 20,30,50 configuration option, methods, events, etc. I got a feeling I can do whatever I desire with this.

Now, having some experience with Ext JS which I did not like because of the fact that for every little thing I needed lines and lines of code… I expected same problem with Sencha Touch (especially after trying JQM). Well, surprise surprise that was not true. Some things are easier to do than with JQM! In example, making a 3 card horizontal carousel which slides by swyping is done in few short lines of code. Then you can nest: let’s put that carousel into another 3-card carousel (this time vertical). It’s only few lines of code more and you have complex layout of the app done. Swyping events are there “out of the box”, page icons on the bottom of the pages, everything.

But, after day passed I discovered I’m not finished with the app. JQM version was already done in this time. Sencha app needs more lines of code than JQM. However, I would still not say it is slower to develop using Sencha Touch, I would just say learning curve is a bit steeper. Frequently I spent time in docs trying to figure out how to do something and what is the best way to do it. Yes, there are many ways to do the same thing in Sencha Touch. In example, you can just dump everything in one file, like process-oriented programming, or you can program in MVC style splitting your app in carefully split model, view and controller definitions. Online tutorials and forums help a lot.

Another downside I noticed is obvious orientation on iPhone and not so much Android. In example, default “dropdown” behavior on Andorid brings iPhone style of dropdown which looks strange to Android users.

Also, at the end, when my panels got filled up with images and data, they slowed down a bit. I could see occasional flicker too, but still much better than JQM. I’m guessing I could get rid of it with some fine-tuning (preloading, decreasing DOM, etc.) but this was test enough. I’m moving on.

Sencha Touch claims to be first framework of this kind, and version 2 is already on the way (currently in developers preview). They say they focus on performance in version 2 (https://docs.sencha.com/touch/2-0/#!/guide/whats_new) and much better Android support! So I’m really curious as those are top 2 things that could improve. In fact, Sencha says: “The new SDK Tools include a new sencha package command that enables you to take your Sencha Touch app and package it up as an APP for iOS or an APK for Android. It’s that easy. One command, and your app is ready to be submitted to Apple or Google for distribution.”. So, version 2 does not even need PhoneGap? I’ll keep an eye on this and try it again soon. Those guys seem to know what they’re doing.

My next step is XUI which is minimalistic framework (from PhoneGap guys), or even to more extreme: build it without any framework, just custom made javascript and HTML5 with JQuery and few ready scripts to help. It seems this is the only approach if you want to target old (slow) devices and simulate native app’s speed and response 100%.