- What are hybrid mobile apps?
- Our solution
- Challenges
- Code reusability & maintainability
- Testing
- Debugging
- Performance
- Quirks
... 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.
UIWebView
android.webkit.WebView
windows.ui.xaml.controls.webview
TWebBrowser
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
Native | HTML5 | Hybrid | |
---|---|---|---|
Performance | Good | You have to fight | You have to fight |
Features | All | Some | All |
Native look | Out of the box | Can be faked | Can be faked |
App store | Yes | No | Yes |
Updating | Hard | Simple | Simple* |
Portability | No | Yes | Yes |
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); });
Cheep transformations: translate, rotate, scale, change opacity.