Top 5 new WinJS features for Windows 8.1 developers

Visual Studio 2013 Preview and Windows 8.1 come with a new version of WinJS: WinJS 2.0. With many of the most used applications (Skype, Mail, Windows Store, News, etc.) on Windows 8.1 using WinJS, Microsoft clearly has a need to keep moving the framework forward. Paul Gusmorino outlined Microsoft’s big picture for the improvements in WinJS 2.0 as follows: Built for speed, Even More UX Patterns, Greater flexibility to differentiate, and Enhanced for end user efficiency. All of the changes introduced fit into one of these categories. I’ll highlight what I think are the top 5 new features and leave the rest of them for you to watch in the session.

Hub Control

The Hub control was my top new feature for XAML so it should come as no surprise that I’m a fan of its addition to WinJS as well. The Hub allows you to separate your content into sections of arbitrary content. It is similar in structure to a horizontally panning ListView with sections, but the difference is that each section can lay itself out however it wants. Also, the header for the section can be either interactive or non-interactive depending on whether there is more to see for that section or not. I really like the Hub Application template and I think it will help developers who have struggled to implement this style of application on their own given the current templates. You can read more about the Hub here.

Improved ListView Control

For WinJS 2.0, Microsoft has made some great improvements to the ListView control. Since the ListView is used in a lot of applications, it makes sense that they’ve focused a lot on it in this release. The first thing they improved was performance. This is part of the “built for speed” initiative. The ListView now has native performance. You should check out the session video to see it in action but suffice it to say the performance gains are amazing. In addition to the perf improvements, Microsoft also added some highly flexible layouts to the ListView including a vertically panning GridLayout, a Grouped ListLayout for headered lists, a CellSpanningLayout to create things like the Start screen with variable sized tiles, and a new IListLayout2 to create custom layouts easier. Keyboarding within the ListView has improved in all layouts. Drag-n-drop functionality is also now built-in at the system level for the WinJS ListView. You can read more about the ListView changes here.

Scheduler

One of the biggest potential performance boosters in WinJS 2.0 is the new Scheduler infrastructure. With the Scheduler, you can schedule work by passing a function to the Scheduler’s schedule method and setting the priority for the job. The object that is returned from this method implements the IJob interface has support for pausing, resuming, and canceling. Using the Scheduler, you can prioritize the tasks you need to have accomplished in your app and the most important things will get run first. This will help you create user interfaces that respond to users quickly and increase their effectiveness. You can read more about the Scheduler here.

Repeater Control

A common scenario in application building is to take a list of data and create UI based on the data once for each item in the list. For instance, consider the horizontal and vertical lists of weather data in the following image:

Using a Repeater, each weather item in the weather list is rendered using a template. You can use the Repeater to create custom lists and tables. You can think of the Repeater as a simplified version of the ListView for cases in which you do not need the robust features and overhead of the ListView. You can read more about the Repeater control here.

Binding template improvements

This is not a feature that is visible. This one is totally behind the scenes and it is amazing. Basically, someone on the team realized that one of the biggest bottlenecks in WinJS was the way in which Template objects were handled. In WinJS 1.0, Templates were processed in series one at a time. In WinJS 2.0, they are processed in parallel. This results in seriously improved performance and you don’t even have to change your code to take advantage of it. How cool is that?

Summary

This post only scratches the surface of the changes that have been introduced in WinJS 2.0. If you want to see the rest of the changes, I encourage you to watch Paul’s session. Just remember, if you do watch it please evaluate the session so Paul can get some valuable feedback.

Also, while you are trying out the new features in WinJS, please check out Infragistics Windows UI controls!

Contact

If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. I can also be reached via email at bschooley@infragistics.com.