Wednesday, March 24th, 2010

MooTouch: jQTouch has a Moo-y contender

Category: Mobile, MooTools

>

Jacky Nguyen was behind a new website ExpatLiving from Singapore, and as he built out a nice view for iPhone and mobile Webkit folks, he implemented MooTouch. It is still in an early stage, and is asking for input:

MooTouch is a cutting-edge JavaScript framework built on top of MooTools that truly brings the experiences of iPhone / iPod Touch native applications to web applications. It is extremely lightweight and highly extensible, designed as a collection of loosely-coupled MooTools classes to handle all users’ touch interactions. Key features include:

MooTouch.App

  • Full Ajax experience, dynamic content loading on demand, ZERO page refresh or re-direction
  • Location hash handling
  • History management, makes full use of the browser’s back and forward buttons
  • Pages transition using Mobile Safari’s native CSS3 GPU acceleration
  • Automatic hiding of the browser’s location bar
  • Global event delegation to boost performance, and much more…

Some key behaviors that make the core of MooTouch:

  • MooTouch.Clickable: No more infamous 300ms delay before the “onClick” event is actually fired!
  • MooTouch.Scrollable: CSS position:fixed not possible on the iPhone? It was yesterday! Have full control over which content area you want to provide the simulated scrolling feature, with scroll indicators, deceleration & snapping back to boundaries features.
  • MooTouch.Swipeable: Bring “onSwipe” event to any DOM element you like, that’s how the photo gallery was done
  • and more to come…

MooTouch is different from most existing similar libraries thanks to the use-at-will architecture of MooTools. You can simply just pick the pieces you need and combine them the way you like. Also, you can use any existing interface framework like iUI, iWebKit, UiUIKit, etc. for styling and put MooTouch on top to control all users’ interactions with any DOM element.

MooTouch is currently still in alpha testing. It will be released under the Open Source MIT License as something I can give back to the great open-web community! All feedbacks are very much welcome.

Posted by Dion Almaer at 6:06 am
33 Comments

++++-
4 rating from 42 votes

33 Comments »

Comments feed TrackBack URI

Both jQuery and Mootools are too large to cache on the iPhone. So if you use jqTouch or mooTouch you are adding a considerable download overhead to *every* page. The iPhone has great JS/CSS support. You don’t need a JS library.

Comment by deanedwards — March 24, 2010

>The iPhone has great JS/CSS support. You don’t need a JS library.

Having good JS support has zilch to do with using a library or not.

>both jQuery and Mootools are too large to cache on the iPhone

haha, seriously?? I don’t own an iPhone so I don’t know, but if it were true then the iPhone would even suck more IMHO.

Comment by jax — March 24, 2010

> you are adding a considerable download overhead to *every* page.

Really… Serious javascript apps nowadays do *not* span across multiple pages.

Comment by jax — March 24, 2010

> Having good JS support has zilch to do with using a library or not.

I would say the opposite is true. Most people use JS libs because cross-browser support for standards is so poor (MSIE).

> Serious javascript apps nowadays do *not* span across multiple pages.

Some do. Some don’t.

Using ajax to load static pages does not make it a web app. It makes it a badly designed web site.

Comment by deanedwards — March 24, 2010

If you’re loading static pages, it’s not an app, it’s a site. If you have some static content in an otherwise dynamic UI, it’s an app, and should not reload the full page just to load a bit of static content.
.
Libraries like these are meant for apps only, not for sites.

Comment by Joeri — March 24, 2010

Generally, people behave and listen to what Dean Edwards has to say.

Comment by tobielangel — March 24, 2010

I made a thorough explanation to deanedwards but my comment doesn’t appear at all?!

Comment by MooTouch — March 24, 2010

@deanedwards: Thank you for the comment. I’m the creator of MooTouch. I would love to discuss further on your concern about performance and download overhead. First of all if you look at the source-code of m.expatliving.sg you can quickly spot that I have splitted the whole library (including MooTools classes) into 4 parts, each is about 7KB gzipped (28KB data to be transferred), and < 25K unzipped. If you do follow some performance researches on iPhone Safari caching it turns out the browser only cache external js files that are less than 25K in raw size. Hence, by dividing into parts, which is done *automatically* on the server-side (I used Zend Framework and customized the HeadScript view helper), all js contents are now cached perfectly by Safari after the very 1st load.

Comment by MooTouch — March 24, 2010

(cont’d) Moreover I didn’t include the whole MooTools library since there are a number of classes that won’t be useful on Mobile Safari, only those to be extended by MooTouch.

Secondly, since MooTouch handle the whole application in “AJAXy” ways, additional contents are loaded on-demand (in plain HTML format), there’s zero page-reloading for the whole duration the user stays with it.

Thirdly, iPhone Safari supports HTML5 offline caching by creating a manifest, more details on http://bit.ly/TEHKz I did implement that and I worked great. However I just temporarily disable it for ease in development and debugging. In short, the whole application can be added to Home Screen and runs very much like a native app even without network connection, if the nature of your app doesn’t require so. The users only need to “install” it with a few taps for the first time, since all files listed inside your manifest (HTML, CSS, JS, Images) will already be cached afterwards.

