Hybride App-Entwicklung mit Vue.js, Framework7 und GraphCMS
Das GraphCMS ist ein Decoupled CMS, welches mit GraphQL und allen modernen Javascript Frontendtechnologien wie Vue.js, Angular und React arbeitet.
Framework7 ist ein HTML5, CSS und Javascript Framework, welches die Erstellung von Benutzeroberflächen ermöglicht, die dem Look & Feel nativer Oberflächen sehr nahe kommen. Es gibt unzählige Komponenten, vom einfachen Button, über Media Listen, Accordions, Smart Selects, Modals, Popups, Sidepanels bis zu FAB’s.
Mitte bis Ende 2017 hatte ich das Glück an einer App-Entwicklung mitzuarbeiten und Framework7 (Version 1) kennenzulernen. Framework7 ist ein HTML5, CSS und Javascript Framework, welches die Erstellung von Benutzeroberflächen ermöglicht, die dem Look & Feel nativer Oberflächen sehr nahe kommen. Es gibt unzählige Komponenten, vom einfachen Button, über Media Listen, Accordions, Smart Selects, Modals, Popups, Sidepanels bis zu FAB’s (floating action buttons). Dazu kommen Funktionen wie Infinite Scroll, Preloading Animationen, Pull (Tap) to refresh, autocomplete Suchen in Listen und Lazy loading von Images. Framework7 ermöglicht einfache Transitions beim Seitenwechsel und für IOS werden Swipe Gestures unterstützt. Für Android Geräte bietet Framework7 ein Material Design Theme. Für IOS und Android müssen keine unterschiedlichen Apps entwickelt werden. Framework7 erkennt die Geräte und kann so das entsprechende CSS für IOS oder Android laden. Eine eigene JS DOM-Manipulations Bibliothek, hervorragende Caching Möglichkeiten und Ajax Requests sorgen für eine sehr gute Performance. Weitere JS Bibliotheken werden nicht benötigt, aber für komplexere Apps bietet Framework7 auch die Möglichkeit mit Vue.js oder React zu arbeiten. Um aus einer Framework7 Anwendung eine hybride App zu erstellen, wird noch Cordova/Phonegap, zur Compilierung der Sourcen, benötigt. Dies geht am einfachsten mit dem Online Service von Adobe: https://build.phonegap.com Nach der Registrierung gibt man Phonegap Build den Zugriff auf die Sources in einem Github Repository und wenig später steht eine IOS und/oder Android App zur Verfügung. Um mit Framework7 zu arbeiten kann man das Framework einfach hier - http://framework7.io/ - runterladen und muss nichts anderes tun als HTML schreiben. Nicht einmal ein Webserver wird benötigt. Komfortabler und professioneller geht die Entwicklung natürlich mit NPM und Webpack. Auf github finden sich einige Projekte, die genau das bieten. Ich habe aber keines gefunden, welches das Framework7, Vue.js, eine Phonegap Integration und die Anbindung an das GraphCMS ermöglicht. Wäre es nicht schön die Inhalte einer App mit einem CMS zu erstellen und zu pflegen? M.E. ist ein API-first CMS, wie das GraphCMS, die beste Möglichkeit um unterschiedliche Geräte mit Inhalt zu befüllen. Also habe ich beschlossen so ein Projekt selber zu erstellen. Von Scratch wäre mir das nicht möglich gewesen. Aber auf der Basis dieser zwei Projekte ist es mir gelungen: https://github.com/centrual/cordova-template-framework7-vue-webpack https://github.com/GraphCMS/graphcms-examples/tree/master/vue-apollo-blog Mein daraus entstandenes Projekt ist hier zu finden: https://github.com/capriosa/graphify/ Zur Installation muss das Github Projekt zunächst gecloned werden. Im entsprechenden Verzeichnis wird dann im Terminal einfach $ npm install aufgerufen. Danach kann ein lokaler Webserver mit Hot Module Replacing gestartet werden. $ cordova run browser -- --live-reload Das Projekt ist mit einem einfachen GraphCMS Content Model verbunden. Um mit eurem eigenen Content Model zu arbeiten müsste ihr in der main.js lediglich euren GraphCMS Endpoint eintragen. const GRAPHCMS_API = 'https://api.graphcms.com/simple/v1/XXXXXXXXXXXX'Und natürlich müsst ihr die GraphQL Queries in den Vue Komponenten entsprechend anpassen. Ihr könnt euch die App als Website hier - https://f7-phonegap-graphcms.netlify.com - anschauen. Viel Spaß!