HTML5 mobile app on Steroids

Yours Truly, Famous Inc.

Varya Stepanova
@ FrontTrends2014

HTML5 mobile apps

on Steroids

Steroids

by AppGyver

appgyver.com/steroids

Install the tools

$ node -v
v0.10.25

$ npm install steroids -g

Hello world!

$ steroids create myProject
$ cd myProject

$ steroids connect --watch
# AppGyver Scaner

simulator

Generator

$ steroids generate example <exampleName>
$ steroids generate tutorial <tutorialName>
$ steroids generate ng-resource

Cordova API

  • Accelerometer
  • Camera
  • Compass
  • Contacts
  • Geolocation

Steroids native UI

  • steroids.modal
  • steroids.layers
  • steroids.view.navigationBar
  • steroids.config.tabBar

Steroids API

  • App & Device
  • File System
  • Media

Tab Bar

$ vim config/application.coffee
steroids.config.tabBar.enabled = true
steroids.config.tabBar.tabs = [
  ...
]

Notifications

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

Navigation bar buttons

var loginButton =
    new steroids.buttons.NavigationBarButton();
loginButton.title = "the Button";
steroids.view.navigationBar.update({
    buttons: {
      right: [loginButton]
    }
});

Modal views

function showModal() {
  var webView =
    new steroids.views.WebView("/views/modalExample/show.html");
  steroids.modal.show(webView);
}
<a class="button button-block"
  ontouchend="showModal()">Open modal</a>

Sharing, deploying & reloading

HTML5 mobile apps on Steroids

Varya Stepanova @ FrontTrends2014