The iPhone app market is booming, and it’s a great playground for developers to get involved in, either for profit or as a vital learning experience. Given the iPhone’s dominance in the smartphone market, coding for iPhone gives you instant access to almost one-third of the entire mobile market in the US – 31.4% in January 2017. While that market size means the potential for success is huge, it also means it’s a huge, well established and fast moving game, so creating high-quality code is vital if you’re going to stand out. Whether you’re an experienced or novice developer, the right tool can go a long way to helping you make the most of your strengths and create an app that takes advantage of the market gap you’re seeing, before it closes.
Choosing the right environment for developing iPhone apps is a huge step towards creating a great app at the right time. Cordova, also known as PhoneGap, and Appcelerator are popular platforms for creating hybrid mobile apps; while React Native allows you to develop a Native mobile application using Javascript with the look and feel of a mobile app developed using Java or Objective C.
When you’re choosing your platform, factors you may want to consider include:
- Whether you want to learn a specialized development environment, or if you’re more comfortable in an existing language – in which case Cordova may work well for you
- If you want to have a user experience that’s very bespoke and matches the user environment perfectly, or if you want to make an app that has its own feel – in which case React Native might be the best option
- If you want to work using an open-source platform that will continue to be accessible in future, with cloud integration – if this is the case, Appcelerator could be what you need.
Cordova
Cordova offers development freedom as Cordova uses the built-in mobile browser to run single page applications and then it wraps it in a thin native container to pass off the application as a Native App. So, the application could be written in Javascript, Angular or any other language and the application would continue to function inside the native container. This allows the developer great flexibility as Cordova does not impose the use of any particular technology. Thus, we can use anything from a package manager (NPM) or a web-bundler like Webpack to serve up our Javascript and stylesheets to the index file. An example of a simple index.html file for Cordova would look like this:
<html>
<head>
<title>My Cordova App</title>
</head>
<body>
<div id="Button">Tap me</div>
<script>
// Select our element
var element = document.getElementById('Button');
// Send an alert once it was tapped/clicked
element.addEventListener('click', function() {
alert('Any one there?');
});
</script>
</body>
</html>
This displays a message when someone taps on the screen.
React Native
React Native, although familiar to most web-developers, has some features that set it apart from Cordova. Primarily, React Native does not support HTML or CSS but the use of Javascript is extensive in this technology. All styles are made “in-line” and the default styling model is Flexbox.
React Native trades code-reusability and development ease for a more original user experience i.e React is used when it is important to have the user interface components behave exactly like the native elements of a system.
React Native manages the packaging and transpiling of the code itself. Its packager combines all the Javascript files into one large file and then serves it the JavaScript Core which is the JS engine for Apple.
An example of a React Native App with its most fundamental units is given below. It displays some text and pops out an alert saying “Hi, I’m Bob” when that text is tapped.
import { React } from 'react';
// Import React Native's components
import {
View,
Text,
AppRegistry,
TouchableOpacity,
} from 'react-native';
// Create an App component
const App = () => {
// Define our press handler
const onPress = () => alert('Hi,I’m Bob');
// Compose the components we are going to render
return (
<View>
<TouchableOpacity onPress={onPress} />
<Text>Press</Text>
</TouchableOpacity>
</View> ); };
Appcelerator
Appcelerator Titanium is an open-source cross-platform mobile application development tool. The mobile apps developed with Titanium are light-weight as compared to React Native.
Given below is a list of advantages that come with the use of Appcelerator Titanium.
- It uses Javascript, JQuery, HTML5 and CSS3 thus it reduces the learning curve for developers.
- It has a platform independent API which allows it to access even the most advanced features of modern devices.
- It now offers cloud computing services to allow the development of performance-oriented applications.
However, with all its benefits Appcelerators suffers from providing App Store purchasing functionalities as it uses Store Kit, a module which is fairly complex and difficult to understand and integrate.
Here’s an example code snippet of an Appecelerator application. It provides the functionality of a custom interface builder for the application.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="8191" systemVersion="15A284" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none"> <dependencies> <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/> </dependencies> <objects> <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/> <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/> <view contentMode="scaleToFill" id="iN0-l3-epB"> <rect key="frame" x="0.0" y="0.0" width="320" height="568"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <subviews> <slider opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="0.5" minValue="0.0" maxValue="1" id="b4f-Tp-2x6"> <rect key="frame" x="6" y="272" width="308" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> </slider> <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This is a label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="BOQ-D6-ihY"> <rect key="frame" x="4" y="211" width="312" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> <fontDescription key="fontDescription" type="system" pointSize="17"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label> <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" id="b7o-ck-0OD"> <rect key="frame" x="100" y="441" width="121" height="29"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> <segments> <segment title="First"/> <segment title="Second"/> </segments> </segmentedControl> <switch opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" on="YES" id="xHM-P2-y0n"> <rect key="frame" x="136" y="363" width="51" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> </switch> <stepper opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" maximumValue="100" id="MIa-IA-4Ka"> <rect key="frame" x="113" y="516" width="94" height="29"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> </stepper> <mapView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" mapType="standard" id="XQY-J3-Kbo"> <rect key="frame" x="49" y="46" width="240" height="128"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <animations/> </mapView> </subviews> <animations/> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> <point key="canvasLocation" x="539" y="231"/> </view> </objects> </document>
With so many technologies available for application development, the question of the better technology essentially boils down to one thing; the functional requirements of the application. If the look, feel and functionalities of an application are required to be native to IOS then React Native should be preferred. However, if code reusability, early development times and portability are needed, then cross-platform application development tools should be used.
