Rant about using Window 8 for portable HTML5 apps

HTML 5 is a buzzword for portable apps, but Windows 8 is really way for Windows people who like HTML CSS and JavaScript to make wizzy iPhone/Windows-Phone looking apps. So it's more a way of moving generic web app people to do cool stuff on windows. So says this rant...



http://bbzippo.wordpress.com/2011/11/20/the-place-of-html5-in-windows-8/
The place of HTML5 in Windows 8

leave a comment »

First, a rant. “HTML5” is a buzzword. When you hear people talk about “HTML5”, what they talk about is:
Canvas and WebGL, Plugin-free video, Excessive JavaScript, CSS3, HTML5
Most people don’t care about business app development. They mostly get excited about the ability to present graphics and video and to program simple games without plugins like Flash or Silverlight.
And those who do care about business app development got excited when they heard from Microsoft that HTML5 will be the language of choice in the WinRT (Metro App) framework. Well, people always get excited when someone promises them PORTABILITY. They just can’t stop believing in the Portability Myth.
Folks,
PORTABILITY DOES NOT EXIST. 
In particular, HTML5 in Windows 8 will NOT be a tool for developing portable applications. In fact, HTML5 is NOT going to be a Windows 8 app development tool at all. Take a look: http://msdn.microsoft.com/en-us/library/windows/apps/br229565(v=VS.85).aspx . Do you see “HTML5” mentioned anywhere in the documentation? Is this HTML5?:

    

Folks,
The so called “HTML5 applications” on Windows 8 will in fact be developed using JavaScript, PROPRIETARY HTML EXTENSIONS that will allow you to use the WinRT PROPRIETARY controls and APIs, and some CSS3 for layouts (although you will mostly be using PROPRIETARY layout containers).
So don’t get excited about portability.
In fact, it’s going to be much easier to port applications between WinRT XAML, Silverlight and WPF than between WinRT “Html5” and in-browser Html5.
MS is introducing and hyping HTML5 only to attract developers who are used to JavaScript/DOM/CSS coding.

Look at it another way, Apple forces you to use this nutty Objective -C or worse, OPENGL to do a cool app on their phones and tablets. Their stuff isn't portable either.

Microsoft is giving Web geeks a way to do them based on beloved html css and javascript standards. So if that's your cup of tea instead of C# or C++, then have at it.

Magenic assesses the Windows 8 Platform

see http://magenic.com/Portfolio/WhitePaperWindows8DevelopmentPlatform.aspx

They have an interesting overview of Windows 8.

I liked this contrast of the "back to the future" comparison. Apps that use the full screen are the way PC applications used to work, and the way games work that take over the entire screen. In those days, you had to use hack "switchers" to get from one screen to another without the "chrome" gizmos that are on the edges of most standard windows since the Xerox Altos days that first defined multiple windows on a desktop:

Metro Style vs. Traditional Windows Applications

WinRT/Metro style applications differ from the traditional“Windows” look by eliminating the Windows “chrome” such as frames, window borders, control corners, etc. in favor a full screen, immersive experience. Metro style applications are intended to leverage asynchronous features in the UI controls and languages to provide a very “fast and fluid” interface.

Figure 1. Traditional Windows application.

Figure 1 is an example of a traditional Windows application. Notice the following UI elements:

• Title bar with control corners
• Ribbon/toolbar with many controls
• Visual scrollbar controls
• Status bar with information
• Busy visual appearance
• Window borders even when full screen

Figure 2. WinRT/Metro style application.

Figure 2 shows a typical Metro style application. Notice the following differences:

• The page is full screen.
• The page is “chrome” free.
• Visual display is not cluttered, and is easy to read and understand.
• There are no large scroll bars. Instead, there are visual clues that there is more to the right (a well-written Metro style application only scrolls in the “natural” direction – in this case left and right).
• The entire experience is “touch ready,” but works with a keyboard and mouse equally well (e.g. touch is a first class citizen). Designing for touch will support mouse and keyboard in most cases.

