Mobile Apps for Web Developers
The path of a mobile app developer often begins with a
choice: develop for iOS, Android or Windows? It’s a choice that instantly
diminishes the size of your potential audience, but developers often hold their
nose and reluctantly make a decision. Those who need to reach all three app
stores, choose to rewrite the application for each platform.
Visual Studio enables you to have maximum reach while
achieving significant code re-use. With Xamarin, C# developers can share
business logic across iOS, Android, and Windows applications. With Apache
Cordova, web developers can achieve maximal code re-use by building
cross-platform mobile applications using HTML, CSS, and JavaScript.
In this post, we’ll take a close look at how you can use
Visual Studio’s extension for Multi-Device Hybrid App Development to build a
cross platform app using HTML, JS, and CSS. To follow along in the IDE:
•Download and install the extension on Visual Studio 2013
Pro Update 3, or…
•Try one of the trial VMs available on Azure.
Once you’ve installed the tools, create a project for
“Multi-Device Hybrid Apps.”
Access Device Capabilities on any Platform
Using the Same JS API
Before we explore the tools, let’s take a moment to look at
the architecture of a Cordova app. The application itself is implemented as an
HTML application (e.g. Single Page Application) hosted inside a webview control
(or on Windows, as a WWA) that gives your app access to native device APIs.
Most developers prefer to synchronize data with a server via RESTful web
services (e.g. Azure Mobile Services), but all file assets like HTML, CSS, JS,
and media are packaged with the application so that users can continue to use
the app offline.
To access native device capabilities (e.g. camera, contacts,
file system, accelerometer) from JavaScript, Cordova uses a construct called
plugins. Plugins typically encapsulate two components: native code to invoke
capabilities for each of the three platforms (i.e. Objective-C, Java and C#)
and a normalized JavaScript API available for your app to use.
To use the API, you make an asynchronous call from within
your JavaScript. The native code returns a response to the callback function.
In the example below, the camera plugin returns the URI of a photo pointing to
the file system on the mobile device.
// Retrieve image file location from the mobile
device photo library
function
getPhotoURI() {
navigator.camera.getPhoto(onPhotoSuccess, onPhotoFail, {
quality: 50,
destinationType:
destinationType.FILE_URI,
sourceType: pictureSource.PHOTOLIBRARY
});
}
//
Callback from successful Photo Library event
Designed to Converge with Web Standards
Cordova plugins are generally designed to expose
JavaScript APIs that will converge with web standards over time. The goal is
for the plugins to eventually evaporate leaving the implementations of the W3C
standards in their place. For example, the Web API for activating device
vibration, navigator.vibrate(time), is already implemented by Cordova, Chrome,
and Firefox. Over time all the mobile devices and browsers will use the same
API, thereby making plugins obsolete as a polyfill. The ultimate goal is for Cordova
to serve as a temporary bridge until the standard web platform supports the
device capability.
JavaScript or TypeScript: Your Choice
Once you get started, a large part of your time will be spent
writing code. Whether it’s HTML, CSS, JavaScript or TypeScript, we aim to
provide our developers with help in context for the task at hand. For example,
many developers depend on IntelliSense to avoid common syntax errors and
quickly explore new APIs. Would you like to know what native device
capabilities are available to your app? Visual Studio’s Tools for Apache
Cordova include IntelliSense support for common Cordova plugins using both
JavaScript and TypeScript.
If you write
a custom plugin, you might want to enable IntelliSense for your component as
well. To support the common Cordova plugin APIs, we use a JavaScript IntelliSense extension for the JavaScript editor. For TypeScript, we simply
wrote TypeScript d.ts files to describe each API. You can see the d.ts files in
the public home for open source d.ts files: DefinitelyTyped. Each d.ts file provides the meta-data necessary to provide rock-solid,
accurate IntelliSense for Cordova plugins without executing JavaScript code in
the background.
Three Ways to Preview Your App
To gain the
highest productivity benefit, most developers choose to use the same code - 95%
or more - amongst all deployment targets: iOS, Android, and Windows.
Since most
developers choose to deploy a single shared HTML/CSS/JS codebase to all
platforms, it’s important to be sure your apps look and behave as expected
across the platforms you care about. We made sure that previewing your app
would be as painless and efficient as possible by providing three options to
test your app: (1) a Chrome-based simulator called Ripple, (2) native emulators
provided by the platform vendors, and (3) deployment to an actual tethered
device.
Unless you’re an otherworldly developer who can get an app running
perfectly without ever running it, you’ll eventually need to deploy and test it
on a device or emulator for each platform. However, that’s not necessarily
where you want to start. Our general guidance is as follows:
- For basic
layout and early-stage debugging, use Ripple. Ripple is an
open-source simulator that runs inside Chrome. Visual Studio automatically
downloads and installs both Ripple and Chrome when you install our tools.
Because Ripple uses Google’s V8 engine and blink-based rendering, it is
ideal for simulating behavior on an iOS or Android device. Realistically,
there are only a small number of substantial rendering differences between
Chrome and IE11 these days, so it’s also a good proxy for Windows
platforms. It’s nice to do your early development in Ripple because, quite
frankly, it’s fast and familiar to web developers. Ripple benefits from
all the CPU resources of your desktop and thousands of tiny performance
optimizations designed to make desktop browsing snappy.
- For final
validation and full-fidelity debugging, use a device. As much as
we love to debug in the desktop browser, there are some minor, but
significant differences between it and mobile browsers. Unfortunately,
tiny differences in CSS rendering or JavaScript interpretation can have a
big impact, so it’s important to test your app on the real thing. The real
source of truth will always be the device. Using the native build systems
(i.e. Xcode, the Android and Windows SDKs), Visual Studio can build and
deploy to devices tethered to your dev machine via USB.
- If a device
isn’t available, use an emulator. Given the
range of devices and platform versions out there — especially Android
versions — it’s not always possible to have a complete library of test
devices. In our office, we keep a small library of representative devices
including: iPods running iOS7-8, a Samsung Galaxy running Android 4.0, a
Nexus 7 running Android 4.4, a Nokia 1520 running Windows Phone 8.1 and
our dev machines running Windows 8.1. For everything else, we use an
emulator.
Blog by Hemant Bhagwat
