Using Framework7 to Build Hybrid Mobile Apps for Android and iOS

1
9047

Mobile apps have become ubiquitous and multi-purpose, and hence we need tools that make it easier to build these apps. Framework7 is open source and enables the building of hybrid mobile apps with the native look and feel of the Android and iOS operating systems. The most important advantage of Framework7 is that developers can use it to build apps swiftly with Web technologies such as HTML, CSS and JavaScript.

It is rather difficult for a mobile app developer to manage separate codebases for different operating systems like Android and iOS. To address this challenge, hybrid mobile apps that require a single codebase have been introduced. This article introduces you to a popular framework to help build these types of apps, called Framework7.

Figure 1: Features and advantages of Framework7

Framework7 is open source and the hybrid mobile apps built with it have the native look and feel of the target operating systems — Android and iOS. Using Framework7, developers can build mobile apps with technologies such as HTML, CSS and JavaScript. The official documentation of Framework7 highlights freedom as its most important design philosophy.

Framework7: The advantages and features

The major advantages and features of Framework7 are listed below:

  • The ability to quickly build iOS and Android apps with HTML, CSS and JavaScript. The learning curve associated with Framework7 is very easy to manage.
  • The similarity in syntax with jQuery is another important advantage.
  • Framework7 can be used along with various other frameworks such as React, Angular, etc.
  • The apps built with Framework7 are faster and more responsive. For making the touch UI smoother, it has a built-in FastClick library.
  • Dynamic page loading with the help of a flexible router API makes the apps built with Framework7 fully dynamic.
  • The app development process is quicker with the availability of widgets and components.

Getting started with Framework7

Framework7 is a recent creation. The first version appeared in 2014 and Version 2 was released in February 2018.

The official documentation explains two ways of getting started with building apps with Framework7. The first approach is the separate installation of Framework7 through npm. Another method is to choose from the starter app templates [https://framework7.io/templates/].

Now, let us go through the steps to building a simple Android app.

  • Step 1: Navigate to the URL https://framework7.io/templates/ to fetch the official Framework7 templates.
  • Step 2: For the sake of simplicity, select the first template, Single View. Click on the Download option.
  • Step 3: Open a terminal on your system. Type the following command to clone the code using Git:
git clone https://github.com/framework7io /framework7-template-single-view my-app
  • Step 4: Install nodejs / npm, if it is not already installed. After installing npm, type the following command, to install dependencies:
npm install
  • Step 5: After successfully installing the required dependencies, you can run the app in the browser, with the following command:
npm run serve
Figure 2: A sample app built with Framework7

How the app file is organised can be easily understood. The folder ‘www’ carries a file named index.html. As the name indicates, this is an HTML file that is used to build the skeleton of the app. The ‘Pages’ folder contains other HTML layout files. The JS folder has the necessary JavaScript files.

The following code snippet shows portions of the index.html file. Some of the content has been truncated to reduce the print length.

<!DOCTYPE html>

<html>

<head>

<title>OSFY Demo</title>

<link rel=”stylesheet” href=”framework7/css/framework7.min.css”>

<link rel=”stylesheet” href=”css/icons.css”>

<link rel=”stylesheet” href=”css/app.css”>

</head>

<body>

<div class=”title sliding”>Open Source For You Demo</div>

<div class=”right”>

<a href=”#” class=”link icon-only panel-open” data-panel=”right”>

<i class=”icon f7-icons ios-only”>menu</i>

<i class=”icon material-icons md-only”>menu</i>

</a>

</div>

</div>

</div>

<!-- Toolbar-->

<div class=”toolbar”>

<div class=”toolbar-inner”>

<a href=”#” class=”link”>Left Link</a>

<a href=”#” class=”link”>Right Link</a>

</div>

</div>

<!-- Scrollable page content-->

<div class=”page-content”>

<div class=”block block-strong”>

<p>This is a Demo app built for Open Source For You Magazine Article</p>

</div>

<!-- Framework7 library -->

<script src=”framework7/js/framework7.min.js”></script>

<!-- App routes -->

<script src=”js/routes.js”></script>

<!-- Your custom app scripts -->

<script src=”js/app.js”></script>

</body>

</html>
Figure 3: UI components of Framework7

The contents modified in the index.html file are shown in grey colour for easier identification by the reader.

The contents of the app.js file are shown below:

var $$ = Dom7;

// Framework7 App main instance

var app = new Framework7({

root: ‘#app’, // App root element

id: ‘io.framework7.testapp’, // App bundle ID

name: ‘Framework7’, // App name

theme: ‘auto’, // Automatic theme detection

// App root data

data: function () {

return {

user: {

firstName: ‘OSFY’,

lastName: ‘Demo’,

},

};

},

// App root methods

methods: {

helloWorld: function () {

app.dialog.alert(‘Hello OSFY Reader!’);

},

},

// App routes

routes: routes,

});

// Init/Create main view

var mainView = app.views.create(‘.view-main’, {

url: ‘/’

});

It can be observed from the above code that the first line uses DOM7, which is a customised Document Object Model library that is high-performance in nature. The use of DOM7 is very similar to jQuery; so, as a programmer, you don’t need to learn new syntax. Detailed explanations regarding the functions and properties available for DOM7 are given at https://framework7.io/docs/dom7.html. A sample code segment is given below:

$$(‘.something’).on(‘click’, function (e) {

$$(this).addClass(‘hello’).attr(‘title’, ‘world’).insertAfter(‘.something-else’);

});

Framework7’s UI components

One of the important advantages of Framework7 is the availability of a wide range of user interface components. These make the development of apps simpler and swifter. Some of the UI components provided by Framework7 are listed below:

  • Button
  • Check box
  • Calendar
  • Contacts lists
  • Data table
  • Dialog
  • Message bar
  • Photo browser

For the complete list of components provided by Framework7, you can refer to the official documentation at https://framework7.io/docs/.

Using these UI components is very simple. A code segment to use a sample UI component called ‘card’ is shown below:

<div class="card">

<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>

</div>

<div class="card">

<div class="card-header">Card header</div>

<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>

<div class="card-footer">Card Footer</div>

</div>

<div class="card">

<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>

</div>

Figure 4: The Card UI component in Framework7

The output of the above code is shown in Figure 4.

Framework7’s request library

Framework7 has a useful request library to handle Ajax requests (XHR). A sample code snippet to use ‘request’ is shown below:

Framework7.request.get('somepage.html', function (data) {

console.log(data);

});

Device detection with Framework7

Framework7 has a device detection library, which can be used to get important information regarding devices and platforms.

if (Framework7.device.android) {

console.log(‘It is an Android device’);

}

Some of the properties of this library are shown in Table 1.

Table 1: Properties of the device detection library

PhoneGap/Cordova and Framework7

The official documentation provides certain PhoneGap templates to use with Framework7. To download, navigate to https://github.com/phonegap/phonegap-template-vue-f7-split-panel.

To build the app, use the following commands:

Step 1:

$phonegap create MyAppName --template phonegap-template-vue-f7-split-panel

Step 2:

$cd MyAppName

$npm install

Step 3: To run it in the browser or simulator:

$npm run dev

$phonegap platform add ios # For IOS simulator

$npm run cordova-run-ios

$phonegap platform add android # For Android emulator

$npm run cordova-run-android

Step 4: To make the production app, give the following command:

$npm run build

Framework7 makes the hybrid mobile app building process easier and more effective. The native look and feel it provides for iOS and Android is an important advantage. One of the limitations of Framework7 is that, in the present state, it supports only iOS and Android.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here