Mobile Apps for Web Developers

Visual Studio Blog

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 function onPhotoSuccess(imageURI) {   // Add img to div#album var img = document.createElement(‘img’); img.setAttribute(‘src’, imageURL); document.getElementById(‘album’).appendChild(img); }

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:

1. 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.
2. 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.
3. 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.

For more about the previewing options available and their level of support on Android, iOS, and Windows, check out our documentation.

Find and Fix Bugs Before Your Customers Do

Finally, there will be times when you have some tough or hard-to-find bugs in your JavaScript or TypeScript code. During these times, you will need to call in your trusty friend, the debugger.

You get all the debugging tools already familiar to Windows Store developers including the DOM Explorer, JavaScript Console, breakpoints, watches, locals, Just My Code, and more. Other diagnostic tools are not yet available.

In our initial release, we focused debugging support on Android 4.4 and Windows Store. But after hearing from developers like you, this summer we added debugging support for Android 2.3.3 and above. Debugging support for versions below Android 4.4 requires you to use a debug proxy, the most popular of which is jsHybugger.

That’s it. Now go try the tools!

If you haven’t already, please download and install the tools or try one of the trial VMs hosted in Azure. Sample apps are available using three of today’s popular frameworks: AngularJS, Backbone and WinJS + TypeScript. Once you get rolling:

• Send feedback to the product team via email.
• Ask for help with a problem via StackOverflow using the tag multi-device-hybrid-apps.
• Vote for a new feature via UserVoice.

Until next time, happy coding! Ryan J. Salva

Ryan J. Salva, Principle Program Manager, Visual Studio Client Tools team Twitter: @ryanjsalva Ryan is a Principal Program Manager working in the Visual Studio Client Tools team where he looks after HTML, CSS and JavaScript development. He comes from a 15 year career in web standards development & advocacy as an entrepreneur, developer and graphic designer. Today, he focuses primarily on mobile app development using web technologies and Apache Cordova.

Visual Studio Blog

Follow