December 2015

Volume 30 Number 13

Modern Apps - What You Need to Know About Windows 10 App Development

By Rachel Appel | December 2015

Rachel AppelI thought I’d offer some insight into Windows 10 app development to help you understand and use it more efficiently. While some of the features covered here apply to the average user, it’s definitely a good idea for the developer to know about them, both as a user and for the benefit of the software the developer builds.

Visual Studio 2015

The IDE that most Microsoft developers use is Visual Studio. The first few things you’ll notice that have changed about Visual Studio 2015 include the new, simplified installer, as well as the ability to sign in using multiple accounts. This is great for the many developers who are consultants and full-time employees who need to use the corporate network during the day and publish apps to the store in the evenings.

There are impressive amounts of third-party tools available in the Visual Studio installation. Xamarin is available out of the box, as is all the software you need for serious cross-platform development. You must select the option to include it in the installation, though. In addition to C# with Xamarin, there are options to install Java for Android and C-based languages for both iOS and Android.

As usual, Visual Studio editions and licensing almost seem to require a Ph.D. to understand or remember which features belong to which editions. Fortunately, you can learn more and compare the Visual Studio 2015 offerings at bit.ly/1COm2fP.

Every new release of Visual Studio brings with it a new set of templates. In ASP.NET, templates now enable loosely coupled Web site building with dependency injection available throughout the entire ASP.NET MVC 6 app. Apps deployed to the Microsoft Store focus heavily on the Universal Windows Platform (UWP) app concept to enable developers to build apps with a foundational common code base for all Windows OSes and devices that run them. Use C#, Visual Basic, JavaScript or C++ to create UWP apps. There’s more on UWP apps later in this column.

Get an Edge up on the New Edge Browser

One of the most obvious and talked-about changes in Windows is the Edge browser, which sports a smooth and fast browsing experience. It’s quite apparent after using Edge for even a short time that it’s not your father’s Internet Explorer. To start, there have been thousands of improvements to the browsing experience (bit.ly/­1G49Cwe). The most obvious changes are the smooth face of Edge, a start page full of customizable content, and the overall look and feel. Figure 1 shows the MSDN Magazine homepage in the Edge browser on Windows 10.

The Edge Browser with Its Sleek, Smooth Experience
Figure 1 The Edge Browser with Its Sleek, Smooth Experience

First and foremost, the Edge browser is about interoperability.

Every browser needs one or more engines to process the HTML, CSS and JavaScript that comprise Web pages today. Therefore, the Edge team designed a new HTML processing engine called EdgeHTML. Interoperability provides several benefits including the ability to create HTML that displays well on a variety of devices and form factors while seamlessly developing cross-platform Web apps. The team has implemented 45 new HTML standards in EdgeHTML (bit.ly/1G49Cwe).

You’ll find the same Chakra engine from Internet Explorer. Chakra is extremely fast and performs well, so it makes sense to keep it and make some tweaks. Its speed is due to several factors, a major one being a technique called Graphics Processing Unit (GPU) offloading. Chakra offloads JIT'ing and most of the work for Garbage Collection to other CPUs. Once the Internet Explorer team had implemented this feature, the other browsers quickly started implementing it, as well. You can find details about the performance of Chakra in Edge at the Windows Blog (bit.ly/1X0Npt0).

You can dig into the Edge Developer Guide at bit.ly/1jwFYec, where you’ll find a full breakdown of how the F12 tools were revamped with efficient use in mind. Some of the new and exciting features are the ability to set XHR breakpoints and view pages in the DOM Explorer.

Universal Windows Platform

There is a significant amount of Web traffic on smartphones and tablets, though there are many desktop power Web surfers, too. Web sites and apps absolutely must support multiple devices and form factors nowadays.

Windows 10 is the true universal Windows OS family. Now you can build and maintain one code base, one package and one-submission-to-one-store for all Windows 10 devices. That means everything from phones, tablets and laptops to desktops, ultrabooks and servers. You name it, UWP apps can run on it.

Windows Notifications Are News to Me

Who doesn’t love the fact that your phone, computer, and other devices can alert and remind you about everything and anything, regardless of whether it’s important to you? Your neighbor’s friend’s sister’s 36th birthday? Got it! Now you can remind your users about all sorts of things related to your app. That’s if the user allows it. Some users turn off notifications. For those who like them, they can turn on Tips about Windows, as well as system-wide or app-specific notifications in the system settings.

There’s a new Action Center for your app’s notifications, and its icon is located in the bottom right of the screen in the Windows notification area (aka the system tray). Clicking on the notifications icon shows a modern flyout window containing touch-friendly tiles below a list of awaiting messages. Notifications from your app will display in the notification area, if the user approves, of course.

The code to create notifications essentially remains the same as it has before, where the notification displays and its overall aesthetics are controlled by Windows. Of course, you may customize the look and feel somewhat, by selecting one of many pre-defined notification templates. There are so many to choose from, there should be no problem finding one to meet your needs:

ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;
XmlDocument toastXml =
  ToastNotificationManager.GetTemplateContent(toastTemplate);

For more information, see the MSDN Library article, “Working with Tiles, Badges, and Toast Notifications (XAML),” at bit.ly/1LPogJw.

Talk to Cortana

Windows Phone introduced Cortana to the world. Cortana is the Microsoft speech-enabled digital assistant that lets you use voice commands to perform a variety of tasks such as scheduling appointments, getting directions and fetching the latest news and weather. Cortana can assist you in many daily activities. Such valuable and helpful software deserves an SDK, and in Windows 10, there are new features such as background voice commands and continuous dictation. You can even enable text-to-speech (TTS) capabilities with the Speech SDK. Using voice commands and speech recognition technology is an excellent way to build a higher-quality product with more than just a visual UI.

To build voice-enabled Windows apps, you create and register Voice Definition Files (.vcd) that list the commands, words and phrases available in your app, just as you would have in earlier versions of Windows and Visual Studio. Then you can write your app in C#, JavaScript or any language you want and let Cortana translate those commands into spoken form. The code is quite simple and looks something like that in Figure 2, which overrides the OnActivated event to detect which command has been issued so the app can perform an action.

Figure 2 The Contents of a .vcd File and Accompanying C# Code

<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.0">
  <CommandSet xml:lang="en-us">
    <CommandPrefix> Options </CommandPrefix>
    <Example> Show Options</Example>
    <Command Name="showOptions">
      <Example> Show options </Example>
      <ListenFor> [Show] {optionViews} </ListenFor>
      <Feedback> Showing {optionViews} </Feedback>
      <Navigate Target="/options.xaml"/>
    </Command>
    <PhraseList Label="optionViews">
      <Item> today's specials </Item>
      <Item> best sellers </Item>
    </PhraseList>
  </CommandSet>
  <!-- Other CommandSets for other languages -->
</VoiceCommands>
protected override void OnActivated(IActivatedEventArgs args)
  {
    if (args.Kind ==
      Windows.ApplicationModel.Activation.ActivationKind.VoiceCommand)
    {
      var commandArgs =
        args as Windows.ApplicationModel.Activation.VoiceCommandActivatedEventArgs;
        Windows.Media.SpeechRecognition.SpeechRecognitionResult
      speechRecognitionResult =
        commandArgs.Result;
      string voiceCommandName = speechRecognitionResult.RulePath[0];
      string textSpoken = speechRecognitionResult.Text;
      string navigationTarget =
        speechRecognitionResult.SemanticInterpretation.
        Properties["NavigationTarget"][0];
      switch (voiceCommandName)
      {
        case "showOptions":
          // EventReminder(textSpoken, navigationTarget);
          break;
        // default:
        // There is no match for the voice command name
      }
    }
  }

The Windows Store

The new Windows Store has something for everyone. For businesses, the Windows Store enables administrators to showcase apps for their employees. They can even distribute select apps from the Windows Store to deploy private line-of-business apps. Additionally, purchase orders are now an accepted payment method. In Windows 10, the store now offers subscriptions as an additional monetization option.

As part of the Store updates, the Windows 10 Microsoft Adver­tising SDK now offers support for video ads. Some marketing experts say that video and multimedia sell more than text, so now you can test that hypothesis in your app. Fortunately, because Microsoft announced installation tracking as a new feature, you have a way to do so.

Continuum

