iPhoneアプリのプロトタイピングフレームワークであるRatchetにインスパイアされて、Jaune Sarmiento氏はネイティブコードなしにHTML、JavaScript、CSSだけでAndroidアプリのUIを作成する小さなフレームワーク、Friesを作った。同様のインターフェイスを実現するものは多数あるが、FriesはネイティブのAndroid 4.0インターフェイスをかなり忠実にまねている。
Friesにはアクションバー(アップボタン、アクションボタン、アクションオーバーフロー、サブタイトルを含む)、タブ、ボタン、スピナー、リスト(2行と複数行を含む)、フォーム(フレキシブルなフォームを含む)など、多数のUIコンポーネントが定義されている。次の図はアクションとオーバーフローメニューアイテムを備えたトップのアクションバーを示している。
対応するHTMLコードは以下のようになる。
<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>
Friesアプリは上のようなHTML「ページ」の集合であり、stack.jsを使ったリクエストによりロードされる。stack.jsはRatchetのpush.jsを改変したもので、AJAX呼び出しにより必要に応じてサーバから新しいページを取得する。Sarmiento氏によれば、stack.jsは「HTML5 History APIを使っており、Androidデバイスのバックボタン機能を壊すことはない」そうだ。
次のビデオにあるように、FriesはPhoneGapを使ってページ間の遷移を実装している。
Sarmiento氏はスクロール可能タブ、モーダル、プログレスバーなどを含む今後のロードマップを明らかにしている。
ネイティブをまねたHTML5インターフェイスを構築することには、いくつか問題がある。HTML5アプリの一番のメリットは、一度書いたら複数のモバイルOSで動かせることだ。だが、これはAndroidアプリのように見えて、iOSでは見栄えがよくないだろう。RatchetとFriesの上に抽象UIフレームワークを用意して、iOSやAndroidなど実行するOSによってデフォルトが決まれば、うまくいくかもしれない。
もう1つ大きな問題はアプリのオフライン実行についてだ。現在のところ、Friesアプリは常時インターネットアクセスもしくはデバイス自体で動作するWebサーバのいずれかを必要としている。だが、FriesがアプリケーションキャッシュやローカルストレージなどのHTML5オフライン機能を実装すれば、この問題は解決されるだろう。