Share via

Roadmap for Windows Runtime apps using JavaScript

  • 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 ]

Here are key resources to help you start developing Windows Runtime apps using JavaScript. (Note that this is by no means a comprehensive list of all the features or available resources.) This topic is designed for you to start from the Getting started section, but then skip around and learn about the app functionality that you're interested in. Bookmark this page and come back when you need to learn how to add new functionality to your app.

If you'd rather use another programming language, see:

Get started

These topics are a great intro to creating Windows Runtime apps using JavaScript:

Programming Windows Store apps with HTML, CSS, and JavaScript

This free, 17-chapter ebook provides comprehensive guidance for developing Windows Store apps using JavaScript. It contains a Quickstart section to give you immediate experience with the tools, the API, and some platform features, and then describes the rest the platform in detail.

Create a basic user interface

These topics cover the essential user interface for Windows Runtime apps.

Choosing the right UI surfaces Start by ensuring that your app uses the right surface at the right time.
Guidelines for user interaction Learn how to create an app that users can interact with in intuitive and immersive ways, no matter what device or input method they use.
Accessibility Learn how to make your app accessible to the widest possible audience, including people who have impairments or disabilities.
App bars The app bar presents navigation, commands, and tools to users.
Context menus Context menus display up to five commands that enable users to take immediate action that is relevant to what they are doing.
Controls - HTML Create controls and connect them to code.
Controls and styles - WinJS Use Windows Library for JavaScript controls and styles.
Layouts and views When you plan for different window sizes, your UI can elegantly reflow across whatever size screen it's on, no matter the screen orientation or user interaction view.
Navigation Navigate between pages or display content from other pages.
Pen and stylus input Enable digital ink functionality using a pointer device such as a pen or stylus.
Resources Create and manage app UI resources such as images and strings.
Tiles Create and update tiles.
Toast notifications Create and send toast notifications.
Touch input Create a touch-first experience.

 

Manage launch, suspend, and resume

To ensure that your user has a great experience with your app, consider what should happen as it is launched, suspended, and resumed.

AutoPlay Provide your app as an option when a user connects a device to their computer. This includes cameras, media players, USB thumb drives, and DVDs.
File activation Provide your app as an option to handle a file type.
Protocol activation Provide your app as an option to handle a protocol.
Splash screen The default splash screen displays when users launch your app, providing immediate feedback to users while your app initializes its resources.
Suspend/resume When you handle app suspension and resumption, users will have a better experience with your app. They can switch away from your app and return to find it right where they left off, as if the app had been running in the background.

 

Implement contracts

Contracts enable interaction between the operating system and one or more Windows Runtime apps.

File picker You can help users pick files from your app while they are using another app. Users gain freedom and flexibility. Apps increase their popularity by participating in file picker contracts.
Play To Use the Play To contract to enable users to easily stream audio, video, or images from their computer to devices in their home network.
Search You can add a search pane to your app so users can search your app's content and content from other apps as well. Apps that participate in the Search contract gain traffic and usage.
Settings You can implement the Settings contract so that users can access your app's settings from the Settings charm.
Sharing Great apps make it easy for users to share what they are doing with their friends and family. Apps that support the Sharing contract can automatically share content to and from any other app that also supports the Sharing contract.

 

Access data and content

You can retrieve RSS feeds and download and upload files.

Accessing and publishing syndicated content Publish, update, and remove syndicated feeds or feed items.
Data binding Data binding enables you to synchronize the elements of your app with different sources of data, including databases, files, and internal objects.
Transferring data in the background Initiate, pause, resume, report progress for, and cancel a file download operation.

 

Access files and folders

These topics demonstrate how to programmatically access data from the file system.

Accessing files with file pickers Show the file picker when users need to select a file to open.
Accessing files programmatically Use search queries to enumerate and access files in a folder, library, device, or network location.
Launch the default app for a file Launch the default app for a file type.
Reading a writing a file Create, write, and read files from the file system.

 

Connect with apps and people

You can create connected apps that create great experiences for your users.

Proximity and tapping Connect computers that are in close range with a simple tap gesture.
User contacts Enable users to access their contacts so they can share content, email, message each other, or interact in new ways.

 

Add animation and graphics

You can liven up your app with animations, transitions, and graphics.

Animating your UI Use the animation library to animate lists, transitions, pointers, and UI elements and surfaces.
Drawing to a canvas Use SVG and Canvas to add fast, lightweight vector graphics to your app.

 

Use multimedia

These sections describe how to add multimedia to your app.

Capture photos and videos Capture photos and videos in your app.
Play audio and video Play audio and video in your app.

 

Support devices

You can support a number of devices in your app. Motion and orientation sensors let your app respond to movement. Light sensors let your app respond to changes in ambient light. Geolocation lets your app respond to the user's location.

Enumerating devices Enumerate devices by the functionality they provide.
Accelerometers Use an accelerometer to detect changes in movement on one or two axes.
Gyrometers Use a gyrometer to detect changes in orientation and rate of rotation. Gyrometers and accelerometers work together as game controllers.
Inclinometers Use an inclinometer to detect changes in movement on the X, Y, and Z axes.
Light sensors Use a light sensor to detect and respond to changes in ambient light.
Geolocation Detect the user's geographic location.
Printers Use print capabilities to improve the print experience for the user.
Removable storage Access content on media and storage devices, such as Windows Portable Devices (WPD), Media Transport Protocol (MTP) devices, and Mass Storage Class (MSC) devices.

 

Debug and test apps

Run apps from Visual Studio Run apps on local machine, simulator, or remote device.
Start a debugging session Configure and start debugging sessions.
Debugger navigation Use the Visual Studio debugger to debug apps.
Debug JavaScript apps Use VS tools to debug HTML, CSS, and JavaScript code.
Analyze app performance Use Visual Studio profiling tools for JavaScript.
Analyze memory usage Use the JavaScript Memory Analyzer to help find memory leaks.

 

Guidelines and best practices

Design inspiration Here are some articles that show examples of good design for various categories of apps (for example games, productivity apps, news apps, and so on).
Index of UX guidelines for Windows Runtime apps Use this resource to find best practices for a variety of specific design implementations and features like file pickers, SemanticZoom and so on.
Performance best practices for Windows Store apps using JavaScript Here are some concepts and guidelines to consider to ensure that your app performs well on your users' computers.
Guidelines and checklist for accessibility Describes the guidelines that you should follow if you want to declare that your app is accessible, as part of the Windows Store submission process.

 

HTML/CSS for Windows Store apps

Windows API for Windows Store apps

Packaging apps