Wednesday, March 24th, 2010
MooTouch: jQTouch has a Moo-y contender
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.
Related Content:
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.
>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.
> you are adding a considerable download overhead to *every* page.
Really… Serious javascript apps nowadays do *not* span across multiple pages.
> 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.
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.
Generally, people behave and listen to what Dean Edwards has to say.
I made a thorough explanation to deanedwards but my comment doesn’t appear at all?!
@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.
(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.
(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…
@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?
@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.
@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)
@ 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
@MooTouch, If you’ve split your library into cacheable chunks then I withdraw my concern. :)
@mootouch
Iphone cache size has been reduced to 15 KB ungezipped..
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.
Full disclosure, by the way, I work for Yahoo! Mobile, although I’m speaking only for myself here.
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 :)
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.
@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 :)
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…
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!
where can i contact you MooTouch?
@nunziofiore: Please drop me an email to :)
@nunziofiore: nktpro at gmail
Arrr Ajaxian does filter lots of innocent text :(
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.
@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 :)
@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.
Hi;
what is the status of this project?
any formal release soon somewhere?
thanks
This looks very exciting. Is there a website established for this project yet?
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.
MooTouch – Wow. Very impressive. fixed position with scrolling looks nice. Would love to know when it is available for use.