Comment by MooTouch — March 24, 2010

(cont’d) To summarize, MooTools doesn’t cause any significant size download overhead at all if the app is done right. In contrast, it saves developers lots of time re-inventing the wheels and help to focus on creating & extending. Performance-wise, I think my demo proves well, even though there are still lots of rooms that I’m going to optimize further. To compare, it think ExpatLiving Mobile can easily be paired with the javascript-from-scratch PastryKit-based Apple’s Help app, which I assume all iPhone Web App developers have heard of :)

P.S: Sorry I tried many times & finally had to split my reply into many chunks. Ajaxian defintely needs to improve the spam filter…

Comment by MooTouch — March 24, 2010

@MooTouch:
This looks great. Even just the fact that you have “fixed positioning” built in already gives it a leg up on jqtouch. I was wondering how does it handle large sites with many dozens of pages? To clarify, I currently use jqtouch for a mobile version of a large video on demand website. Basically, the issue we have is that by default, every time a new page is “loaded” jqtouch creates a new div, fills it with content and slides it into view (and I imagine mootocuh does something similar), however, when that happens for every movie page, and those also have bunch of images and screenshots and so on, it becomes a problem very fast. We end up with dozens and dozens of “heavy” divs “hidden” off-screen.

To solve this I modified the history handling part of jqtouch to destroy older divs but still remember that they existed and if user, by using back button many times (my current limit is 40 :)) gets back to destroyed divs then they are recreated.

I don’t know if it’s the best way to do this but it works for us :)
So have you thought about a case like that? How does MooTouch handle it currently? How would you possibly change it to handle it?

Comment by iliad — March 24, 2010

@deanedwards

Considering that these tools significantly improve a non-iPhone optimized site’s original appearance/functionality, I’d take it even without caching.

Navigating a full-scale version of a news site is slow & cumbersome at best. This is simply a great tool to easily implement a mobile version of a site without having to redo the site. I doubt a single user would complain.

Comment by Liquidrums — March 24, 2010

@iliad: Thanks for your input! In fact I was inspired by all existing solutions that Google can reach, including jqTouch, which is a wonderful library and the very first I tried when i jumped into iPhone Webapp Dev. I would have extended it, if it’s designed to be extensible. It’s not jqTouch’s problem but the foundation itself – jQuery. In MooTouch if you just want to have “fixed positioned” Tab Bar and Top Bar, grab MooTouch.Scrollable (3KB minified) and one line of js code to init the element you want to be scrollable. If you want to have the Scroll Indicator as well, take MooTouch.ScrollView which is a wrapper around MooTouch.Scrollable and MooTouch.ScrollIndicator, etc. I don’t mean to discuss on which one is better, the point is: we should use the right tool for the right job, and MooTools is what I think the best for this job.

Regarding the number of divs issue, IMO it’s simply a trade-off. The more divs you keep (which contains the content of the movie item), the less XHR requests you need to make when the user view that item again (i.e it’s already “cached” inside an existing div). In MooTouch you can do either way. For m.expatliving.sg I have 1 div for a list of categories, and another div as the content container. When a category gets “clicked”, the content in the container gets replaced by the new response. Hence, 2 divs for that job, no matter how many categories I have. In short, that simply depends on the nature of the app itself (self-contained or AJAXy, frequently or seldom updated data, etc.) You have your own choices in MooTouch or extend the classes to add other ways in minutes.

From my own experiments the number of hidden DOM elements don’t seem to make any significant performance impact, only viewable ones do. I’m in the midst of tweaking further on performance, hopefully can get the site up soon and write some documentations. In fact I don’t have much free time to work on it recently and really need helping hands. If anyone interested in contributing please do contact me (nktpro at gmail dot com)

Comment by MooTouch — March 24, 2010

@ MooTouch
Hi, i wrote you on PhoneGap group some days ago. Contact me if you can for a discussion about MooTouch, I have some interesting project that I’d like to discuss with you
Moonkiki

Comment by nunziofiore — March 24, 2010

@MooTouch, If you’ve split your library into cacheable chunks then I withdraw my concern. :)

Comment by deanedwards — March 24, 2010

@mootouch
Iphone cache size has been reduced to 15 KB ungezipped..

Comment by V1 — March 24, 2010

Not to take anything away from the Mootouch version of the site, but take a look at http://m.expatliving.sg/ in a non-iPhone browser, like desktop Safari.

Compare and contrast this with the default theme on Yahoo! mobile:
http://m.yahoo.com/w/yfinance?_page_theme=default

The similarities don’t strike me as accidental.

Take a look at the background image for the header on ExpatLiving:
http://m.expatliving.sg/themes/lite/img/nav_bg.png

And then at Y! Mobile:
http://l.yimg.com/jg/api/res/1.2/VvPEJiSiIfNYK8CuyO4Jmw–//resource:/brand/yahoo/web/1.0.61/image/Hero/theme/default.cf.png