Here they note that there is new support for C++ and Html5/Javascript, and that Flash and Silverlight won't work in the new browser

    The .NET, C++, and HTML5 application models are restricted to the WinRT API and functionality allowed within the WinRT security sandbox. The browser that runs in WinRT does not allow plug-ins, so custom toolbars, Flash, and Silverlight are all off limits.

The last part addresses whether you want to use Windows 8 as a smart client strategy (this is essentially a Microsoft answer to doing an IOS iPhone iPad type app on a windows tablet or computer), and how you can use Silverlight or WPF to leverage porting what you know now.


see http://magenic.com/Portfolio/WhitePaperWindows8DevelopmentPlatform.aspx

No WinPhone 7 Apps Left Behind: Why Not Run Some WP7 Apps on Win 8 Tablets?

[Tech - Software Blog]

see http://www.imaginativeuniversal.com/blog/post/2011/11/12/WinRT-Wishlist-Live-Tiles-for-e2809cClassice2809d-Apps.aspx

This fellow has a good suggestion, and comments on the "death of silverlight" which is the heart of windows phone apps:

No Phone App Left Behind on Win8: A Proposal

November12

by James Ashley12. November 2011 14:06

...  The Windows Phone Marketplace has tens of thousands of apps that should be leveraged to provide this content.  The main barrier to this is that the development stacks for Windows Phone and Windows 8 are significantly different.  A simple solution to bridge this gap is to enable Metro Tiles for Silverlight apps running in “classic” mode – something not currently easy to do on the Windows 8 platform.  Here is the background.
There has recently been a revival of chatter about the death of Silverlight revolving around the notion that Silverlight 5 will be the last version of the platform we are likely to see: http://www.zdnet.com/blog/microsoft/will-there-be-a-silverlight-6-and-does-it-matter/11180?tag=search-results-rivers;item2

... 
The main argument against the claims that Silverlight is dead concern the fact that it is currently still at the heart of Windows Phone development.  If MinWin from the Windows 8 OS for tablets replaces the WinCE kernel on Windows Phones, however, what will be the fate of Silverlight then?

see http://www.imaginativeuniversal.com/blog/post/2011/11/12/WinRT-Wishlist-Live-Tiles-for-e2809cClassice2809d-Apps.aspx

Buildi The Default Nothing Javascript Windows 8 Metro App

[Tech - Software Blog]

If you haven't done the first JavaScript Metro app, you could see Microsoft's official starting line:
Building your first Windows Metro style app with JavaScript.

But upon looking at it, it actually jumps in and tries to do some pretty wizzy stuff you don't need to know about at the start.  I like the universal method of just walking up to Visual Studio File New the "nothing" project and hitting "Debug" and see what happens.

Start up the Visual Studio Developer's Preview (on the system I have I had to search for "devenv.exe" and put a shortcut up on the taskbar)

File - New Project -
Other Languages - JavaScript - Blank Application
Name: Hello
[OK]

It puts you into "default.html", it's like the default.html homepage on a ASP.NET website.

DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Hellotitle>



<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js">script>

<script src="//Microsoft.WinJS.0.6/js/wwaapp.js">script>

<script src="//Microsoft.WinJS.0.6/js/ui.js">script>

<script src="//Microsoft.WinJS.0.6/js/binding.js">script>

<script src="//Microsoft.WinJS.0.6/js/res.js">script>

<script src="//Microsoft.WinJS.0.6/js/animations.js">script>

<script src="//Microsoft.WinJS.0.6/js/controls.js">script>

<script src="//Microsoft.WinJS.0.6/js/uicollections.js">script>



<link href="/css/default.css" rel="stylesheet">

<script src="/js/default.js">script>

head>

<body>

<p>Content goes herep>

body>

html>

What is different is all of the WinJS references for WinJS Metro javascript and css goodies. The css is placed in the /css directory, /js is for javascript and //Microsoft... looks like a "system" library to me. All this library stuff is up in the header.

//Microsoft.WinJS.0.6/js/ looks like a standard js library
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js">script>

