WinJS 3.0 Shows Industry Shift Towards JavaScript

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