Instant mobile web app creation

bower install kik-app


App.js - mobile webapps made easy

App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.

  • cross-platform (Android 2.2+, iOS 4.3+)
  • themable platform-specific UI designs
  • configurable native-like transitions
  • automatically managed navigation stack
  • built-in widgets for general use-cases

The goal of App.js is to provide a robust starting point for mobile webapps, handling general scenarios, and maintaining compatiblity with other common JavaScript libraries.

Check out the documentation here


$ bower install kik-app --save

Reference kik-app.js from your application, f.ex from index.html

<script type="text/javascript" src="/bower_components/kik-app/kik-app.js"></script>

Also reference the styles like this:

<script type="text/javascript" src="/bower_components/kik-app/dist/app.css"></script>


default.css (same as app.css), includes inline css images base.css excludes inline images and is useful for testing


Simply concatenate all the files:

cat src/*.js src/lib/*.js > kik-app.js

Integration with popular Javascript MVC frameworks

To integrate with an MVC framework such as Ember.js or Angular.js:

Have your router (or some other "action controller" function or object) call the respective KikApp page controller to do a page transition.

Have a template of some sort

<div class="app-page" data-page="contact">
  <div class="app-topbar">
    <div class="app-title">Contact</div>
  <div class="app-content">
    <div class="first-name">{{firstName}}</div>
    <div class="last-name">{{lastName}}</div>
App.controller('contact', function (page) {
  // Leave it to Ember and handlebars to do the templating
  // $(page).find('.first-name').text(contact.firstName);
  // $(page).find('.last-name' ).text(contact.lastName );

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {

  actions: {
    refresh: function() {, function() {
        // get some data'contact').then(function(data) {

          // will cause the template to be evaluate and the mustaches {{}} 
          // updated to reflect the incoming controller data
          this.controller.set('content', data); 

          // Transition to the page and make it visible (and on top?)!

      }, 100);

The above route should of course be generalized in some manner...

Easy as pie ;)