Agenda

  • What are hybrid mobile apps?
  • Our solution
  • Challenges
    • Code reusability & maintainability
    • Testing
    • Debugging
    • Performance
    • Quirks

What are hybrid mobile apps?

flickr.com/photos/mmortah/5364586900

The Native way

<Click on the image above.>

Native app

pros & cons

  • Performance
  • Access to all device features
  • Native look
  • No portability
  • Requires specific dev environment
  • Publishing only through an app store
  • Pushing updates is a pain

The HTML5 way

<Click on the image above.>

HTML5 app

pros & cons

  • Portability
  • Requires only a text editor
  • Full control over publishing
  • Pushing updates is super easy
  • Performance
  • Access to some device features (geolocation, camera, mic, gyroscope)
  • Native look (if needed, has to be faked)
  • Not installable*

Sidenote - Installing HTML5 apps

... is possible!


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Unfortunately, no one seems to understand it...

yet.

Sidenote - WebView

  • Allows embedding web content in your application.
  • iOS: UIWebView
  • Android: android.webkit.WebView
  • WP: windows.ui.xaml.controls.webview
  • Delphi (~1997!): TWebBrowser
  • Not exactly a new concept.

Sidenote - WebView

The Hybrid way

<Click on the image above.>

Sidenote - Phonegap

Supported platforms: Amazon Fire OS, Android, BlackBerry 10, Firefox OS, iOS, Ubuntu, Windows Phone, Windows 8, Tizen

$ cordova create hello
$ cordova platform add ios
$ cordova platform add android
$ cordova plugin add org.apache.cordova.vibration
$ cordova plugin add org.apache.cordova.contacts

// Vibrate for 2.5 seconds
navigator.notification.vibrate(2500);
// Create a new contact
var myContact = navigator.contacts.create({"displayName": "Test User"});

$ cordova build

Hybrid app

pros & cons

  • Portability
  • Access to all device features
  • Pushing updates is easy *
  • Performance
  • Requires specific dev environment
  • Publishing only through an app store
  • Native look (if needed, has to be faked)

The big picture

NativeHTML5Hybrid
PerformanceGoodYou have to fightYou have to fight
FeaturesAllSomeAll
Native lookOut of the boxCan be fakedCan be faked
App storeYesNoYes
UpdatingHardSimpleSimple*
PortabilityNoYesYes

Our solution

bluefooted.deviantart.com/art/Harpy-202194346

Structure of the applications

Framework
Custom SPAR
Custom KIWI
<Click on the image above.>
<This was a demo. Since we built a hybrid app, I was able to embed it into presentation!>

Challenges

orion35.deviantart.com/art/Bellerophon-vs-The-Chimera-326226558

Code reusability & maintainability

  • Main building block - modules
  • Secondary building block - UI plugins
  • Templates to abstract the views
  • This is still far from perfect

Testing

  • Hard to write unit tests
  • UI (DOM manipulation) and business logic tightly coupled

  • Last resort: functional tests with CasperJS

    casper.start("http://www.google.com/", function() {
    test.assertTitle("Google", "title is the one expected");
    test.assertExists('form[action="/search"]', "main form is found");
    this.fill('form[action="/search"]', {
        q: "casperjs"
    }, true);
});

Take-aways

  • Use a modern JS framework
  • Write tests from day one

Working environment

  • Remote debugging
  • Running project inside a browser

Working environment

  • Codekit
    • watch files
    • bundle and minify JS and CSS
    • compress images
    • compile SASS
    • validate JS
  • Grunt - everything from above plus:
    • live reload
    • add version number
    • deploy to the server

Take-aways

  • Take your time to setup the best working environment
  • Automate repetitive tasks

Performance

UI manipulation

  • Parsing
  • Rendering
  • Painting

Performance

Animations

  • Use CSS animations
  • Take advantage of GPU layers

  • Cheep transformations: translate, rotate, scale, change opacity.

<Click on the image above.>

Performance

Design affects performance

Take-aways

  • Learn how browsers work
  • Measure performance during development
  • Don't optimize prematurely
  • Talk with your graphic designer about performance

Quirks

  • Huge problem on Android phones (because there are so many!)
  • Smaller on iOS
  • OS updates can suck on both platforms

Take-aways

  • Limit number of supported devices
  • Keep an eye on new devices & system updates
  • Setup environment for easy multi-device testing

Sidenote - Open Device Lab

Thank You!