Johannes Brosi | Mayflower


Von der WebApp zum Store

whoami?



Johannes Brosi

Wirtschaftsinformatiker (B.SC., FH)
Schwerpunkt Medieninformatik
Developer Mayflower GmbH


10+ Jahre Erfahrung im Web

Kontakt: me@brosi.me

Tech?



  • Slid.es (Wysiwyg für Reveal.js)
  • Reveal.js
  • Phonegap
  • Bluestacks

+ custom HTML / CSS / JS :)


Um was geht's?



  • Was ist / kann eine WebApp?
  • Abgrenzung andere Apps
  • Welche App für was?
  • Überblick Hybrid-App-Framworks
  • PhoneGap im Detail
  • Ab in den Store!
  • Chancen/Risiken
  • Fazit

Was ist eine Web-App?



Wikipedia über (mobile) Web Apps

Web-Apps sind für mobile Internetnutzer über den vorinstallierten mobilen Browser aufruf- und installierbar. Sie verhalten sich wie mobile Webseiten, verwenden jedoch modernste Programmiertechniken wie AJAX und bieten dadurch ähnliche Funktionen und Eigenschaften an wie native Apps, die fest installiert sind.

Quelle: Wikipedia

Was kann eine WebApp? (1 / 13)



Video & Audio

  • Benutzerdefinierte Steuerelemente
  • MP4, WebM, OGG
  • Mit Lösungen wie videojs "nachrüstbar"




Support: Bis auf Opera Mini alle aktuellen ab IE 9, jedoch nicht jedes Format.

Was kann eine WebApp? (2 / 13)



Webstorage. Einfacher Key-Value Store 

  • Local oder Session based
  • Ähnlich Cookie aber mehr Platz (5-25 MB)




Support: Bis auf Opera Mini alle ab IE 8

Was kann eine WebApp (3 / 13)



WebSQL. SQL Datenbank.

  • SQL Abfragen möglich
  • größere Datenmengen möglich (meist mit Userprompt)
  • Auch für komplexere Daten geeignet




Support: Alle bis auf IE, FF, Opera Mini

Was kann eine WebApp (4 / 13)



IndexedDB.

  • NoSQL Datenbank für größere Datenmengen
  • Blobs/Arrays/Objekte





Support: Alle bis auf Safari, Android-Browser, Opera Mini

Was kann eine WebApp? (5 / 13)



2D-Canvas.

  • Grafiken
  • Animationen
  • Transformationen
  • Zeichnen
  • Spieletauglich
  • teils Hardwarebeschleunigt


Support: Alle gängigen Browser ab IE 9

Was kann eine WebApp? (6 / 13)



WebGL

  • 3D Grafiken auf Basis von WebGL
  • teils Hardwarebeschleunigt
  • Eigene Shader möglich
  • hervorragend für Spiele geeignet




Support: Ab IE 11 + alle gängigen
Auf mobile leider noch sehr eingeschränkt.

Was kann eine WebApp? (7 / 13)



Kamera/Video-/Audiocapture

  • via getUserMedia
  • Zugriff auf Alben möglich
  • Bilddaten via JS analysierbar/nachbearbeitbar 




Support: aktuelle Android, IOS, Chrome, FF, Safari

Was kann eine WebApp? (8 / 13)



Weiches Touch-Scroll Verhalten

  • via -webkit-overflow-scrolling: touch;
  • hardwarebeschleunigtes Scrollen
  • Scrollverhalten wie vom OS gewohnt.




Support: IOS, Chrome Mobile

Was kann eine WebApp (10 / 13)



3D Positionierung von DOM Elementen

  • teils hardwarebeschleunigt
  • via 3D Transition
  • für Übergangseffekte




Support: Alle gängigen Browser bis auf Opera Mini

Was kann eine Web-App (11 / 13)



File API

  • Weiterverarbeiten / auslesen von Dateien
  • Drag & Drop von Dateien in die WebApp
  • Mehrere Dateien gleichzeitig




