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

| by Abel Avram Follow 9 Followers on Jun 15, 2013. Estimated reading time: 1 minute |

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

Adoption Stage

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


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you