Inspiré par Ratchet, un framework de prototypage d’application pour iPhone, Jaune Sarmiento a créé Fries, un petit framework pour créer des interfaces d’applications Android utilisant seulement l’HTML, le JavaScript et le CSS sans aucun code natif. Si de nombreux autres ont réalisés des interfaces similaires, Fries imite l’interface Anrdoid 4.0 plutôt bien.
Fries a défini jusque-là un certain nombre de composants d’interfaces : Action Bar (incluant Up Button, Action Buttons, Action Overflows, Subtitles), Tabs, Buttons, Spinners, Lists (incluant 2-line et multi-line) et Forms (incluant Flexible Forms). L’image suivante montre l’Action Bar en haut avec une action et un overflow pour les autres actions.
Le code HTML correspondant est le suivant :
<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>
Une application Fries est un ensemble de "pages" HTML telles que celle ci-dessus chargé à la demande avec stack.js qui est une adaptation de push.js du projet Ratchet. Stack.js fait des appels AJAX pour récupérer une nouvelle page du serveur lorsque c’est nécessaire. D’après Sarmiento, stack.js utilise "l’API History d’HTML5 pour que l’utilisation du bouton retour d’Android fonctionne".
Fries utilise PhoneGap pour implémenter des transitions entre les pages ainsi que le montre cette vidéo :
Sarmiento a mis en avant une roadmap incluant scrollable tabs, modals, progress bar notamment.
Il y a des inconvénients à réaliser une interface HTML5 qui imite le natif. Le principal avantage d’une application HTML5 est de l’écrire une fois et de la déployer sur différents OS mobiles. Mais celle-ci ressemble à Android et rendra donc mal sur iOS. Cela pourrait fonctionner s’il y avait un framework d’abstraction d’interface au-dessus de Ratchet et de Fries qui utiliserait automatiquement l’un ou l’autre en fonction de l’OS sur lequel il est exécuté : Android ou iOS.
Un autre problème important est l'exécution offline de l'application. Pour le moment, une application Fries nécessite un accès Internet constant ou un serveur Web tournant sur l'appareil lui-même. Ce problème pourrait être résolu si Fries implémente les fonctionnalités offline de l'HTML5 telles que l'application cache ou le local storage.