BT

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:

image

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.

Hello stranger!

You need to Register an InfoQ account or 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

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2013 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT