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%.

NET Media international services ltd. (NET Media međunarodne usluge d.o.o.) | OIB: 39220099203 | VAT ID: HR39220099203
Raiffeisenbank Austria d.d. Petrinjska 59, 10000 Zagreb | ŽR: 2484008-1106011288 | SWIFT: RZBHHR2X | IBAN: HR0224840081106011288
HQ: Starčevićeva 2 | Office: Kopilica 5 | 21000 Split | Republic of Croatia | T: +385 21 782 706 | F: +385 21 782 704
Registered at the Commercial Court of Split, under the No: Tt-11/5859-2 | MBS: 060277288 | Share capital 373.000,00 kn paid in whole | Board member: Mato Božić

NET Media international services ltd. (NET Media međunarodne usluge d.o.o.) | OIB: 39220099203 | VAT broj: HR39220099203
Raiffeisenbank Austria d.d. Petrinjska 59, 10000 Zagreb | ŽR: 2484008-1106011288 | SWIFT: RZBHHR2X | IBAN: HR0224840081106011288
Sjedište: Starčevićeva 2 | Ured: Kopilica 5 | 21000 Split | Republika Hrvatska | T: +385 21 782 706 | F: +385 21 782 704
Društvo je upisano u registar Trgovačkog suda u Splitu pod brojem: Tt-11/5859-2 | MBS: 060277288 | Temeljni kapital društva 373.000,00 kn uplaćen u cijelosti | Član uprave: Mato Božić

Contact us today!

You are here for a reason. Let’s talk.

Contact us