Support: alle gängigen bis auf Opera Mobile und IE Mobile

Was kann eine Web-App (12 / 13)



Geo-Lokalisierung

  • Auslesen der geographischen Position des Gerätes




Support: Alle gängigen ab IE 8 (bis auf Opera Mini)

Was kann eine Web-App? (13 / 13)



Accelerometer

  • Zugriff auf Beschleunigungssensoren
  • via orientation-change event
  • x,y,z Beschleunigung




Support: IOS, Chrome, FF

Feature Detection



Modernizr!

  • Erkennt vorhandene Features
  • CSS Klassen für Features
  • JS Objekt mit Features
  • Script-Loader für das Nachladen von Polyfills


Abgrenzung andere Apps



Was kann eine Web-App nicht?

  • Direkter Zugriff auf Adressbuch
  • Hintergrund-Dienste / Push-Services
  • Browser-Controls deaktivieren
  • Unbegrenzter Zugriff auf Speicher/SSD
  • Direkt ins OS integrieren (Live-Wallpaper o.ä.)
  • (Performance)
  • Zugriff auf spezielle Device Features

Hybrid-Apps



Meist Web-Apps mit erweiterter JavaScript API für Zugriff auf native Features.

  • Kann als Store-Paket verschnürt/angeboten werden.
  • Läuft meist in einem modifizierten Browser-Build.
  • Zugriff auf erweiterte Device-Features via JS.
  • Zugriff auf Native Plugins.

Native Apps




Tatsächlich in der jeweiligen Sprache des OS geschrieben. 
Rendering über native Elemente.

  • Android: Java, C++
  • IOS: Objective-C, C++
  • Windows Phone: C#, VB.NET

Zwischenwesen



Beispiel Titanium Appcelerator

  • Logik nach wie vor interpretiertes JavaScript
  • Rendering wahlweise über native Elemente
  • Styling über CSS-ähnliche Anweisungen
  • Noch besser ins OS integriert
  • Mehr performance


Einsatzgebiete reine Web-Apps



"Für alles was möglich ist"

  • Diverse Gadget-Apps
  • (Einfache) Spiele
  • Shop-Software / Kataloge
  • Info-Apps
  • Portal-Apps (News, ...)


Einsatzgebiete Hybrid-Apps



Folgende Anforderungen wären ein Grund für Hybrid-Apps:

  • Verwendung/Verkauf in den Stores
  • Höhere Performance
  • Zusätzliche Device-Features außerhalb von HTML5
  • Benutzer sollen Gefühl einer "echten" App haben

Einsatzgebiete Native Apps



Um native Apps kommt man in folgenden Fällen trotzdem nicht herum:

  • Noch mehr Performance nötig
  • Zugriff auf spezielle Features des Phone nötig
  • App als Hintergrundservice
  • App als OS-Plugin (z.B. Livewallpaper)


Oft reicht es aber auch den geforderten Teil als natives Plugin mit einer Hybrid-App zu verheiraten.

Überblick: Apps (1 / 2)





Von niedrig bis hoch: 
Features, Performance, Komplexität, Kosten?

Überblick Apps (2 / 2)



...Von niedrig bis hoch: 
Features, Performance, Komplexität, Kosten?


Komplexität und Kosten einer App haben nichts mit der verwendeten Technologie zu tun!


Ausnahme: Native muss (meist) für jede Plattform einzeln programmiert werden. Web- und HybridApps sind relativ plattformunabhängig.

Überblick Hybrid-/WebApp-Frameworks




Überblick über viele Frameworks inklusive Beispielcode:


http://propertycross.com


Phonegap



  • Entstanden 2009
  • 2011 von Adobe Systems aufgekauft
  • Apple approved
  • Seit 2012 Cloud-Build Service
  • Nutzt/basiert auf Apache Cordova (OpenSource)


Unterstützt nahezu alle mobilen Plattformen (Android, IOS, Windows, BlackBerry, ...)

Ludei: CocoonJS