The body is what looks like the usual html:

<body>

<p>Content goes herep>

body>


Hit Menu - Debug - Start Debugging

To see what is going on, you can hit alt-tab to see the screen or you can hit the windows key, and see the tile that's up for "Hello"

and the screen just has a black screen saying  "content goes here" in the upper left corner. Whoopee.


The official start up app actually tries to do some pretty advanced stuff. A much better next-to-trivial app is the one here:
http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx

Hello Windows Metro style apps
Building Metro style apps for Windows is easy, because you use the skills you already have and can reuse the code assets you've already developed. The Windows Runtime provides a library of APIs you can use to build engaging, connected, tailored experiences. When the Windows Runtime doesn't have the functionality you need, you can draw from a subset of Microsoft .NET and Microsoft Win32 APIs that support Metro style app development. For more info about the Windows Runtime, see Windows Runtime Reference.

Hello world with JavaScript

To build a Metro style app using JavaScript, you use HTML5 and CSS3 for presentation and JavaScript for app logic. Here's an example of a very basic Metro style app using JavaScript.

Copy

In this code example, you see references to Windows Library for JavaScript, as well as references to a default style sheet. These references are provided for you when you use one of the pre-defined Metro style apps templates. Compiling and running this app generates a button, labeled "Click me!". Adding code to the default.js file to handle the onClick event is simple.

Copy

document.addEventListener("click", function(){
myText.innerText="Hello Windows Metro style apps with JavaScript!";
});

When the button is clicked, "Hello Windows Metro style apps with JavaScript!" appears. You can extend this app using any of the APIs in the Windows Runtime, the Windows Library for JavaScript, or by using HTML5 or CSS3 to enhance the presentation.

Adding to the Nothing App

Instead of typing all that, just add this button to the body of default.html

<body>...body>

-->

<p>Content goes herep>

p>

-->

<button onclick="click">Click me!button>

button>

<p id="myText">p>

p>

body>

Debug it and you'll get

Content goes here
[Click me!]

on your form.

To add code, in a Winform or Webform, you'd double click on the button to get to the event.

To add it here, click on the default.js tab and you'll see this:

(function () {

"use strict";

var app = WinJS.Application;

app.onactivated = function (e) {

if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

WinJS.UI.processAll();

}

}

app.start();

})();

Add this code after the first function:

document.addEventListener("click", function(){ myText.innerText="Hello Windows Metro style apps with JavaScript!"; });

 There's quite a lot of stuff in this line. The way to read this line is

document.addEventListener
WinJS Method on document to add an eventListener
You can look up the WinJS.Application.addEventListener reference: http://msdn.microsoft.com/en-us/library/windows/apps/br229799(v=VS.85).aspx
Syntax: WinJS.Application.addEventListener(type, listener, capture);
type Type: string The type (name) of the event.
listener Type: functionThe function that handles the event.
capture Type: Boolean true to initiate capture, otherwise false.
 ("click",
is the name of the event to pay attention to, in this case clicking on the "click me" button

function(){});
is the function to execute when the event happens

{blah blah blah }

that is the goofy "anonymous function" code you can just jam in between curly braces if you don't want to create a whole fancy standalone function
myText.innerText="Hello Windows Metro style apps with JavaScript!";

standard javscript to set the document text to the clever message.


It's not quite as straightforward as the old Visual Basic methodology: double click on the object, find the click event, and say Object.text = "clever message", but it's the same general idea and if you're already used to dealing with something as nasty as Javascript, it should be no big deal. There's always C# and XAML for VB fans.

After all that,  default.js should look like this

(function () {

"use strict";

var app = WinJS.Application;

app.onactivated = function (e) {

if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

WinJS.UI.processAll();

}

}
document.addEventListener("click", function () {

myText.innerText = "Hello Windows Metro style apps with JavaScript!";

});

   
app.start();

})()
















Debug, click on the button and you'll see:

Content goes here
[Click me!]  "Hello Windows Metro style apps with JavaScript!";