Introducing app-UI

I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.

app-UI is a collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications ( app-UI can easily be styled/customized using CSS.

Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.

All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on the latest releases of most desktop browsers (I know it does not work on old versions of IE).


You might be wondering “why create this?” when there are other open source alternatives like jQuery Mobile. The primary motivation for creating app-UI was to have reusable application containers that are highly performant, and do not force any prescriptive development paradigms. With respect to animations/transitions, app-UI outperforms the alternatives, particularly on mobile devices.

app-UI can be used with many different existing frameworks – app-UI only requires jQuery as a solution accelerator framework. It will work with existing UI widget frameworks (jQuery UI, Twitter Bootstrap, etc…), and will work with existing templating frameworks (Moustache, Knockout, Handlebars, etc…).

Application Containers

app-UI currently has three application containers, and at this time it is not intended to be a complete UI widget framework.

Please see the “samples” directory for usage scenarios – there is no documentation yet.


The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.



The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.



The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container “underneath”. This is very similar to the behavior in Facebook’s iPad application.


Just swipe horizontally with a finger or the mouse…

Bugs & Features

No software is ever bug-free. If you encounter an issue, have feedback, or have feature requests, please log them at:


Fork it, fix it, and send me a pull request.

Please do not just complain.

Real World Usage

You can see this framework in the following real-world apps:

If you have built your own app using this framework, please let me know! (@andytrice on twitter)


Get started with app-UI today! Just browse to, read the details, download a copy, and start building your own apps!

If you’re building something cool with it, then let me know! I’d love to hear about it.

  • Derrick

    Looks great! Much smoother than jquery mobile and sencha on my Android! Will deffinatly be using this.

  • Andrew

    Thanks! I hope to add some features in the near future too. Let me know if you build anything with it.

  • Nene

    I am bookmarking your page. I am yet to try but from what Derrick said I guess its okay. I hope it is highly customizable. You know branding is a core point in app design. Thanks though.

  • Nene

    Please are the dependencies all in the zip file or I have to download them separately.

    From the website:
    jQuery Animate Enhanced –
    iScroll 4 –
    NoClickDelay –

    • Andrew

      they’re in it.

  • Nene

    Thanks. Am a designer and just decided to develop in jQuery. Makes it easier getting into the coding world. So I will use your UI and let you know what I think. But I think the video has convinced me. 🙂

  • Pingback: Andrew Trice » Blog Archive » US Census Browser v2.0()

  • Matthew David

    Very cool!

  • John Paul Narowski


    I am so happy I stumbled across your blog and this framework. The mobile world needs something exactly like app-UI and I am hoping you continue to grow it. I am currently redoing my app to be built on Backbone.js and want to share as much of my codebase as possible with the mobile/tablet apps.

    I’ve used Sencha touch and jquery mobile in the past, but sencha doesn’t play well with backbone and jquery mobile is just too dang slow.

    I needed something that was very fast, lightweight and unopinionated and I think I’ve found it with this framework. I would be interested in chatting with you further about this and where you are headed. Maybe I can put some of my resources into helping improve it so we can have the best HTML5 + mobile + backbone app around. Ping me when you have a second and we can discuss further.

    Very nice work. I am happy to find out I am not the only one going crazy about the lack of a fast touch binding only JS framework.

    • Andrew

      I’m glad you like it! Shoot me a message at “atrice at adobe dot com”, and we can setup a time to chat.

  • Levent Evmek


    we are creating a phonegap application based on your app-ui/viewnavigator panel and we have a problem that we can’t solve it.

    when we are testing our application on ios6 (iphone 3gs/4s) there is no any problem but when we tap to back button (backCallback) mostly (irregularly) appear a problem.

    After the transition, previous page is jumping/bouncing and we can not solve this problem.

    if you have any knowledge about this problem, could you help us please?

    • Andrew

      Hi Levent, Do you have any sample code that you could share? Otherwise, I don’t really have much to go on. I am not seeing this behavior myself.

  • http://Cordova2.2.0 Alex Wijnholds


    I tried many scripts to get the Facebook menu. But none of them were working on my Android 4.1.

    I tried your demo in a basic Phonegap app. And it works! Only problem is, if I include cordova then it stops working somehow.

    Maybe cordova is also the reason why other scripts that i tried and created were not working.

    Do you know anything of this bug?


    • Andrew

      There is no dependency on PhoneGap/Cordova in any of the code I posted. I have used app-UI in PhoneGap apps before, without any issues. Do you see any javascript error messages? My guess is something is overwriting values in JavaScript memory scope.

  • Levent Evmek

    We resolved our problem.

    Just changed line 298, setTimeout function timing value to 1 in viewnavigator.js file and problem solved 🙂

  • Miguel Ángel Jiménez Achinte

    Hello Andrew! Thanks, this is awesome 🙂

    I am trying the basic view navigator but when I push a view, immediately the next view appears and the second goes down, and then slide to the left (in the original effect the new view slide to the left replacing the old one). It is a weird effect, and is causing me a bad experience in my app. Do you know why the effect is working that way?

    Thank you very much.

    • Andrew

      It is probably an issue with your CSS styles, or conflicting/duplicate css style naming. Any chance you can share a code snippet?

  • Matt

    how do i get rid of the header if i want to create a splashscreen on my app or i want to create my own header but still remain using the viewnavigator