The First Truly Native-like iPhone Web Application - Powered by MooTouch

This is a demo of ExpatLiving Magazine for iPhone, a 100% web application built on top of MooTouch. In a few words, MooTouch make iPhone web app developer's dreams come true, finally!

Try the app in this demo yourself by pointing you iPhone's Safari to http://m.expatliving.sg Add it to Home Screen and you will be surprised how native-like it is. Animations look good on the old iPhone 3G / iPod Touch. With the double CPU speed on the iPhone 3GS you can barely tell this is 100% a web app!

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.

Category:

Science & Technology

Tags:

• iphone
• iphone web app
• iphone web application
• ipod touch
• webapp
• web application
• safari mobile
• mootools
• mootouch
• framework
• javascript

[nktproapi]

@realjax: (cont'd) Next, in order to have the "Add to Home Screen" feature so that it can look and feel exactly like a native app, you can't have a normal URL to open another page, since it will get opened in Safari in a "new window". Everything must be self-contained in the same document, or in other words, "AJAXy". MooTouch's goal is to solve all these, which as far as I know, none of the existing frameworks can do the same (correct me if I'm wrong)

[nktproapi]

@realjax: (cont'd) The best solution to date is to handle all touch events by yourself, i.e TouchStart, TouchMove, TouchEnd, etc. and simulate the behaviors. However, it's far more complicated then it sounds when you have to make sure DEFAULT behaviors still work. Another common issue is a delay of about 300ms before a Click event actually fires, due to the fact that you may be going to tap another time to make a "double tap".

[nktproapi]

@realjax: Thanks for your comment. The key point of MooTouch is to solve the problems that every developer encounters when he / she want to mimic the iPhone native application's behaviors. The most challenging issue is to have a scrollable content with fixed positioned Top Bar and Tab Bar. There's no way we can achieve it in CSS (position:fixed), at least at this moment, due to the Viewport concept of iPhone Safari.

[speedyfanable]

That looks really great! how did you do the tab bar? I am working on a web app right now but I can´t find a good solution for the tab bar - are you going to make MooTouch soon available for the public?

[dimebagplan]

I think this framework will never be release.

So, what you can do is to look at the source code of the website and see how it is working.

But, with iscroll, some javascript and css you can do the exact same thing without any framework.

[GIFTown]

The scrolling's buggy; They should just use Cubiq's iScroll (or at least make the framework compatible with iScroll)

[robtweed1955]

Worth looking at the open source iWD which is already available and can do all this stuff and more. A Google search for iwd iPhone will bring up lots of links.

[dopesince89ts]

From the looks of it, all of my web app problems will be officially solved. Can't wait for the release, is there a mailing list or something I can get on??

[fighttuts]

Actually i did this a half year ago. Same scrolling techniques, really native like.

Only i didnt used Mootools or any other library, i made my own.

[TeamUglyProductions]

@nktproapi: The Mootouch js framework looks amazing, especially the static top and tab bar functionality, sliding pages and smooth scrolling. Once you make it available to the public, I'd really love to see some examples of how it could be paired with iWebkit framework handling the interface.