Tuesday, December 06, 2011

Verikia's Windows 8 apps with HTML, CSS and JavaScript

[Tech - Software Blog]

see complete article here
see http://verekia.com/windows8/overview-developing-windows-8-apps-html-css-javascript

[My impression is the ASP.NET was the old way to do webapps, but they are pretty boring, this seems to be a more "native" way to do "cool" apps on the web, using HTML5 instead of weforms and WINJS executed on the browser and WINRT on the client instead of server-side processing]
or see my highlights and [comments]. I'm ramping up too, so don't mind if I make comments as if I don't know what I'm reading about yet.

[He doesn't mention that XAML is missing in action. It's the son of son of VB is used for C++, VB.NET and C++/CX, if you're doing Javascript, you'll use HTML5 and all the Windows 8 goodies]

 They are called “Metro-style” apps, and are actually really pleasant to use. They’re responsive, fluid, beautiful, they’re almost always using squares and rectangles, because it’s Windows 8 theme, which is great for having a nice alignment on the grid. They can access Windows APIs like the file picker, the camera, the accelerometer, etc., have their own native contextual menu and settings (Android style), and they will be available on a Windows 8 app store.
...

built in a way you can choose to develop apps using 3 possible languages: C#, C++ and JavaScript. [XAML is only the C++ and C#, C++ for fast native and Direct-X game-graphics, C# for .NET forms] So MS fanboys and corporate dudes will be able to continue using their stuff and will recycle their Silverlight skills, low-level hardcore game coders can still use C, and us, Web 2.0 hippies can now write software with web standards. The 3 languages rely on the same WinRT (RunTime) layer, and have similar performances, so it’s really up to you to choose your favorite language. I will only talk about JavaScript on this blog however. [that's for the web hippies]