At least the creator of ExpatLiving was kind enough to copy the png from Yahoo! instead of just hotlinking it.

Comment by greenideas — March 24, 2010

Full disclosure, by the way, I work for Yahoo! Mobile, although I’m speaking only for myself here.

Comment by greenideas — March 24, 2010

I’ve used jQTouch inside an app: not for it’s javascript but for great styling that looks mad. Just drop it in, change a logo or two and your good to go. Also I’ve used jQtouch for prototyping an app. Using jQtouch to display a good map was a nightmare and I had to give up.

I’m a big mootools fan and I tried using Mootools to do some animation inside an app but found it too laggy with animation, I think what we need is a framework that uses webkit css to handle the animations and mootools or whatever for geolocation, xhr and the rest.

@tobielangel : haha true that about dean edwards! good to see him here, at least now I know I’m reading the right blogs :)

Comment by aw2xcd — March 24, 2010

Very impressive demo !!!!
I really would like to evaluate the framework by myself…
I have tried to find where i can download it…but no way :(
When will the download be available (except from the demo page…) with a minimum of documentation/samples.

Comment by fvisticot — March 24, 2010

@V1: Thanks for the info, I’ll do some experiments myself and see the actual numbers. Anyway it’s server-side responsibilities.

@greenideas: The lite interface is meant for non-iPhone devices and it has nothing to do with my work on MooTouch :). Thanks anyway I’ll note the developer in charge on that.

@aw2xcd: MooTouch does not include MooTools Fx stuff which are only suitable for desktop browsers. All animations are done with native -webkit CSS properties (I assume all current good frameworks do the same)

@fvisticot: I can release an alpha version very soon but need time to at least get a friendly site up and running. Anyone willing to contribute please do contact me :)

Comment by MooTouch — March 24, 2010

Not to brag or anything, but we did the SlidingMenu almost a year ago, which mimics the way the settings menu on the iPhone works. Here’s an example; http://ra-ajax.org/
.
Here’s the documentation for it; http://ra-ajax.org/class/Ra-Extensions-Widgets-SlidingMenu
.
PS!
Everything is kind of BETA now due to upgrading the entire website to a new platform [Ra-Brix], so some bugs may be experienced…

Comment by ThomasHansen — March 25, 2010

This reminds me very much of my initial design of an mobile application framework based on mootools:

http://github.com/SunboX/EazyShoppingList

;o)

So be it. Perfect job!

Comment by SunboX — March 25, 2010

where can i contact you MooTouch?

Comment by nunziofiore — March 25, 2010

@nunziofiore: Please drop me an email to :)

Comment by MooTouch — March 26, 2010

@nunziofiore: nktpro at gmail

Arrr Ajaxian does filter lots of innocent text :(

Comment by MooTouch — March 26, 2010

I’d like to see them add visual feedback when an object is touched… such as when a button should be in a depressed state or a list item should be in a selected state. This is easy to accomplish with ontouchstart and ontouchend. Right now you get no visual feedback of what your finger has touched until after you lift your finger.

Comment by zachstronaut — March 26, 2010

@mootouch Hi I’m the creator of iWebKit which you might have already looked at. At you might know it is a css based framework. I think it might be a good idea to work together. iwebkit’s css and mootouch’s javascript could create a complete framework!

I’d like to keep a “light iwebkit” and an “iWebKit + mootouch” framework to really show it’s a separate plugin and give you credit for your work (with links to your site etc); and at the same time you can promote “iwebkit + mootouch” on your site which will definitely convince users to leave jqtouch.

This will profit us both I think in making mootouch and iWebKit known around the internet and it would also reduce your work time since you already have the front-end. Since iWebkit is free I think it’s the perfect way for you to promote your work ;)

demo here: http://demo.iwebkit.net.

please share your thoughts. i’d really like to discuss the possibilities here :)

Comment by iwebkit — March 27, 2010

@iwebkit: Thanks for your comment, and the thought of combining iWebKit + MooTouch for the great benefit to the community. MooTouch was designed to be totally independent from theming, and the frontend of m.expatliving.sg indeed has some pieces from iUI, UiUIKit, WebApp.Net, and of course your iWebKit :). I’m working intensively on MooTouch over this weekend towards the first alpha release. I always support the idea of re-using what others have done and work together to create and innovate better stuff. Please do drop me an email (nktpro at gmail) with your contact, I will definitely reach you after the alpha release and discuss in details in what and how both can be glued together.

Comment by MooTouch — March 27, 2010

Hi;
what is the status of this project?
any formal release soon somewhere?
thanks

Comment by gkatz — April 15, 2010

This looks very exciting. Is there a website established for this project yet?

Comment by Daled — April 22, 2010

MooTouch, very impressed. Could you let us know when this will be available to play w/ the code please. Email me my username at gmail please.

Comment by delatush — April 22, 2010

MooTouch – Wow. Very impressive. fixed position with scrolling looks nice. Would love to know when it is available for use.

Comment by Qualutions — June 2, 2010

Leave a comment

You must be logged in to post a comment.