Mobile applications for web developers
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 at all three app stores, come to the need to rewrite the application for each platform.
Visual Studio allows you to maintain maximum user reach, while achieving significant code reuse. Using Xamarin C #, developers can support common business logic between iOS, Android, and Windows applications. Using Apache Cordova, web developers can achieve maximum code reuse by creating cross-platform HTML, CSS and JavaScript applications.
')
In this article, we will look in detail at 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:
After you have installed all the necessary tools, create a new project for “Multi-Device Hybrid Apps.”
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 one-page application ), hosted inside a WebView control (or as 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 via RESTful web services (for example, Azure Mobile Services ), but all files, for example, 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 device’s native capabilities (for example, camera, contracts, file system, accelerometer) from JavaScript, Cordova uses a plugin design. Plug-ins usually hide two components: native code to invoke the capabilities of each of the three platforms (for example, Objective-C, Java and C #) and the normalized JavaScript API available for use in your application.
To use the API, you make asynchronous requests inside your JS code. Native code returns the response to the callback function. In the example below, the camera plugin returns a photo URI pointing to the file system on the mobile device.
Cordova plug-ins are usually designed to expose such JavaScript APIs that will converge with web standards in the future. The goal is for plugins to ultimately rely on the implementation of W3C standards where they are. For example, the Web API for vibrating the device, navigator.vibrate (time), is already implemented in Cordova , Chrome and Firefox . Over time, all mobile devices and browsers will use the same API, thus making plugins obsolete and necessary in the form of layers for older platforms (like polyfill). The ultimate goal of Cordava is to serve as a temporary bridge until the web platform begins to support device capabilities.
As you begin to do something, much of your time will be devoted to writing code. Whether it is HTML, CSS, JavaScript or TypeScript, we want to provide our developers with contextual help for their current tasks. For example, many developers use IntelliSense (smart pods) to avoid common syntax errors and quickly use new APIs. Would you like to know what native device capabilities are available for your application. Visual Studio tools for Apache Cordova include IntelliSense support for Cordova core plugins when using both JavaScript and TypeScript.
If you are creating your own plugin, you may want to add IntelliSense support to your components. To support the Cordova core plugins API, we use the IntellliSense JavaScript extension for the JavaScript editor. For TypeScript, we simply wrote d.ts files in TypeScript to describe each API. You can find d.ts-files on the public page for open d.ts files: DefinitelyTyped . Each d.ts file provides the meta data needed to organize a complete and accurate IntelliSense for Cordova plug-ins without the need to run JavaScript code in the background.
To achieve the highest 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 to HTML / CSS / JS across all platforms, it is very important to make sure that your applications look and behave in the expected way across all platforms. We made sure that the application preview was as painful and as efficient as possible (as much as possible), providing you with three options for testing the application: 1) Chrome-based Ripple simulator, 2) native emulators provided by platform manufacturers, and 3) deployment on real devices.
Unless you're a magical developer who can make an application work perfectly, even without launching it, from time to time you will need to deploy the application and test it on a device or emulator for each platform. However, it is not necessary to start with this. Our general recommendation is:
For more information on the available preview options and their level of support for Android, iOS and Windows, please refer to our documentation .
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 your aid.
All debugging tools already familiar to developers of applications for the Windows Store are available to you, including the DOM Explorer, 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 .
If you haven't done so already, please download and install the tools or try one of our virtual machines in Azure .
Examples of applications that use the most popular libraries today: AngularJS , Backbone and WinJS + TypeScript .
As soon as you try, feel free to:
Until new meetings, successful programming!
Ryan J. Salva
Visual Studio allows you to maintain maximum user reach, while achieving significant code reuse. Using Xamarin C #, developers can support common business logic between iOS, Android, and Windows applications. Using Apache Cordova, web developers can achieve maximum code reuse by creating cross-platform HTML, CSS and JavaScript applications.
')
In this article, we will look in detail at 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:
- Download and install the extension for Visual Studio 2013 Pro Update 3, or ...
- Try one of the virtual machines available in Azure.
After you have installed all the necessary tools, create a new project for “Multi-Device Hybrid Apps.”
Access to 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 one-page application ), hosted inside a WebView control (or as 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 via RESTful web services (for example, Azure Mobile Services ), but all files, for example, 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 device’s native capabilities (for example, camera, contracts, file system, accelerometer) from JavaScript, Cordova uses a plugin design. Plug-ins usually hide two components: native code to invoke the capabilities of each of the three platforms (for example, Objective-C, Java and C #) and the normalized JavaScript API available for use in your application.
To use the API, you make asynchronous requests inside your JS code. Native code returns the response to the callback function. In the example below, the camera plugin 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 plug-ins are usually designed to expose such JavaScript APIs that will converge with web standards in the future. The goal is for plugins to ultimately rely on the implementation of W3C standards where they are. For example, the Web API for vibrating the device, navigator.vibrate (time), is already implemented in Cordova , Chrome and Firefox . Over time, all mobile devices and browsers will use the same API, thus making plugins obsolete and necessary in the form of layers for older platforms (like polyfill). The ultimate goal of Cordava is to serve as a temporary bridge until the web platform begins to support device capabilities.
Javascript or typeScript: you choose
As you begin to do something, much of your time will be devoted to writing code. Whether it is HTML, CSS, JavaScript or TypeScript, we want to provide our developers with contextual help for their current tasks. For example, many developers use IntelliSense (smart pods) to avoid common syntax errors and quickly use new APIs. Would you like to know what native device capabilities are available for your application. Visual Studio tools for Apache Cordova include IntelliSense support for Cordova core plugins when using both JavaScript and TypeScript.
If you are creating your own plugin, you may want to add IntelliSense support to your components. To support the Cordova core plugins API, we use the IntellliSense JavaScript extension for the JavaScript editor. For TypeScript, we simply wrote d.ts files in TypeScript to describe each API. You can find d.ts-files on the public page for open d.ts files: DefinitelyTyped . Each d.ts file provides the meta data needed to organize a complete and accurate IntelliSense for Cordova plug-ins without the need to run JavaScript code in the background.
Three ways to preview your application
To achieve the highest 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 to HTML / CSS / JS across all platforms, it is very important to make sure that your applications look and behave in the expected way across all platforms. We made sure that the application preview was as painful and as efficient as possible (as much as possible), providing you with three options for testing the application: 1) Chrome-based Ripple simulator, 2) native emulators provided by platform manufacturers, and 3) deployment on real devices.
Unless you're a magical developer who can make an application work perfectly, even without launching it, from time to time you will need to deploy the application and test it on a device or emulator for each platform. However, it is not necessary to start with this. Our general recommendation is:
- For basic appearance setup 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 between the rendering of Chrome and IE11 there are only a small number of significant differences, 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’s fast enough and familiar to web developers. Ripple relies on many of the advanced features of your computer's CPU and thousands of small optimizations made in the desktop browser.
- For final validation and full debugging, use the device. No matter how much we like debugging in the desktop browser, there are still small but important differences between it and mobile browsers. Unfortunately, minor differences in CSS rendering or JavaScript interpretations can have significant consequences, so it’s important to test your application on something real. The real source of truth will always be the device. Using native build systems (such as Xcode, SDK for Android and Windows), Visual Studio can build and deploy applications on devices connected to your machine via USB.
- 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 full set of devices for testing. In our office, we support a small collection of devices, including: iPods with iOS7-8, Samsung Galxy with Android 4.0, Nexus 7 with Android 4.4, Nokia 1520 with Windows Phone 8.1, and our machines for developing with Windows 8.1. For everything else, we use emulators.
For more information on the available preview options and their level of support for Android, iOS and Windows, please refer to our documentation .
Look for and correct mistakes 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 your aid.
All debugging tools already familiar to developers of applications for the Windows Store are available to you, including the DOM Explorer, 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 haven't done so already, please download and install the tools or try one of our virtual machines in Azure .
Examples of applications that use the most popular libraries today: AngularJS , Backbone and WinJS + TypeScript .
As soon as you try, feel free to:
- Send feedback to the grocery team by mail.
- Request help for a problem on StackOverflow using the multi-device-hybrid-apps tag.
- Vote for new features using UserVoice.
Until new meetings, successful programming!
Ryan J. Salva
useful links
Source: https://habr.com/ru/post/241089/
All Articles