Wer bin ich?
- Christopher Blum
- Frontend-Entwickler aus Leidenschaft
- JavaScript , Rails, jQuery, AngularJS, node.js
- Gründer bei Protonet
Protonet?
- Software & Hardware made in Hamburg-Altona
- 33 Mitarbeiter
- Mission: Menschen digital unabhängig machen
- Private Cloud, soziales Netzwerk, Kollaborations-Tool
- 1400 Geräte verkauft
Protonet - Carla
Protonet - Maya
Was ist eine hybride App?
- Rahmen: Nativ (Java, Objective C)
- Inhalt: HTML5, CSS, JavaScript
- Über JavaScript können Hardware-Komponenten (Kamera, GPS , ...) angesteuert werden
Vorurteile
„The biggest mistake we’ve made as a company is betting on HTML5 over native.“
Mark Zuckerberg, 2012
State of the Art - 2012
iPhone 4s und iOS 5
- Browser auf dem Stand von Safari 5
Android 4.0
- Browser auf dem Stand von Safari 4 oder Chrome 12
- DOM Performance schlecht
- Viele Bugs
- Kaum CSS3-Support
- CSS-Transitions ruckeln
State of the Art - 2014
iPhone 6 und iOS 8
- Browser auf dem Stand von Safari 8
Android 4.4
- Browser auf dem Stand von Chrome 33
- Hardware Acceleration
Moore's Law
Nach Moore's Law verdoppelt sich die Rechenleistung von Prozessoren etwa alle 18 Monate.
iPhone Sunspider Benchmark
Quellen: geekaphone.com
Samsung Galaxy Sunspider Benchmark
Quellen: geekaphone.com
Wann macht's Spaß?
Mindestens Android 4.4
- 25% aller Androids weltweit (in Deutschland mehr)
- Nexus 4, Moto G, Galaxy S4, ...
Mindestens iPhone 5
- 75% aller weltweit aktiven iPhone's
- iOS 7+
Quellen: Statista, Mixtrend
Vorteile Hybrid
- Niedrige Entwicklungskosten
- Eine Code-Basis
- Bestehende Patterns können wiederverwendet werden
- Web-Standards (WebSockets, WebRTC, LocalStorage, IndexedDB, ...)
- Kein Java
Nachteile Hybrid
- Keine native Performance
- Weniger Möglichkeiten als bei nativen Apps
- Keine UI-Elemente aus dem Betriebssystem
- Keine Unterstützung für Smartwatches
Fazit
Hybrid ist mittlerweile gut genug und eine echte Alternative für Unternehmen mit kleinem Budget.
Was ist Cordova?
- Hybrides Framework
- Open Source
- Core Contributor: Adobe
- Android, iOS, Amazon Fire OS, Blackberry, Firefox OS, Ubuntu, Windows Phone, Tizen
- Phonegap basiert auf Cordova
- Verwendet von BBC, Zynga, Facebook, Twitter, ...
Voraussetzungen
- XCode auf Mac für iOS-Entwicklung
- Android SDK
- node.js
- iOS: 99 $ pro Jahr
- Android: 25 $ einmalig
Erste Schritte
1. Setup:
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add ios
$ cordova platform add android
Erste Schritte
2. HTML / CSS / Javascript:
<h1>Hello World</h1>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Erste Schritte
3. Auf Gerät testen:
$ cordova run android
$ cordova run ios
Cordova Plugins
- Schnittstellen zur Hardware und nativen Komponenten
- Einfache JavaScript API
- Über 400 Plugins
- plugins.cordova.io
How To Take A Selfie
Installieren:
$ cordova plugin add org.apache.cordova.camera
Verwenden:
navigator.camera.getPicture(
successCallback,
failureCallback,
{
cameraDirection: Camera.Direction.FRONT,
quality: 75
}
);
How To Take A Selfie
GPS-Signal
Installieren:
$ cordova plugin add org.apache.cordova.geolocation
Verwenden:
navigator.geolocation.getCurrentPosition(function(position) {
var coords = position.coords;
console.log(coords.latitude, coords.longitude, coords.speed);
});
GPS-Signal
Nützliche JavaScript Libraries
-
Fastclick
- Ein Muss für iOS
-
Ionic
- Frontend Framework basierend auf AngularJS
-
imgcache
- Cached externe Grafiken auf dem Telefon
Performance Tipps
- Statische Assets mit der App ausliefern
- CSS3 Animationen
- Sparsam mit Dom-Elementen umgehen
- JavaScript-Operationen unterbrechen wenn App im Hintergrund
- jQuery 2.1 statt jQuery 1.11
- GZIP / SPDY für externe Resourcen
- Instant Touch Feedback (-webkit-tap-highlight-color)
- Grafiken > CSS 3
Entwicklungs-Tools
-
Ripple
- Simuliert Cordova im Chrome
-
XCode-Simulatoren (Vorsicht: Keine native Performance)
-
Simulatoren in der Android SDK sind unbrauchbar
-
Stattdessen: Genymotion
- Emulatoren basierend auf VirtualBox
Bonus-Material
Chrome WebView für alle Android Versionen
Test-Framework für Android
iOS-Driver für Selenium
Push-Service mit Cordova-Support
/