Fries: Free Framework for Developing Android Apps Using HTML, CSS and JavaScript

Fries by Jaune Sarmiento just reached version number 1.0. The project offers a framework for the development of web apps in the look and feel of native Android apps. If you are familiar with Android’s UI from version 4 on, you will definitely know your ways around, once you get a hold of Fries. In its current iteration, Fries is optimized to cooperate with PhoneGap, thus letting you build native Android experiences.

Fries is Not Only for Prototyping

First let me note that Fries is available under the terms of the very liberal MIT license, which means you can use it free of charge in private and commercial projects. The framework is hosted over at Github, but also can be downloaded at the demo site.

Deflated from its ZIP container, Fries weighs in at around 470 kb, where the essential framework parts only take a part of 370 kb of. The rest is all about examples and demos. In its recent version 1, Fries changed to support the official Android icons, which makes for an even better resemblance to native Android apps.

Fries works with HTML, CSS and JavaScript. The framework consists of CSS and JavaScript files, containing the looks as well as the feature set. As Fries follows a modular approach, each feature is realized as a separate JavaScript, where necessary complemented by a corresponding CSS file. That way collaborative extension of the functionality is made easy, Sarmiento himself already has about a dozen ideas on his mind.

The essential functionality, the stacking of the pages of a typical Android app experience is done by a JavaScript named Stacks.js, which Sarmiento „borrowed“ from Ratchet’s Push.js. Push.js only works on iOS. Stacks.js functions as a loader for page elements as well as content, where necessary via Ajax.

Fries: Simple Component System with Intelligent Task Sharing

Building a Fries app is simple, theoretically. All navigation elements, such as action bars or tabs are written to Div of the class page, while all content elements are stored to a Div classed content. Stacks.js cares for allocations and loading of content, if necessary. It is also responsible for the typical Android transitions between pages, which get realized using CSS3 transforms.

Principally an app created using Fries can be served via your common web server, which might probably the way to go during the development process. Once your app is nearing its final state, you should consider using Adobe’s PhoneGap. PhoneGap as a container does away with several limits, the mobile browser would impose. First and foremost, the mobile browser does not let you use the full screen, at least not without workarounds. This is not a critical point, but still makes for a less professional appearance than possible. Furthermore, PhoneGap has support for any Android API available.

At the time of writing, Fries has ready-made components for actions bars, buttons, tabs, lists and forms. Spinners lets you define selections in the space-saving Android way:

The demo website lets you test all components individually. As I mentioned, Fries comes under MIT and PhoneGap under Apache license. Both solutions form a team, which allows web developers to create apps in Android’s elegant look and feel, without setting them back one single dollar.

If only I knew, what twist of mind Sarmiento came up with, when he named the project Fries, I would not be left with one question unanswered…

Related Links

• Fries | Demo Site
• Fries | Github
• PhoneGap | Download Page