WinJS 3.0 Shows Industry Shift Towards JavaScript

winjs_header

WinJS started out as a technology that was specific to native Windows Store apps running on Windows 8, but shifted directions in the 3.0 release. The new release focuses on WinJS running everywhere. More on that in a bit.

This is big news as we’ve started to see this shift with other top-tier companies like Apple, which recently allowed developers to automate tasks using JavaScript in Yosemite. Even Telerik’s own NativeScript allows you to build native applications for iOS, Android and Windows Universal through JavaScript. Google allows you to use JavaScript to enhance your Chrome Extension and, of course, there’s the impact Apache Cordova. But this begs the question?

Why do we Care what Microsoft is Doing with WinJS?

Let’s take a quick look at what we’ve seen so far:

  • WinJS 1.0 – Allowed developers to build native Windows Store Apps for Windows 8 only.
  • WinJS 2.0 – Again, allowed developers to buid native Windows Store Apps that worked on both Windows 8.x and Windows Phone 8.x. They also added support for Xbox.
  • WinJS 3.0 – Broke these boundaries and allowed its use outside the Windows ecosystem.

WinJS 3.0 is centered around cross-browser and cross-platform support of desktop and mobile browsers.

In other words, WinJS 1.0 and 2.0 Apps were Created using Visual Studio:

visualstudio

And Deployed to the Windows Store:

thestore

WinJS 2.0 apps were tied to the Windows and Windows Phone App Stores.

With WinJS 3.0, They are created using your IDE of Choice.

webstorm

So, How Are They Built?

Pick your favorite package manager (Bower, NuGet, etc.), CDN reference, or download a zip off their Github page and you’re off and running.

I like Bower, so I simply typed:

bower install winjs

Everything is downloaded and ready to go including the light and dark CSS themes, the standard modern font and the required JavaScript:

insideofwebstorm

To demonstate the FlipView control, I would reference the base.js and ui.js files along with the CSS theme (either light or dark) and add the following div tags inside the body:

<div class="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="overlaidItemTemplate">
    <img class="image" data-win-bind="src: picture; alt: title" />
    <div class="overlay">
        <h2 class="ItemTitle" data-win-bind="textContent: title"></h2>
    </div>
</div>
</div>

<div id="simple_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-      options="{
    itemDataSource: DefaultData.bindingList.dataSource,
    itemTemplate: select('.simple_ItemTemplate')}">
</div>

Here you will see that we are using the templating support provided by WinJS and binding it with data that will be contained in our JavaScript file which looks like the following:

var array = [
    { type: "item", title: "Paris", picture: "images/1.jpg" },
    { type: "item", title: "Hong Kong", picture: "images/2.jpg" },
    { type: "item", title: "Barcelona", picture: "images/3.jpg" }
];
var bindingList = new WinJS.Binding.List(array);

WinJS.Namespace.define("DefaultData", {
  bindingList: bindingList,
  array: array
});
WinJS.UI.processAll();

We are initializing an array and loading it with a type, title and picture of a few people that work at Telerik. We bind the data to a WinJS namespace called DefaultData (that was used in our itemDataSource in the HTML code above) and finally call processAll().

Which produces this!

Wait… what? Is that what I think it is? Yep, that is WinJS 3.0 running in Safari on a Mac.

Other Familiar Places

Below we see a Hub app with a Windows navigation control running in Chrome on a Mac.

inchromebrowser

This is Important, People!

No longer is WinJS married to native Microsoft platforms. A divorce just happened and it wasn’t ugly. Microsoft just made their native JavaScript library available to anyone that wants to use it. You won’t achieve “Native Nirvana” with WinJS 3.0, but it clearly shows that Microsoft is blurring the line even further between what we know as native apps and web apps. It validates the importance that JavaScript on the desktop and it’s new home – off the desktop. No longer are native WinJS apps stuck on one platform or built with one IDE.

But it is more than Desktop Browsers…

They added a page to their Wiki that included browser support. I’ve included an image below to show you just how far the reach goes:

browsersupport

We now have access to everything from Windows to Mac to the three major phone platforms.

Regardless if you want to use WinJS 3.0 or Not…

This further facilitates the fact that we are moving more towards a unified standard – JavaScript (on the desktop or the web). You may not have a reason to use WinJS 3.0 in a web app, but the fact that Microsoft allows people to do this shows the importance of JavaScript going forward. We’ve heard this message from many industry experts such as Shawn Wildermuth with his excellent post titled, “It is time to learn JavaScript”, and seen a significant growth in top tier companies using it to drive their products forward. If you don’t care about WinJS 3.0, that is OK – just keep in mind JavaScript is now moving front and center to a technology that you should care about.

Paris image provided by Moyan Brenn
Hong Kong image provided by Peter Thoeny
Barcelona image provided by Moyan Brenn

Comments

  • Pingback: Dew Drop – September 30, 2014 (#1866) | Morning Dew()

  • MisterDOS

    As you point out, this is quite a momentous sea-change. And it speaks well for both the future of Microsoft and the future of JavaScript. As you know, Telerik makes a series of excellent HTML/JavaScript-based controls for WinJS – in your UI for Windows 8 product (and part of DevCraft). Is it reasonable to think that some/all of these controls might run on the (non-Windows 8) platforms that Microsoft supports with WinJS 3.0 (in the browser support image you included)? If this is not currently true, has there been any thought to when your WinJS controls might support these other platforms? (And of course I will want to know if this will be included in a DevCraft subscription that includes the Windows 8 controls.) Thanks – Jeremy

    • Hey Jeremy,

      Telerik operates in a dynamic environment, and things are subject to change at any point. WinJS 3.0 is something that we are currently investigating, but I have no details to share at this point. In the meantime, I’d suggest you take a look at the amazing web component library in Kendo UI (http://www.telerik.com/kendo-ui).

      Thanks,

      Michael

  • MisterDOS

    As you point out, this is quite a momentous sea-change. And it speaks well for both the future of Microsoft and the future of JavaScript. As you know, Telerik makes a series of excellent HTML/JavaScript-based controls for WinJS – in your UI for Windows 8 product (and part of DevCraft). Is it reasonable to think that some/all of these controls might run on the (non-Windows 8) platforms that Microsoft supports with WinJS 3.0 (in the browser support image you included)? If this is not currently true, has there been any thought to when your WinJS controls might support these other platforms? (And of course I will want to know if this will be included in a DevCraft subscription that includes the Windows 8 controls.) Thanks – Jeremy

    • Hey Jeremy,

      Telerik operates in a dynamic environment, and things are subject to change at any point. WinJS 3.0 is something that we are currently investigating, but I have no details to share at this point. In the meantime, I’d suggest you take a look at the amazing web component library in Kendo UI (http://www.telerik.com/kendo-ui).

      Thanks,

      Michael

    • Hey Jeremy,

      Telerik operates in a dynamic environment, and things are subject to change at any point. WinJS 3.0 is something that we are currently investigating, but I have no details to share at this point. In the meantime, I’d suggest you take a look at the amazing web component library in Kendo UI (http://www.telerik.com/kendo-ui).

      Thanks,

      Michael

  • MisterDOS

    As you point out, this is quite a momentous sea-change. And it speaks well for both the future of Microsoft and the future of JavaScript. As you know, Telerik makes a series of excellent HTML/JavaScript-based controls for WinJS – in your UI for Windows 8 product (and part of DevCraft). Is it reasonable to think that some/all of these controls might run on the (non-Windows 8) platforms that Microsoft supports with WinJS 3.0 (in the browser support image you included)? If this is not currently true, has there been any thought to when your WinJS controls might support these other platforms? (And of course I will want to know if this will be included in a DevCraft subscription that includes the Windows 8 controls.) Thanks – Jeremy

  • Pingback: Why WinJS is a glimpse of the future of development | Don Marges()

  • Pingback: From my reading list #17 – October 13th, 2014 | Pascal Laurin()

  • David A Larew

    I’m trying to port a Telerik based WinJS 2.0 Windows 8 app to a Windows Phone 8.1 app with the same or similar controls. Do you have any rec’s? I’ve been looking for a few days and can’t find any way to convert it.

    Thanks,

    David

  • Fallon

    WinJS will not likely impact JS devs globally, but it does have some nice controls which could be included in a project. In short, it’s well worth looking at.

    I’m a C# developer & lover, but I also like javascript, and agree that it’s well past time that we recognize that it’s a component of the most universal platform ever invented!