Mobile apps for web developers

Original author: Ryan J. Salva
  • Transfer
The path of a mobile application developer often begins with a choice: develop for iOS, Android or Windows? This choice instantly reduces the size of your potential audience, but developers are forced to make such decisions. Those who want to be present in all three app stores come to the need to rewrite the app for each platform.



Visual Studio allows you to maintain maximum user reach while achieving significant code reuse. With Xamarin, C # developers can support common business logic between iOS, Android, and Windows applications. With Apache Cordova, web developers can maximize code reuse by creating cross-platform HTML, CSS, and JavaScript applications.

In this article, we will look in detail how you can use the “Multi-Device Hybrid Apps” extension for Visual Studio, for the second scenario - creating cross-platform applications using web standards. To follow the article:


Once you have installed all the necessary tools, create a new project for “Multi-Device Hybrid Apps.”

image

Access device capabilities on any platform using the same JS API


Before we start exploring the tools, let's pause and take a look at the architecture of the Cordova application. The application itself is implemented as an HTML application (for example, as a single-page application ) hosted inside a WebView control (or as a WWA, Windows Web Application, on Windows), which gives your application access to the device’s native API. Most developers prefer to synchronize data with the server through RESTful web services (for example, Azure Mobile Services ), but all files, such as HTML, CSS, JS and media files are packaged into the application so that the user can continue to use the application offline .

To access the native capabilities of the device (for example, camera, contracts, file system, accelerometer) from JavaScript, Cordova uses a plug-in design. Plugins usually hide two components: native code for invoking the capabilities of each of the three platforms (for example, Objective-C, Java and C #) and a normalized JavaScript API that is available for use in your application.

image

To use the API, you make asynchronous requests inside your JS code. The native code returns a response to the callback function. In the example below, the camera plug-in returns a photo URI pointing to the file system on the mobile device.

// Запросить расположение файла изображения из фото-библиотеки мобильного устройства 
function getPhotoURI() { 
    navigator.camera.getPhoto(onPhotoSuccess, onPhotoFail, { 
        quality: 50, 
        destinationType: destinationType.FILE_URI, 
        sourceType: pictureSource.PHOTOLIBRARY 
    }); 
} 
// Функция обратного вызова в случае успешного собрытия от фото-библиотеки 
function onPhotoSuccess(imageURI) { 
    // Добавить img в div#album 
    var img = document.createElement('img'); 
    img.setAttribute('src', imageURI); 
    document.getElementById('album').appendChild(img); 
}


Designed based on web standards


Cordova plugins are typically designed to expose JavaScript APIs that will converge with web standards in the future. The goal is for plugins to ultimately rely on implementing W3C standards wherever they are. For example, the Web API for vibrating a device, navigator.vibrate (time), is already implemented in Cordova , Chrome, and Firefox . Over time, all mobile devices and browsers will use the same APIs, making plugins obsolete and necessary as layers for older platforms (like polyfill). Cordava's ultimate goal is to serve as a temporary bridge until the web platform begins to support device capabilities.

JavaScript or TypeScript: choose you


Once you start doing something, much of your time will be devoted to writing code. Whether it's HTML, CSS, JavaScript or TypeScript, we want to provide contextual help to our developers for their current tasks. For example, many developers use IntelliSense (smart jumping) to avoid common syntax errors and quickly use the new APIs. Would you like to know what native device features are available for your application. Visual Studio tools for Apache Cordova include IntelliSense support for core Cordova plugins using both JavaScript and TypeScript.

image

If you are creating your own plugin, you might want to add IntelliSense support for your components as well. To support the Cordova core plugin API, we useIntellliSense JavaScript extension for JavaScript editor. For TypeScript, we simply wrote TypeScript d.ts files to describe each API. You can find d.ts files on a public page for open d.ts files: DefinitelyTyped . Each d.ts file provides the meta-data necessary for organizing a holistic and accurate IntelliSense for Cordova plugins without the need for JavaScript code to execute in the background.

Three ways to preview your application


To achieve maximum productivity, most developers decide to use the same code - 95% or more - on all target platforms: iOS, Android and Windows.

Since most developers choose to distribute a single code on HTML / CSS / JS on all platforms, it is very important to make sure that your applications look and behave as expected on all platforms. We made sure that the application preview was as painless and as efficient as possible (as much as possible), giving you three options for testing the application: 1) Chrome-based Ripple simulator, 2) native emulators provided by platform manufacturers, and 3) deployment on real devices.

image

Unless you are a magical developer who can make an application work perfectly without even launching it, you will periodically need to deploy the application and test it on a device or emulator for each platform. However, it is not necessary to begin with this. Our general recommendation is:

  1. For basic setup of appearance and debugging in the early stages, use Ripple.Ripple is an open source simulator that runs inside Chrome. Visual Studio automatically downloads and installs Ripple and Chrome when you install development tools. Since Ripple uses Google’s V8 engine and blink-based rendering, it is ideal for simulating behavior on an iOS or Android device. Moreover, today there is only a small number of significant differences between the rendering of Chrome and IE11, so this is also a good proxy for the Windows platform. Generally speaking, it's cool that you can use Ripple in the early stages of development because it is fast enough and familiar to web developers. Ripple draws on many of the advanced features of your computer’s CPU and thousands of small optimizations made in the desktop browser.
  2. For final validation and full debugging, use the device. No matter how much we love debugging in a desktop browser, there are still small but important differences between it and mobile browsers. Unfortunately, minor differences in CSS rendering or interpretation of JavaScript can have significant consequences, so it’s important to test your application for something real. The real source of truth will always be the device. Using native build systems (for example, Xcode, SDK for Android and Windows), Visual Studio can build and deploy applications on devices connected to your machine via USB.
  3. If the device is not available, use an emulator. Given the variety of devices and platform versions that exist in nature - especially Android versions - it is not always possible to support a complete set of devices for testing. In our office, we support a small collection of devices, including: iPod with iOS7-8, Samsung Galxy with Android 4.0, Nexus 7 with Android 4.4, Nokia 1520 with Windows Phone 8.1 and our development machines with Windows 8.1. For everything else, we use emulators.


For more information on the available preview options and their support level for Android, iOS, and Windows, see our documentation .

Search and fix errors before your users do it.


Finally, in some cases, you will encounter complex and difficult to track errors in your JavaScript or TypeScript code. At such moments, your faithful friend, the debugger, will come to the rescue.

image

All debugging tools that are already familiar to developers of applications for the Windows Store are available to you, including the DOM explorer, the JavaScript console, breakpoints, watch values, local, local, Just My Code and other features. Other diagnostic tools are not yet available.

In our initial release, we focused on debugging support for Android 4.4 and the Windows Store. But after feedback from developers this summer, we also added support for Android 2.3.3 and higher. Debugging support for versions below Android 4.4 will require you to use a proxy for debugging, the most popular is jsHybugger .

Now try the tools!


If you have not already done so, please download and install the tools for yourself or try one of our virtual machines in Azure .

Examples of applications using the most popular libraries today: AngularJS , Backbone, and WinJS + TypeScript .

As soon as you try, feel free to:


Until next time, good programming!
Ryan J. salva

useful links



Also popular now: