YUI 3.7.3 – Windows 8 Apps and IE 10

By Eric FerraiuoloOctober 17th, 2012

Windows 8 will be released in 9 days (on October 26, 2012), and YUI is ready to power JavaScript-based Windows 8 apps!

With Windows 8, Microsoft is now enabling developers to use web technologies to build first-class apps for the Windows platform. These apps are also distributed through the Windows Store. We wanted to make sure YUI could be used to power Windows 8 apps, and today we are releasing YUI 3.7.3 which works excellently in all of the IE 10 runtimes in Windows 8, including the native Windows Runtime (which is used by Windows 8 apps.)

YUI 3.7.3 is now available on the Yahoo! CDN (and as a download). The YUI Library website has been updated with the latest documentation, including the addition of IE 10 and the Windows 8 runtimes to our Target Environments.

IE 10 Runtimes in Windows 8

Windows 8 has two main modes: Start screen, and Desktop. The Start screen mode (formerly known as Metro) is the new face of Windows, while the Desktop mode is the traditional interface. Both the Start screen and the Desktop have Internet Explorer apps powered by IE 10 runtimes, but Internet Explorer on the Start screen is more restrictive, and does not allow Flash, Silverlight, or ActiveX controls. It’s also important to note that the Start screen mode is the default GUI in Windows 8.

Beyond the Internet Explorer apps in Windows 8, there are two other IE 10 runtimes: WebView and the native Windows Runtime. WebViews can be used in Windows 8 apps, but this environment is the most restrictive of the four. The native Windows Runtime environment has also been tightened down for security, but it provides APIs which extend its functionality and this is the environment in which JavaScript-based Windows Store apps run.

We have more details on the four IE 10 runtimes in Windows 8 on our Wiki.

How We Quickly Added Support for Windows 8 and IE 10

We were very confident when we set out to make YUI work in Windows 8 and IE 10. We felt that we would be able to fully identify issues, fix them, and test the fixes in a short amount of time. We gave ourselves 10 days (which included weekends) to get the job done. In those 10 days, we’ve thoroughly tested YUI in all four IE 10 runtimes, and we’ve made the necessary changes in this release to make sure you can use YUI to power your Windows 8 apps. We were able to meet our strict schedule and add support for all these new environments very quickly because of YUI’s architecture.

We did not have to package a new version of YUI for these new Windows 8 runtime environments. Instead, we followed the same patterns we’ve used to make YUI run on mobile devices and on Node.js. We used YUI’s powerful conditional loading infrastructure, our gesture/input normalization layer, and standard environment normalization techniques to implement the changes which make YUI work in the IE 10 runtimes in Windows 8.

As an app developer you can write the same JavaScript code on top of YUI which will work on the server, desktop web, mobile web, and now in native Windows apps! This is a key advantage of using YUI.

Below are some changes in this release that we’d like to highlight:

Add XHR with CORS as a YQL transport

We added the yql-winjs module, which is automatically used when the yql module is loaded in the native Windows Runtime. One of the native Windows Runtime restrictions is not supporting JSONP, and our default implementation of our yql module uses JSONP as its transport. Since the native Windows Runtime supports CORS in XHR, and the YQL web service support CORS, we’re able to use XHR with CORS as a YQL transport.

Enhance Gesture Normalization

YUI has had a mouse/touch gesture normalization layer for over two years — we were the first major JavaScript library to be agnostic to device-specific user inputs. Microsoft has created gesture abstractions which are present in all of the IE 10 runtimes, and YUI’s gesture normalization layer will now leverage Microsoft’s new msPointer APIs, when they’re detected.

Note: The XHR with CORS transport is something we’ll be exploring as the YQL transport for other environments as well.

Support CSS3 Transitions Without Vendor Prefixes

The transition module has been improved to work both with and without vendor prefixes. Enabling Y.Transition to not require vendor prefixes means that IE 10 and Opera have gained support for native CSS3 Transitions.

This change also means that Y.App transitions are now supported in IE 10 and Opera as well.

Leverage Native XML Parsing APIs

We were able to retain YUI’s XML parsing features in modules like datatype-xml for Windows 8 apps by leveraging the Windows APIs in the native Windows Runtime.

Add Y.UA.winjs and Y.UA.touchEnabled

Y.UA.winjs provides a way for you to identify that your code is running in Windows 8 app on the native Windows Runtime. With this environment being restrictive, having this hook is very useful.

Y.UA.touchEnabled provides a hook to determine if the device supports touch-based gestures. The IE 10 runtimes in Windows 8 are the first environments to expose both touch and mouse based gestures to the browser.

Known Issues

After adding support for all of the IE 10 runtimes in Windows 8, there are a couple remaining known issues:

  • Any element that you wish to tap/flick on using event-tap or event-flick, requires the following CSS:

    #myNode { -ms-touch-action: none; }

    See the Event Gestures user guide for more details.

  • Editor will currently not function inside of the WinJS Windows 8 application environment. See the Rich Text Editor user guide for more details.

Bugs Filed with Microsoft

During our testing of YUI on these new IE 10 runtimes, we’ve found several bugs which we’ve reported to Microsoft. To view the contents of these bugs, you must first join the Internet Explorer Feedback Program.

Complete Changelog

For a complete list of changes in YUI 3.7.3, please refer to the change history rollup for this release.

We spent last week documenting and re-testing these changes across all of our target environments. Using Yeti, we are able to pump all 7,500+ of our unit tests to devices which are running a variety of browsers to make sure we did not introduce any regressions.

You should feel confident that upgrading to YUI 3.7.3 should be without issue, but if you find a bug, or want to suggest an enhancement, please don’t hesitate to file a ticket.

7 Comments

  1. Is there any user guide how to use YUI in native windows runtime (metro app)? Should I add all neened modules .js files into my Visual Studio project as resources? How YUI loader will load them?

  2. Petr: The suggested way is to add all the build files into the js/ folder inside your Visual Studio solution.

    This will allow you to use YUI().use(‘…’). The con of this method is that your application size will get larger, albeit not too much since the build files are all minified.

    The other option is to use the YUI Configurator (http://yuilibrary.com/yui/configurator/) to figure out what dependencies your app needs, and then download those script files locally, and include those into your project.

    I think unless app size is a major concern for you, the first method is probably preferred. I usually clone the yui3 repo inside my js/ folder, so I can pull in code when I need. I just exclude the src/ folder from my VS solution.

  3. Any plans to support NuGet (http://nuget.org/)?

  4. @Chad, I haven’t heard of NuGet, but after looking at it, it seems like we should. Thanks for the heads-up.

  5. [...] YUI 3.7.3 out the door, we now turn our focus towards benchmarking and improving performance, as well as preparation for [...]

  6. @eric while you look at NuGet, can you also add provide metadata file for YUI, so that intellisense works in Visual Studio?