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:
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, 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 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 the Appcelerator Titanium.
However, with all its benefits Appcelerators suffers from providing App Store purchasing functionalities as it uses Store Kit, a module that is fairly complex and difficult to understand and integrate.
Here’s an example code snippet of an Appcelerator 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.
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
Watch video reviews for developer's libraries from ByteScout Software: PDF Extractor SDK Video Review: the demo of PDF Extractor SDK step-by-step from installation process, PDF Viewer GUI...
Q1. What is Blazor WebAssembly (WASM)? Microsoft presented Blazor WebAssembly as another way to deal with the use of the ASP.NET focus at the customer...