...
[His take on html - it's sort of built into html, but it runs like an app not a website]

HTML

So we chose JavaScript. But JavaScript’s role is about behavior right? What about HTML and CSS? Well you will be nicely surprised to see that a Windows 8 JavaScript app is actually really 100% made of HTML/CSS/JavaScript. So, what’s under the hood of this sample app? Well, probably not what you expect. Here is the corresponding HTML page:

see all the .js and css files installed with the page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
    <meta charset="utf-8" />
    <title>splitPagetitle>
    
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script type="ms-deferred/javascript" src="/winjs/js/base.js"&gt;script>
    <script type="ms-deferred/javascript" src="/winjs/js/ui.js">script>
    <script type="ms-deferred/javascript" src="/winjs/js/binding.js">script>
    <script type="ms-deferred/javascript" src="/winjs/js/controls.js">script>
    <script type="ms-deferred/javascript" src="/winjs/js/animations.js">script>
    <script type="ms-deferred/javascript" src="/winjs/js/uicollections.js">script>
    <script type="ms-deferred/javascript" src="/winjs/js/wwaapp.js">script>
    <link rel="stylesheet" href="/css/default.css" />
    <link rel="stylesheet" href="/css/splitPage.css" />
    <script type="ms-deferred/javascript" src="/js/splitPage.js">script>
head>
<body>
    
    <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
        <div class="largeIconTextTemplate">
            <div class="largeIconTextTemplateImage" data-win-bind="style.backgroundColor: backgroundColor">div>
            <div class="largeIconTextTemplateBackground">
                <div class="largeIconTextTemplateLargeText win-itemTextStrong" data-win-bind="textContent: title">div>
                <div class="largeIconTextTemplateSmallText win-itemTextTertiary" data-win-bind="textContent: subtitle">div>
                <div class="largeIconTextTemplateMediumText win-itemText" data-win-bind="textContent: description">div>
            div>
        div>
    div>
    
    <div class="splitPage fragment">
        <header role="banner" aria-label="Header content">
            <button disabled class="win-backbutton" aria-label="Back">button>
            <h1 class="pageTitle win-title">h1>
        header>
        <section class="itemListSection">
            <div class="itemList"
                    data-win-control="WinJS.UI.ListView"
                    data-win-options="{dataSource: splitPage.items, oniteminvoked: splitPage.itemInvoked,  layout: {type: WinJS.UI.ListLayout}, selectionMode: 'none' }">div>
        section>
        <section class="articleSection" aria-live="assertive" aria-atomic="true" aria-label="Item detail">
            <header class="header">
                <div class="image" data-win-bind="style.backgroundColor: backgroundColor; style.backgroundImage: backgroundImage; alt: title">div>
                <div class="text">
                    <h1 class="title win-contentTitle" data-win-bind="textContent: title">h1>
                    <h2 class="subtitle win-itemText" data-win-bind="textContent: subtitle">h2>
                    <p class="description" data-win-bind="textContent: description">p>
                div>
            header>
            <article class="content" data-win-bind="innerHTML: content">article>
        section>
    div>
body>
html>

It uses HTML5 elements, data- attributes, ARIA roles [hmm, I don't know what that is, and this article isn't a huge help either], everything looks pretty standard, but it’s radically different from a regular website. There are tons of proprietary stuff, even if it’s still HTML.

[The back coding that you see in VB and .NET is all thrown into the javascript]
...

JavaScript

Here is the real business:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
(function () {
    'use strict';
    // Custom event raised after the fragment is appended to the DOM.
    WinJS.Application.addEventListener('fragmentappended', function handler(e) {
        if (e.location === '/html/splitPage.html') { fragmentLoad(e.fragment, e.state); }
    });
    function updateForLayout(lv, layout) {
        lv.layout = new WinJS.UI.ListLayout();
        lv.refresh();
    }
    function layoutChanged(e) {
        var list = document.querySelector('.itemList');
        if (list) {
            var lv = WinJS.UI.getControl(list);
            updateForLayout(lv, e.layout);
        }
    }
    function fragmentLoad(elements, options) {
        if (!WinJS.Navigation.canGoBack) {
            WinJS.Navigation.history.backStack[0] = { location: '/html/categoryPage.html' };
            var backButton = document.querySelector('header[role=banner] .win-backbutton');
            if (backButton) {
                backButton.removeAttribute('disabled');
            }
        }
        try {
            var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
            if (appLayout) {
                appLayout.addEventListener('layoutchanged', layoutChanged);
            }
        } catch (e) { }
        splitPage.groups = pageData.groups;
        var group = (options && 'group' in options) ? options.group : pageData.groups[0];
        splitPage.items = pageData.items.filter(function (item) { return item.group.key === group.key }),
        splitPage.selectedItem = splitPage.items[0];
        elements.querySelector('.pageTitle').textContent = group.title;
        WinJS.UI.processAll(elements)
            .then(function () {
                var lv = WinJS.UI.getControl(elements.querySelector('.itemList'));
                lv.itemRenderer = elements.querySelector('.itemTemplate');
                updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);
                var details = elements.querySelector('.articleSection');
                return WinJS.Binding.processAll(details, splitPage.selectedItem);
            });
    }
    function itemInvoked(e) {
        var details = document.querySelector('.articleSection');
        splitPage.selectedItem = splitPage.items[e.detail.itemIndex];
        WinJS.Binding.processAll(details, splitPage.selectedItem);
        details.scrollTop = 0;
    }
// [...]
    WinJS.Namespace.define('splitPage', {
        fragmentLoad: fragmentLoad,
        itemInvoked: itemInvoked
    });
})();
Honestly I’m too lazy to dive into this code since this article is just supposed to be an overview. However you can see that this file often refers to WinJS library and to the Windows object, which are used to access low-level WinRT calls. [Which is what the C# and C++ also talks to, thus choice of 3l languages. This is sort of like VBSCRIPT calling COM in classic ASP in the 90s if you're that old]If you don’t want to access any Windows APIs like the device, the accelerometer and everything, you can omit using it and do pure JavaScript, or even use another lib like jQuery, it should work fine.

[So how is it different from standard html5 website?]

does not take advantage of using the Windows RunTime environment. No native menus, no region scrolling and zooming, no access to the device APIs, no access to the filesystem, and the most important, no Metro-style look and feel.

[Looks like he's thumbs up based on this assessment]

They’re Apple-style slogan at this conference was “Windows, reimagined”. Well that’s exactly what they did. They really invested a lot to make Windows 8 development accessible to the web developers community. Good job.
“Metro-style” apps are also actually really pleasant to use and they can honestly compete with Apple and Google in the tablets battle. If Web Developers get charmed by developing on this platform, it could even encourage competitors to embrace the same strategy and it could really be the start of a “native web” revolution. And as usual, if you’re here at the beginning of a revolution, there are tons of potentially profitable opportunities to jump on.


continued see http://verekia.com/windows8/overview-developing-windows-8-apps-html-css-javascript

No comments: