Getting started with Hilo (Windows Store apps using JavaScript and HTML)

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

From: Developing an end-to-end Windows Store app using JavaScript: Hilo

Previous page | Next page

Here we explain how to build and run the Hilo sample, how the source code is organized, and what tools and languages it uses.

Download

After you download the code, see the next section, Building and running the sample, for instructions.

Building and running the sample

Build the Hilo project as you would build a standard project.

  1. On the Microsoft Visual Studio menu bar, choose Build > Build Solution. This step compiles the code and also packages it for use as a Windows Store app. Warning  Hilo JavaScript was create with Microsoft Visual Studio 2012 and Windows 8. If you open it in a more recent version of Visual Studio, project migration is required.  
  2. After you build the solution, you must deploy it. On the menu bar, choose Build > Deploy Solution. Visual Studio also deploys the project when you run the app from the debugger.
  3. After you deploy the project, pick the Hilo tile to run the app. Alternatively, from Visual Studio, on the menu bar, choose Debug > Start Debugging. Make sure that Hilo is the startup project. When you run the app, the hub page appears.

You can run Hilo in any of the languages that it supports. Set the desired language and calendar in Control Panel. For example, if you set the preferred language to German and the system calendar (date, time, and number formats) to German before you start Hilo, the app will display German text and use the locale-specific calendar. Here's a screen shot of the year groups view localized for German.

The source code for Hilo includes localization for English (United States), German (Germany), and Japanese (Japan).

[Top]

Designing the UX

Hilo C++ and Hilo JavaScript use the same UX design. For more info on the UX for Hilo JavaScript, see the C++ topic Designing the UX. You might want to read Index of UX guidelines for Windows Store apps before you read the UX document.

For general info on designing Windows Store apps, see Planning Windows Store apps.

Projects and solution folders

The Hilo Visual Studio solution contains two projects: Hilo and Hilo.Specifications. The version of Hilo that contains the Hilo.Specifications project is available at patterns & practices: HiloJS: a Windows Store app using JavaScript.

The Hilo project uses Visual Studio solution folders to organize the source code files into these categories:

  • The References folder, created automatically, contains the Windows Library for JavaScript SDK reference.
  • The Hilo folder contains subfolders that represent a grouping of files by feature, like the Hilo\hub and the Hilo\Tiles folders. Each subfolder contains the HTML, CSS, and JavaScript files that are associated with a specific page or feature area.
  • The images folder contains the splash screen, the tile, and other images.
  • The strings folder contains subfolders named after supported locales. Each subfolder contains resource strings for the supported locales (in .resjson files).

The Hilo.Specifications project contains unit tests for Hilo. It shares code with the Hilo project and adds source files that contain unit tests.

You can reuse some of the components in Hilo with any app with little or no modification. We found that organizing files by feature was a helpful pattern. For your own app, you can adapt the organization and ideas that these files provide. When we consider a coding pattern to be especially applicable to other apps, we note that.

[Top]

Development tools and languages

Hilo is a Windows Store app that uses JavaScript. This combination isn't the only option, and a Hilo app in C++ is also available for download. You can write Windows Store apps in many ways, using the language of your choice.

With the changes in HTML, CSS, and JavaScript, JavaScript is now a great choice for a high-performing app such as Hilo that requires loading and manipulating lots of images. In Windows Store apps, you benefit automatically from improvements to the Internet Explorer 10 JavaScript engine (which you can read about here), and can take advantage of HTML5 features like running hardware-accelerated CSS animations. With JavaScript, you can also take advantage of the Internet Explorer F12 debugging tools that are now available in Visual Studio. And, of course, when you develop in HTML, CSS, and JavaScript, you can use the vast coding resources that are available for web-based apps.

When we considered which language to use for Hilo, we also asked these questions:

  • What kind of app did we want to build?   If you're creating a food, banking, or photo app, you might use HTML5/CSS/JavaScript or XAML with C#, C++, or Visual Basic because the Windows Runtime provides enough built-in controls and functionality to create these kinds of apps. But if you're creating a three-dimensional app or game and want to take full advantage of graphics hardware, you might choose C++ and DirectX.
  • What was our current skillset?   If you know web development technologies such as HTML, JavaScript, or CSS, then JavaScript might be a natural choice for your app.
  • What existing code could we use?   If you have existing code, algorithms, or libraries that work with Windows Store apps, you might be able to use that code. For example, if you have existing app logic written using jQuery, you might consider creating your Windows Store app with JavaScript. For info about differences between these technologies and Windows Store apps that you would need to know about, see HTML, CSS, and JavaScript features and differences and Windows Store apps using JavaScript versus traditional Web apps.

Tip  Apps written in JavaScript also support reusable Windows Runtime components built using C++, C#, or Visual Basic. For more info, see Creating Windows Runtime Components.

 

We chose Visual Studio Express as our environment to write, debug, and unit test code, along with Microsoft Test Manager to manage testing. We used Team Foundation Server to track planned work, manage bug reports, version source code, and automate builds. We also used Microsoft Expression Blend as a versatile CSS editor.

The document Get started with Windows Store apps page orients you to the language options for creating Windows Store apps.

Note  Regardless of which language you choose, you'll want to ensure that your app is fast and fluid to give your users the best possible experience. A fast and fluid app responds to user actions quickly, and with matching energy. The Windows Runtime enables this speed by providing asynchronous operations. Each programming language provides a way to implement these operations. See Async programming patterns and tips to learn more about how we used JavaScript to implement a fast and fluid UX.

 

[Top]