Mobile devices development using HTML5/JS – part 4 – XUI and/or frameworkless way

My last test was something minimalistic and XUI (https://xuijs.com/) seems like the best choice as it comes from the same team as PhoneGap. You can think of XUI like stipped down JQuery. It is only 10k and covers basic things like selectors, events but also some fx like transitions. I must admit I tried even bare JavaScript, without even XUI, but after spending too much time on transitions that behaved wierd ony my HTC Desire I have skipped it in favour of XUI’s “tween” fx. Other than that, bare JavaScript way and XUI way is not that different.

My first impression: well, it is easier than I though to do it without any framework! Don’t expect hundreds of lines of codes, CSS3 and HTML5 offer enough power to do things easier than you expected. But second impression is a bit different as time gets spent on small things, wierd behaviors or things you take for granted when you use frameworks, like managing back button on Android.

But prize for all this is speed! I guess you cannot go faster than fully custom, frameworkless JS. Even my transitions (XUI tween effect) seems faster than Sencha Touch and seem to be usable even on slower devices (but will have to check that). Another huge benefit is knowledge. I suggest everybody to try writing some smaller apps this way, it will be slow but knowledge that you pick up along that way will help you later with frameworks too.

Interesting thing is my last impression, after few weeks of playing with this: I have a feeling I ended up with framework after all, but “my framework”. If you want to program proper way and not just make it work, you’ll find yourself building standards, producing standard functions and using allways the same extensions. Quickly you realize you have actually built a small framework which you plan to reuse instead of going the same way all over again. In my example, I went JQuery Mobile way. I used HTML5 custom attributes “data-*” and wrote some JS to read those and trigger standard behaviors like “go to this page with slide left”, or “go to this page with flip right effect and execute this function before and this one after transition”.

… then I had to deal with fixed position of header and footer for which I used Iscroll lite (https://cubiq.org/iscroll-4)
… then I wanted simple templating and was thrilled to find a great one in less then 20 lines of code!? (https://ejohn.org/blog/javascript-micro-templating/)
— then I cried for JQuery’s “delegate” and “live” methods and learned a lot on the subject, again surptised I can extend XUI with similar functionality with 10-20 lines of code! (https://stackoverflow.com/questions/6841580/xui-js-jquery-like-live-event)

Conclusion on mobile HTML5/JS frameworks?
Uh, tough one. I was leaning towards this last way of building, especially if you want to target wide – Androids, old Androids, Iphones, old Iphones. Also I expected this to be temporary, as mobile devices become faster and faster and hardware acceleration is not going to be reserved for iPhone for much longer. Frameworks are the future for sure. But then again, maybe good option is also JQuery Mobile or Sencha Touch without any transitions, gradient backgrounds, CSS3 rounded borders: I’m guessing this would also work quite good on slower devices.

So, I call it a tie for now. Sencha Touch 2 is going out soon anyway, JQuery mobile is stabilysing and I have a feeling this investigation became obsolete before I finished it :) Well, that’s how it is in our business, and to be honest, I like it this way :)