Hybrid App Development with Framework7 and Hygraph

Guest Post by our fellow community member Meinolf Droste! Check out his website https://www.mdwp.de/ and Twitter.

During the last months I had the pleasure to help developing a hybrid app and get to know Framework7 (Version 1).

Framework7 is a HTML5, CSS and Javascript framework that allows creating mobile user interfaces with native-like look & feel. It offers a variety of components, ranging from simple buttons, media lists, accordions, smart selects, modals, popups to FAB's (floating action buttons).

Additionally, the framework provides functions to use infinite scrolling, pre load animations, pull to refresh, autocomplete for searches and image lazy loading.

Framework7 allows simple transitions when changing views and supports the native swipe gestures in iOS. The Android Material Design Theme is also supported.

The main benefit of Framework7's hybrid approach is that there is no need to develop different apps for iOS or Android. Framework7 recognizes which device the user is using and loads the according CSS to fit the native look.

Framework7's own JS DOM manipulation library, outstanding caching options and AJAX requests ensure excellent performance.

Additional JS libraries are not required, but the framework offers the possibility to work with React or Vue.js for more complex apps.

To finally build a hybrid app from the Framework7 application PhoneGap or Cordova is needed to compile the source. The easiest way of doing so is the online service from Adobe: https://build.phonegap.com/

After registration you need to grant Phonegap access to your Github repository with the source and the app will start building.

To start working with Framework7 you can download it here: http://framework7.io/ . All you have to do is write HTML, a webserver is not needed.

The development becomes a little more comfortable with npm and webpack. There are quite a few projects on Github that offer exactly that. Unfortunately, I couldn't find any that offer Framework7, Vue.js, a Phonegap integration and the integration of Hygraph.

Wouldn't it be nice to create and maintain the apps content inside a CMS?
In my opinion, an API-first CMS like Hygraph is the best option to bring content to different devices.

Because of the lack of CMS integrations in Framework7, I decided to build this myself. For me this wasn't possible from scratch so I used these projects as foundation:

• https://github.com/centrual/cordova-template-framework7-vue-webpack
• https://github.com/hygraph/hygraph-examples/tree/master/legacy/vue-apollo-blog

My resulting project can be found here: https://github.com/capriosa/graphify/

In order to install it, the Github repository has to be cloned first. Simply run $ npm install in the corresponding directory.

Afterwards, a local webserver with Hot-Module-Replacing can be started: $ cordova run browser -- --live-reload

The project is connected to a simple Hygraph content model. In order to work with your own Hygraph endpoint the following line in main.js has to be edited: const HYGRAPH_API = 'https://api.hygraph.com/simple/v1/XXXXXXXXXXXX'

Of course you also need to adjust the GraphQL queries inside the Vue components.

The app is available as website here: https://f7-phonegap-hygraph.netlify.com/. I will be constantly developing the app. The goal is to fill all Framework7 components with example data from Hygraph. Just like this - https://framework7.io/kitchen-sink/ - except for the static HTML.

Have fun!