Inspired by Ratchet, an iPhone application prototyping framework, Jaune Sarmiento has created Fries, a small framework for creating the UI of Android applications using just HTML, JavaScript and CSS, no native code. While many have done similar interfaces, Fries mimics the native Android 4.0 interface pretty well.
Fries currently has defined a number of UI components: Action Bar (including Up button, Action Buttons, Action Overflows, Subtitles), Tabs, Buttons, Spinners, Lists (including 2-line and multi-line), and Forms (including Flexible Forms). The following picture depicts the top Action Bar with an action and an overflow menu item:
The corresponding HTML code is:
<div class="page">
<header class="action-bar fixed-top">
<a class="app-icon action" href="#">
<i class="icon-fries"></i>
</a>
<h1 class="title">Action Buttons</h1>
<ul class="actions pull-right">
<li><a title="Search" class="action" href="#"><i class="icon-search"></i></a>
<li><a title="Copy" class="action" href="#"><i class="icon-copy"></i></a>
<li><a title="Cut" class="action" href="#"><i class="icon-scissors"></i></a>
<li><a title="Settings" class="action" href="#"><i class="icon-settings"></i></a>
</li></ul>
</header>
</div>
A Fries application is a collection of HTML “pages” like the one above, loaded on request using stack.js, which is an adaptation of Ratchet's push.js. stack.js makes AJAX calls to retrieve a new page from the server when necessary. According to Sarmiento, stack.js uses “the HTML5 History API so the Android device's back button functionality doesn't break.”
Fries uses PhoneGap to implement transitions between pages, as shown in the following video:
Sarmiento outlined a roadmap including scrollable tabs, modals, progress bar, and others.
There are some issues with building an HTML5 interface that mimics the native one. The main benefit of an HTML5 application would be to write it once and deploy it on multiple mobile OSes. But this one resembles Android, and won’t look well on iOS. It would probably work if there was an abstract UI framework on top of Ratchet and Fries, defaulting to one or the other depending on the OS it runs upon, iOS or Android.
Another major issue is related to running the application offline. Currently, Fries applications need constant Internet access or a web server running on the device itself. This problem could be solved if Fries implements HTML5 offline capabilities, such as application cache or local storage.