Cross-Platform Mobile App Development Using the Meteor Framework
Today, the Internet is being accessed more via the mobile phone rather than desktop platforms. However, the multiplicity of devices and platforms makes app development on mobile phones a difficult and expensive task. The solution to this problem lies in u
There are so many platforms and operating systems for mobile phones available in the global market today that inter-device installation and the compatibility of mobile apps has turned into a huge challenge. Most of the Web based services for banking, billing, social media, education, games, administration, governance, etc, are available as mobile apps for different mobile platforms. So a prime challenge is to develop apps that can run on multiple mobile operating systems (OSs).
Different mobile OSs function on diverse programming paradigms with their own software development kits (SDKs) including Android, iOS, BlackBerry, Windows, MeeGo, Symbian, Tizen, Bada, webOS, Firefox OS, Palm OS,
Sailfish OS, ZenUI, MIUI, HTC Sense, LineageOS, EMUI, Cyanogen, and many others. All these operating systems have their own programming model, structure and architecture.
Portability as well as compatibility of mobile apps on all these operating systems is a challenge. In the current scenario, the development of a single mobile app that can run on all these operating systems is very expensive, because for each operating system there is a different programming language and scripting technology. A mobile app developed using the Android SDK cannot be executed on BlackBerry, Symbian or any other operating system. For this reason, there is a need to develop mobile apps using cross-platform programming approaches.
There are many programming languages and technologies that can be used to develop cross-platform mobile apps. These platforms have excellent features to help you code using the ‘Write once, use anywhere’ strategy, which means that the mobile app will work on all mobile devices irrespective of the OS and architecture. Developers are now creating apps that can be launched on any mobile OS without any compatibility and performance issues.
Phone Gap, Accelerator, Xamarin, Sencha Touch, Monocross, Codename One, Kony, Convertigo, Nativescript, RhoMobile, iFactr, FeedHenry, Cocos2d, Unity 3D, Corona, Qt, Alpha Anywhere 5App, etc, are all tools for crossplatform mobile app development.
Free and open source tools for cross-platform mobile app development
There are a number of platforms and technologies that help to develop cross-platform mobile apps, but many of them are proprietary. Thankfully, there are sufficient free and open source tools available, using which a customised mobile
app can be developed and deployed as per the functions and features required.
Some prominent open source tools for cross-platform app development are:
• Meteor
• Apache Cordova
• Appcelerator
• Qt
• Xamarin
In this article, we look at how to use the Meteor framework for developing apps.
Meteor
Meteor is a JavaScript based Web framework for mobile app development. Its URL is https://www.meteor.com, and the current version is 1.4.
Meteor or MeteorJS is a free and open source framework written in C, C++ and JavaScript. The source code repository of MeteorJS is available on https://github.com/meteor/meteor. The development of code for mobile apps can be done easily in the JavaScript programming model.
Meteor follows the reactive programming model, in which the client application/browser is not only used to display the data, but the reactions on real-time changes and updates are also done in parallel. Meteor escalates the performance of the mobile app as it works in real-time, by default.
Mobile apps for different OSs including Android, iOS and many others can be developed using MeteorOS. This framework has excellent features to integrate MongoDB for Big Data and high performance computing in mobile applications.
Installation of Meteor on Linux/OSX
To install Meteor on Linux/OSX, give the following command: $ curl https://install.meteor.com/ | sh
The above command performs the following tasks:
1. Connects with install.meteor.com.
2. Downloads the latest stable release of Meteor.
3. Installs the required Meteor version.
Installation of Meteor on Windows
The installation of Meteor in Windows is quite straightforward. Simply download the installer from https:// install.meteor.com/windows. The installation wizard will install the Meteor framework.
Once the MeteorJS framework is installed, the verification of the installed version can be done using the following command:
PathToMeteor\> meteor --version
The features of MeteorJS are:
Cross-platform native mobile app development. Generation of apps for multiple working environments including Web browsers and mobile platforms. Enormous packages are available for different types of functions and modules.
Integration of Meteor Galaxy for compatibility with the cloud.
The apps created using Meteor work in real-time, as default.
The programming structure of JavaScript is required for both client side as well as server side development.
Creating apps using Meteor
To create a new app in Meteor, the command meteor create is executed in the installation folder.
To create the app, run the meteor create command from the command prompt. Any name can be assigned to the app.
PathToMeteor>meteor create FirstMeteorApp
Running the app
In the app folder, the command meteor is executed as follows: FirstMeteorApp >meteor
Output
Started proxy.
Started MongoDB
Started you app.
App running at: http://localhost:3000/ Type Control-C twice to stop
The results of the app can be viewed on the Web browser at the URL http://localhost:3000/.
Tags and levels in Meteor
There are three tags in Meteor—head, body and template. These are used to integrate HTML and JavaScript.
MyMeteorApp.html
<head>
<title>MyMeteorApp</title> </head>
<body>
<h1>Meteor Programming</h1>
{{> myAppParagraph}}
</body>
<template name = “myAppParagraph”>
<p>{{mytext}}</p>
</template>
MyMeteorApp.js if (Meteor.isClient) {
// Code for Client-Side Template.myAppParagraph.helpers({
mytext: ‘Hello to All’
}); }
Using forms and getting dynamic user data
The form elements are created in the HTML page, as follows:
meteorForm.html
<head>
<title>meteorForm</title>
</head>
<body>
<div>
{{> myFormTemplate}}
</div>
</body>
<template name = “myFormTemplate “>
<form> Name <input type = “text” name = “UserForm”> <input type = “submit” value = “Click Here”> </form>
</template>
The JavaScript code is integrated with submit event, as shown below:
meteorForm.js if (Meteor.isClient) {
Template. myFormTemplate.events({
‘submit form’: function(event){ event.preventDefault(); var mytext= event.target. UserForm.value; console.log(mytext); event.target.UserForm.value = “”; } }); }
Sessions handling in Meteor
Sessions are used to store the data when the app is in use.
The validity of this data is traditionally up to the browsing of the app by the user. Once the user leaves the app, this data is removed with the destruction of the session.
In Meteor, sessions handling is easy to integrate using the session object and, finally, returning the stored data:
meteorSession.html
<head>
<title>meteorSession</title> </head>
<body>
<div>
{{> myMeteorTemplate}}
</div>
</body>
<template name = “myMeteorTemplate”> </template>
To store the data, the Session.set() method is used. The Session.get() method can be called to retrieve the stored data in the session, as follows:
meteorSession.js
if (Meteor.isClient) { var mySessionData = { mykey1: “ParameterValue1”, mykey2: “ParameterValue2” }
Session.set(‘myMeteorSession’, mySessionData); var mysessiondatalog = Session.get(‘myMeteorSession’); console.log(mysessiondatalog); }
On execution of the scripts, the log of stored data can be viewed:
Object{mykey1: “ParameterValue1”, mykey2: “ParameterValue2”}
Extending Meteor with smart packages
Meteor apps can be integrated with a number of APIs and smart packages to extend the existing features. Meteor smart packages can be downloaded with the related installation instructions from https://atmospherejs.com.
The main reason for adopting and working with MeteorJS is that developers can code the entire app in one language, which is JavaScript. While in other platforms the integration of multiple languages may be required, this is not an issue in Meteor. In addition, the apps developed in Meteor are in real-time and based on the reactive programming model, by default; so they work in high performance mode without any delays. A number of smart packages and modules are available with Meteor to integrate Google Apps, Facebook, Twitter and other platforms without any complexities.