All these UWP app developments are not just about the cross-device experience, though. Continuum on Windows 10 detects when you want to switch between usage modes in multi-function devices. Consider Francine Flyer, a user on an airplane who has completed some work in desktop mode on a Surface, and now wants to watch a movie. Francine Flyer effortlessly switches between desktop and tablet mode by simply detaching the keyboard. Windows will notice and ask if she wants to switch to a more touch-friendly scenario. Flyer taps “Yes,” Windows moves into a touch-friendly mode and she enjoys her movie without a pesky keyboard or mouse getting in the way. As you can see, Continuum is great for Surfaces, hybrid or convertible laptops/tablets and any kind of multi-function device. Even if you have a laptop that has a touchscreen without convertible capabilities, it will still benefit when switching between modes. More than just the large devices can benefit from Continuum. Continuum for phones will let the user use your apps like desktop apps when connecting his phone to a wireless keyboard, mouse and screen. With so many phablet-sized devices around, Continuum will certainly be put to good use.

A New Start (Menu)

Definitely the most obvious change and probably the one most argued about is the Windows Start Menu. There are a few UI “troublemakers,” so to speak, in computing history, and the Windows Start Menu is certainly one of them. With every new version of Windows comes people who love any changes to the Start Menu, but just as many who don’t. When the modern experience was introduced in Windows 8, many hailed the new design, but many clung to the classic paradigms and resisted change. Now, in Windows 10, there are some very big changes to the Start Menu.

As it is now, moving the tiles to the Start Menu is a much better design than before, plus the workflow between the desktop and start page was a tiny bit turbulent. Combine that with Continuum, and we now have an enhanced and better Start Menu, with a Start Page only where it should be–on touch devices such as tablets, phones and so on. If you prefer keyboard shortcuts, remember that the Windows keyboard key has been around for a while. You can start typing the name of your app, or what you want to do, then Windows will find the app or perform the action you want.

Adapt to an Adaptive UX

Adaptive development on the Windows family of OSes is similar conceptually to responsive design for the Web. However, adaptive development targets entire families of devices, while responsive development targets screen-size ranges. In the last few years, it’s been impossible to keep up with the explosion of different devices on the market. There are some for whom buying a new smartphone causes analysis paralysis. Can you imagine if they had to develop software for all those devices? Fortunately, Windows 10 determines what device is hosting the app at run time, or how the user is using the app, and adjusts the UX accordingly. This means elements such as flyouts or other controls may be automatically resized, or a larger or smaller font applied, depending on the resolution. Before designing an adaptive solution, be sure to consult the MSDN Library article, “Device Primer for Universal Windows Platform (UWP) Apps,” at bit.ly/1MpspVh.

One Windows Platform

One of the showcase features for Windows 10 is the advent of the UWP app. A UWP app is one that you can deploy to all Windows OSes, all from a single code base! Usually this strategy only works for the back end and logic; however, it’s a much smoother process for building the UI, as well. That’s because rather than targeting different OSes and writing multiple versions of the same UI code, you target entire device families, so there’s less hassle in building a UI. However, if you only want to target one specific OS, you may do so. Otherwise, you will construct the UI so that it works well within a minimum and maximum size that device families tend to fit with Continuum. There are several API and control changes in XAML, as well as in the Windows Library for JavaScript (WinJS). XAML, in particular, sports a new Calendar control, along with new adaptive panel controls in which to put your calendar.

As a developer, you take advantage of a single solution in Visual Studio to deal with because of the underlying code base called the One Windows Platform. This single solution model enables the adaptive controls and technology to adjust to the various device families with little to no code.

Wrapping Up

Windows keeps reimagining the UX landscape to bring users what they want. There’s many new and exciting features you can build into your app, such as changes in the APIs and controls. It’s easy to forget speech is input, too, so don’t forget to consider Cortana for your next app. From the Windows Store to Visual Studio, Windows 10 delivers on a smooth development and UX.


Rachel Appel is a consultant, author, mentor and former Microsoft employee with more than 20 years of experience in the IT industry. She speaks at top industry conferences such as Visual Studio Live!, DevConnections, MIX and more. Her expertise lies within developing solutions that align business and technology focusing on the Microsoft dev stack and open Web. For more about Appel, visit her Web site at rachelappel.com.

Thanks to the following Microsoft technical expert for reviewing this article: Frank La Vigne