Nicht ganz so bekannt, aber rockt!

  • Beschleunigter Canvas + WebGL Support!
  • Integrierter Support für Game Engines.




Intel's App Framework / Intel XDK



Wie Phonegap basierend auf Cordova, mit eigenem Cloud-Build, Debugger und Emulator.

Zusätzliche Features:
  • Facebook Login Button
  • Multitouch auf Android
  • OAuth
  • Erweiterete Audio Features
  • Beschleunigter (2D) Canvas


Echtes App-Feeling?



Features ok... Damit sich die App wirklich "echt" anfühlt, muss sie das Verhalten und Aussehen der nativen Apps möglichst gut nachahmen.

Mögliche Antworten:

  • Frameworks
    JQuery Mobile, Sencha Touch, ...

  • Responsive Design
    15:45 im großen Saal

JQuery Mobile



HTML5 basiertes UI-Framework auf Basis von JQuery und JQuery UI.

  • Einheitlicher Cross-Plattform-Look
  • Einfach erweiterbar







Sencha Touch



Umfassendes UI Framework.

  • Native Look
  • Eigenes Build-Tool oder via Cordova





Phonegap im Detail: Features



  • Accelerometer
  • Camera
  • File
  • Geolocation
  • Media
  • Network
  • Storage
  • Notifications (alert, sound, vibration)
  • Events
  • Contacts
  • Compass


+ Kontrolle über den Browser + Buttons (je nach OS)

API-Beispiel-Code



Zugriff auf die Kamera:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
}); 

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}   

API-Beispiel-Code



Anlegen eines neuen Kontaktes im Adressbuch:

var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";

Reagieren auf Events wie "Critical Battery status":

 window.addEventListener("batterycritical", alert("Please recharge!"), false);

Phonegap: Cloud-Service und Build



Via Phonegap Cloud build direkt aus dem Web. Keine SDK Installation nötig.

  • Eigene Dev-Keys hinzufügbar
  • Code wird direkt von Github aktualisiert
  • Mehrbenutzerfähig

Phonegap: Lokaler Build



Alternativ zum Cloud-Build auch klassisch via Commandozeile möglich:

  • SDKs müssen installiert sein!
  • Selbst zertifizieren mit XCode / Android Keytool Utility

Browser-Testing (Ripple)



Ripple-Emulator (Chrome Extension, Apache Incubator)

  • Zum Testen von Phonegap, Blackberry, im Browser...
  • Emuliert Device-Features
  • Debugging direkt im Browser



Alle Tests erfolgreich?



Ab in den Store! Einfach die fertig signierte Datei an den jeweiligen Store zur Überprüfung einreichen.


Nicht vergessen: Store-Richtlinien beachten (Apple!)

Tipps & Tricks



  • JSLint/JSHint
  • Unit-Testing
  • Make "professional" JavaScript!
  • JS Frameworks (Backbone, Require, Angular, ...)
  • CSS Framework (Sass / Less)
  • Auf das jeweilige OS anpassen
  • Frühzeitig zur Überprüfung submitten
  • Vorsicht mit dem nachladen von ausführbarem Code!

Chancen von Web-Apps



  • Vertraute Sprache für Web-Devs
  • Plattformübergreifend
  • Mobile Geräte bereits/bald performant genug
  • Zukunft: mehr Devicefeatures -> HTML 5

Risiken



  • Sicherheit: XSS!
    Siehe hierzu Johann-Peter Hartmanns Vortrag am Mittwoch:
    JavaScript-Security

  • Verharmlosung der Komplexität
    "Ist ja nur ein bisschen HTML und JS"

  • Fixes Featureset
    Evtl Probleme bei Erweiterung der App

Zeit für Fragen



Und falls die Zeit nicht reicht: Hier nochmal der Kontakt


Mail: me@brosi.me

Von der WebApp zum Store

By Johannes Brosi

Von der WebApp zum Store

Gehalten am 28.10.2013 auf der International PHP Conference 2013 / Webtech Conference 2013 in München.

  • 2,346