MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

One thing we can see comparing with this the equivalent JavaScript code is that the C# await
keyword very much simplifies dealing with asynchronous methods—making them appear like they’re
synchronous. This is one potential advantage to writing code in a component! The other important
detail is to note the using statements around the streams. Streams, among other types, are disposable
(they have an IDisposable interface) and must be cleaned up after use or else files will remain open and
you’ll see access denied exceptions or other strange behaviors. The using statement encapsulates that
cleanup logic for you.
In any case, with this method now we need only a few lines of JavaScript to do the job:
PixelCruncherCS.Grayscale.convertGrayscaleFileAsync(imageFile).done(function (tempFile) {
if (tempFile != null) {
document.getElementById("image2").src = "ms-appdata:///temp/" + tempFile.name;
}
});
The line with the URI could be replaced with these as well:
var uri = URL.createObjectURL(tempFile, { oneTimeOnly: true });
document.getElementById("image2").src = uri;
Running tests with this form of image conversion, the app shows a much better response, so much so
that the progress ring that’s normally shown while the operation is running doesn’t even appear!
All this illustrates the final point of this whole exercise. If you’re looking for optimizations, think
beyond just the most computationally intensive operations, especially if it involves moving lots of data
around. As we’ve seen here, challenging our first assumptions can lead to a much better overall solution.
Projections into JavaScript
Already in this chapter we’ve seen some of the specific ways that a WinRT component is projected into
JavaScript. In this section I wanted to offer a fuller summary of how this world of WinRT looks from
JavaScript’s point of view.
Let’s start with naming. We’ve seen that a JavaScript app project must add a component as a
reference, at which point the component’s namespace becomes inherently available in JavaScript; no
other declarations are required. The namespace and the classes in the component just come straight
through into JavaScript. What does change, however, are the names of methods, properties, and events.
Although namespaces and class names are projected as they exist in the component, method and
property names (including members of struct and enum) are converted to camel casing: TestMethod
and TestProperty in the component become testMethod and testProperty in JavaScript. This casing
change can have some occasional odd side effects, as when the component’s name starts with two
capital letters such as UIProperty, which will come through as uIProperty.
746