Fries: Building a Native Android Interface with HTML, JavaScript and CSS

by Abel Avram on Jun 15, 2013 |

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>
    <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>

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.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.