WinJS 4.0 Released

This post was written by Josh Rennert, Program Manager, Web Apps & Frameworks team

We received great feedback and insight from our WinJS 4.0-Preview, released earlier this year. Now, the time has finally arrived. With the imminent release of Windows 10, we are proud to announce WinJS 4.0. You can pick up the latest version here.

In addition to Windows 10, WinJS 4.0 supports the latest versions of all your favorite browsers, including the new Microsoft Edge. We realize that many developers are more familiar with, and may prefer to use, other frameworks for various parts of their app. We have checked in wrappers for AngularJS, KnockoutJS, and ReactJS to our GitHub project. You can now create Windows or web applications using other web frameworks, while still having access to the rich set of controls that WinJS provides.

How can I get it?

WinJS 4.0 is available for download from a number of different sources. You can use a package manager—such as npm, Bower, and NuGet; you can use a CDN; you can even go to our GitHub repository directly and build your own custom version.

What’s new

For a complete list of changes from WinJS 3.0, check out the changelog on GitHub.

New features

The bulk of the feature additions were announced when we unveiled WinJS 4.0-Preview back in March, although, we have made quite a few bug fixes and improvements based on the feedback you have submitted. Here are some of the highlights:

SplitViewPaneTogglecontrol. Introduced in WinJS 4.0-Preview, the SplitView control enabled developers to easily implement the highly popular pane-style navigation pattern. The toggle button, on the other hand, was not so easily implemented. The SplitViewPaneToggle control will make it simple to bind the pane’s toggle action to the click of any button.

The SplitViewPaneToggle button is represented by the icon with three horizontal lines, an industry trend.

Pivot custom header areas. In order for an app to work across variable screen sizes, controls must properly scale and effectively use the extra, or lack of, real estate. The Pivot control was updated in WinJS 4.0-Preview to modify its header layout relative to the width of the control. If the header items are completely visible, the headers will remain static and appear in their indexed order. If the header items are clipped, the headers will assume their signature phone behavior.

When the Pivot control is sufficiently wide—on, say, a desktop—there is likely a great deal of wasted space in the header area. Thus, we have added two custom content areas on both sides of the header items. The implementation is the same as adding a header or footer to a ListView.

The left custom area is represented by the SplitViewPaneToggle button, and the right custom area is represented by the SearchBox.

There is no special logic applied to the two custom areas. As you resize the Pivot control, only the header items will shrink and grow accordingly. It is up to you as the developer to integrate any special resizing logic.

Hub visual refresh. Besides the font and layout adjustments, the most notable change for the Hub control is the addition of a “See more” link. Previously, if a section header was not set as static, a chevron would appear next to the section title. The chevron was meant to indicate an additional page navigation of some sort. Although, the symbol alone did not adequately suggest what action would take place if a user invoked the header. Thus, in WinJS 4.0, we have updated this chevron to a hyperlink, eliminating any ambiguity created by the symbol.

WinJS 3.0

WinJS 4.0

Cascading menus. Numerous improvements have been made to the Menu and Flyout controls, making the creation of cascading menus a breeze. No additional code changes are required. So long as the anchoring element is, or is contained by, a Menu or Flyout, the cascading behavior will be enabled automatically.

Show Menu 1

Breaking changes

The API surfaces of the AppBar and NavBar controls have been modified to reflect an update in nomenclature. Any members with the verbiage “show” and “hide” have been changed to use “open” and “close”, respectively. A handful of properties and methods were also removed. For a complete list of breaking changes, please visit our wiki page on GitHub.

Developing for the Universal Windows Platform and the web

Introduced in Windows 10, the Universal Windows Platform (UWP) allows your app to target any Windows 10 device—including phone, PC, tablet, Xbox, and HoloLens.

Windows 8.1 first introduced the idea of a universal app model. You could have one app that runs on both your phone and your PC. Behind the scenes, this was achieved by segmenting your solution into three projects: one for each form factor, and one for sharing common code and resources. With UWP, this converged model has progressed even further.

You can also create a Hosted Web App, which leverages your existing web site and infrastructure, and still allows access to the core platform features of the Windows Runtime. Using either packaged or hosted content, your app can run on a wide range of devices with screen sizes, anywhere from a small phone to a large television, all with just one project. When combined with Apache Cordova, not only can your app run on Windows 10 devices, but it can run natively on iOS and Android devices as well.

We have enriched our collection of UI controls for building Universal Windows apps. We introduced new controls—such as the SplitView, ToolBar, and Content Dialog—adapting to every screen and input type. We upgraded existing controls, such as the Pivot and AppBar, offering new ways to customize the viewing experience. Creating adaptive UIs has never been easier.

Styling HTML controls

WinJS 4.0 establishes a new way to style your HTML controls. Instead of styling all intrinsics by default, you must opt-in to styling for each element you create. This allows for: 1) more compatibility with other libraries; 2) easier CSS overrides; and 3) fewer side effects when you only want to consume a particular control. Visit our wiki page for complete details.

Yeoman generator

In the past, there has not been a fast and easy way to create web apps using WinJS from scratch. We have got you covered. Our team has developed a simple, easy-to-use Yeomangenerator, which allows you to produce the scaffolding for a web app in mere seconds. There are options to tailor your app for Cordova, AngularJS, or a combination of the two. We would love to hear your feedback as we continue to develop this tool moving forward.

npm install –g yo generator-winjs

mkdir my-app-project && cd $_

yo winjs

Platform detection

With such a vast matrix of potential form factors to support, we discourage the use of platform detection as your default method of abstraction. For instance, in the past, you could use the WinJS.Utilities.isPhone property to check whether or not your app was running on a phone device. Today, this API will return undefined.

There are two instances where you may want to use platform detection: 1) harnessing device capabilities and 2) tweaking app styles.

Harnessing device capabilities. It is not safe to assume that every platform will have all the capabilities your app requires. Even if they existed, with the ApplicationContentUriRules, your app may not have permission to access these features. Platform detection will not be able to pick up on these gaps. Feature detection allows your app to check if a particular capability exists on the device, with a gracious fallback if absent. In the example below, we will try and fire a toast notification using the Windows Runtime.

if (Windows && Windows.UI && Windows.UI.Notifications) { // TODO: Create a toast notification } else { // TODO: Create a fallback }

Tweaking app styles. Responsive design is something of a buzzword in today’s world. The idea is to create the optimal viewing experience for a wide range of devices by seamlessly adapting the layout and appearance of a website. This is now applicable when designing your Windows app as well. Combined with fluid grids and flexible images, media queries are a simple way to improve the viewing experience for different buckets of screen widths. In the example below, you can modify the styles for phones and tablets in either portrait or landscape orientations.

@media screen and (max-width: 1024px) { /* TODO: Modify styles for a tablet in landscape */ } @media screen and (max-width: 768px) { /* TODO: Modify styles for a tablet in portrait */ } @media screen and (max-width: 480px) { /* TODO: Modify styles for a phone in landscape */ } @media screen and (max-width: 320px) { /* TODO: Modify styles for a phone in portrait */ }

You could also replicate this logic in JavaScript and integrate more complex adaptations. For instance, you could modify the display mode of the pane in your SplitView control.

Remarks

Content Security Policy

Windows 10 instituted a new Content Security Policy (CSP) for Windows apps, which allows you to use popular JavaScript libraries alongside WinJS without returning a dynamic content error. For Windows 8.x apps, however, you should still use the JavaScript Dynamic Content shim.

The road ahead

WinJS would not be possible without your help. We are actively responding to all questions and contributions submitted to our GitHub repository. We encourage you to report an issue or file a pull request. We would love to hear what you think of WinJS 4.0.