Developing Bing Maps Trip Optimizer, a Windows Store app in JavaScript and C++
The articles in this part of the documentation describe how to use JavaScript and Visual C++ to create a Windows 8.x Store app named Bing Maps Trip Optimizer. Unlike a website, a Windows 8.x Store app that uses JavaScript is not deployed page-by-page from a web server. Instead, it's installed on a machine by a user. Like any other Windows app, a JavaScript Windows 8.x Store app has direct access to the underlying platform and can share information with other apps.
Use C++ in your JavaScript Windows 8.x Store app to fully harness the power of the computer. Bing Maps Trip Optimizer uses JavaScript to define the UI and the Parallel Patterns Library (PPL) in a Windows Runtime C++ component to perform computationally expensive algorithms in parallel on all available CPUs to improve overall performance. You can also use libraries such as C++ Accelerated Massive Parallelism (C++ AMP) to perform computationally intensive work on the graphics processing unit (GPU).
Note
To download the Windows 8.x Store version of the Bing Maps Trip Optimizer source code, see Bing Maps trip optimizer sample.
The Bing Maps Trip Optimizer app is based on existing code that uses HTML and JavaScript to define the UI and a C++ ActiveX control to perform the background processing. This part of the documentation also describes how we migrated the ActiveX version of the app to a Windows 8.x Store app and some of the considerations to make when you migrate existing JavaScript and ActiveX code to Windows 8.x Store app code. To download the ActiveX version of the source code, see Bing Maps Trip Optimizer.
Tip
When we converted the ActiveX version of Bing Maps Trip Optimizer to be a Windows 8.x Store app, we maintained the use of JavaScript and C++. However, if you were to create this app from scratch, you could use other languages. For example, you could use XAML to define your UI and the .NET Framework to perform the route computation. For information about how to choose the right language and technologies for your app, see Getting started with Windows Store apps. You can also create a mixed-language app that uses JavaScript and the .NET Framework. For information about this kind of app, see Creating Windows Runtime Components in C# and Visual Basic.
Although Bing Maps Trip Optimizer illustrates design patterns that we consider to be best practices for using JavaScript and C++ to create Windows 8.x Store apps, you can adapt many of the implementation details to fit your own practices and the unique requirements of the app you are developing. For example, the C++ part of the app uses the IXMLHTTPRequest2 interface to process HTTP requests. You can follow the same pattern in your app. When we consider a Bing Maps Trip Optimizer implementation to be essential for successful app development, we emphasize it in this documentation.
In this article
Introducing Bing Maps Trip Optimizer
Bing Maps Trip Optimizer computes the shortest route among a set of locations (this classic computing problem is also known as the traveling salesman problem). The traveling salesman problem is traditionally solved by using a brute-force technique: compute each possible route among all locations and choose the shortest. This problem becomes exponentially more difficult as you increase the number of locations. Because a brute-force approach might not solve larger problems in a reasonable time, Bing Maps Trip Optimizer uses a technique known as ant colony optimization algorithm to more quickly and efficiently approximate the shortest route.
The Bing Maps Trip Optimizer UI is written in HTML and JavaScript. The UI collects locations from the user and displays the shortest route among all locations on a Bing Maps AJAX control. The shortest route computation and the interaction with the Bing Maps Representational State Transfer (REST) API are written in C++. Smooth interoperability between languages is a key in the Windows Runtime because it enables you to combine the best features of each language into one application. In the case of Bing Maps Trip Optimizer, HTML and JavaScript define the UI and C++performs the more computationally-intensive operations.
.jpeg)
Although many Windows 8.x Store apps use a dark presentation theme to help extend battery life in mobile devices, we maintained the light presentation to more closely match the Bing Maps website. Maintaining the light theme also helps you compare the differences between the Windows 8.x Store and ActiveX versions of the app.
Note
The main goal of Bing Maps Trip Optimizer is to demonstrate how to interoperate between JavaScript and C++. We also wanted to show how to adapt existing code for use in a Windows 8.x Store app. Therefore, the UI does not conform to all of the user experience (UX) guidelines that make a great Windows 8.x Store app. Read Design case study: Website to Windows Store app to learn how to transform your website to create a truly rich user experience.
Prerequisites
Windows 8
Visual Studio 2012
Familiarity with JavaScript and C++ programming
Consider whether to read Developing Windows Store apps (JavaScript) if you are unfamiliar with how to use JavaScript in a Windows 8.x Store app. This walks you through the steps to create a complete but basic JavaScript Windows 8.x Store app.
For more information about how a JavaScript web app differs from a JavaScript Windows 8.x Store app that's written for the Windows Runtime, see Windows Store apps using JavaScript versus traditional web apps.
Who should read this documentation?
You might be interested in this sample and documentation if you want to write a Windows 8.x Store app in JavaScript and you also want to use C++ to:
Improve performance or perform computationally-intensive operations.
Access Windows operating system services that are not accessible through the Windows Runtime in the current version.
Reuse existing code that's already written and tested.
We hope that you use the principles and practices in this documentation to create your own JavaScript Windows 8.x Store app that also uses C++. A background or strong interest in C++ will help you get the most out of this documentation. If you don't have experience with C++, you can still benefit if you have experience with similar programming languages or the .NET Framework.
If you want a basic introduction about how to create a Windows Runtime component in C++ that's callable from a Windows 8.x Store app that's built by using JavaScript, see Creating Windows Runtime Components in C++.
What this documentation covers
The articles in this part of the documentation teach how to:
Use Visual Studio to create a JavaScript Windows 8.x Store app that references a C++ Windows Runtime component.
Separate JavaScript code into modules that reference the web and Windows Runtime components.
Create a C++ Windows Runtime component that performs computationally intensive operations.
Interoperate between JavaScript and C++.
Migrate code, for example, existing COM code, for use in a Windows 8.x Store app.
What this documentation doesn't cover
This documentation doesn't cover the following aspects of Windows 8.x Store app development:
Application design principles.
C++ or JavaScript programming basics.
In-depth details about the ant colony optimization algorithm.
How to troubleshoot behavior or performance issues in your app.
How to prepare your app for use in other locales.
How to certify your app and publish it to the Windows Store.
The focus of this app is on interoperability between JavaScript and C++. Therefore, we did not implement every feature that makes a great Windows 8.x Store app. One important feature that we did not implement is the ability to restore the app state when the user runs it after it is closed (for example, after rebooting). For an example that demonstrates this feature, see App activation and suspension sample.
The following resources may help you understand Windows 8.x Store app development.
Planning Windows Store apps
Provides considerations to keep in mind when you plan your Windows 8.x Store apps.Visual C++ Language Reference (C++/CX)
Describes the C++ programming model for creating Windows 8.x Store apps and components. Describes how native C++ can interop directly with languages such as JavaScript without the need for intermediate software layers.JavaScript Language Reference
Explains the Microsoft implementation of JavaScript, which complies with the ECMAScript 5th Edition language specification. The Microsoft implementation also provides additional features that are not included in the Ecma Standards.Quick Start: Debugging apps (JavaScript)
Provides an overview about how to debug JavaScript Windows 8.x Store apps.Defining app resources
Describes how to define app resources to improve maintainability and localization.1FF5B6DB-4761-482D-80C4-44CA99352BD3
Describes the steps that are required to publish an app to the Windows Store.
Next steps
We recommend that you read Overview of the Bing Maps Trip Optimizer sample for information about how to load and run the project and the overall application flow. The following table describes the articles in this part of the documentation so that you can more easily refer to them.
Related articles
Title |
Description |
|---|---|
Describes the fundamental characteristics of the Bing Maps Trip Optimizer project, for example, how it's created and structured, and how it's built. |
|
Describes how the JavaScript portion of the app is organized and how the local and web contexts communicate with each other. |
|
Describes the C++ component of the Bing Maps Trip Optimizer. |
|
Interoperating between JavaScript and C++ in the Bing Maps Trip Optimizer sample |
Describes how the JavaScript and C++ parts of the Bing Maps Trip Optimizer sample interoperate. |
Migrating existing code in the Bing Maps Trip Optimizer sample |
Highlights some of key guidelines that we followed when we migrated from the ActiveX version of Bing Maps Trip Optimizer to a Windows 8.x Store app. |