In einem vorherigen Blog-Beitrag bin ich auf einen Artikel zur hybriden App-Entwicklung eingegangen und habe Flynn vorgestellt: eine interne App, um unsere Bibliothek zu inventarisieren. Die Grundidee war, dass es mit einem Barcode-Scanner bequem ist, die ISBN eines Buches einzulesen und dann per Google Book-Suche die entsprechenden Details des Buches zu erhalten. Dabei wollten wir das Ganze schön schlank halten, aber dennoch die erfasste Bibliothek mit anderen Mitarbeitern in der Firma teilen. In diesem Beitrag steige ich nun etwas tiefer in die Technik ein und verate, welche Bibliotheken und Frameworks wir verwendet und was wir dabei gelernt haben.

Wir benutzen CouchDB, um unsere Daten zu speichern. Denn mit PouchDB steht eine bequeme Variante zur Verfügung, die sich wunderbar in AngularJS benutzen lässt. Die Authentifizierung erfolgt dabei via  Webserver:

Flynn Architektur

Als Framework für die App nutzen wir Ionic. Damit sind auch komplexere Apps mit Swipping etc. umzusetzen. Außerdem erhält man eine ansprechende Oberfläche:

Flynn Screenshot

Nachdem wir interne erste Prototypen ausprobiert und die ersten Bücher erfasst hatten, fiel uns schnell auf, dass die App mit einer größeren Anzahl an erfassten Büchern langsam wurde. Die Analysen im Browser förderten schnell das Problem zu Tage: Zuviele DOM-Elemente brachten gerade die mobilen Geräte ins Schwitzen:

Nun bietet Ionic genau dafür aber eine simple Lösung: Collection-Repeat ist eine Direktive, die nur die sichtbaren Elemente im DOM einbindet und somit spürbare Performance-Verbesserungen bringt. Außerdem haben wir die Bilderzeugung als WebWorker-Threads ausgelagert:

Die Bilder liegen auch in der lokalen Datenbank, um das Gefühl der nativen App auch bei Offline-Nutzung zu offerieren. Zusammenfassend lässt sich sagen, dass uns das Ergebnis dahingehend überrascht hat, wie weit man mit hybriden Apps im Allgemeinen und HTML5 im Besonderen kommt.

Das Repo liegt auf GitHub. Weitere technische Details siehe README.md.