Cross-Plattform-Development ist in aller Munde. Nun steigt Microsoft mit der neuen WinJS-Bibliothek in den JavaScript-Framework-Markt ein. Konkurrenz sind JQuery Mobile, AngularJS oder auch Kendo UI. Das sind alles Themen auf der ADCX Konferenz.
Der erste Blick auf die JavaScript für Windows Bibliothek per Nuget Download in Visual Studio 2013 eröffnet ernüchternde Downloadzahlen: nur 167 in der ersten Woche.
In meinem Fall hat zwar die Installation scheinbar geklappt, es waren aber keine neuen CSS oder JS Dateien im Projekt angelegt. Erst der Manuelle Download des Zip mit anschließendem Entpacken in das Web-Projekt, hat den Start ermöglicht. Nebenbei bemerkt: der Download kommt von Amazon Web Services.
:
Die Zeiten haben sich geändert, gut finde ich das nur bedingt.
Als nächstes wird WinJS in eine ASPX Seite eingebunden. Es gibt zwei Design-Varianten: dark und light.
1: <link href="Content/ui-dark.css" rel="stylesheet" />
2: <script src="Scripts/WinJS.js"></script>
Die Controls sind in einzelne JavaScript-Dateien aufgeteilt und sozusagen modularisiert. Für den Einstieg packe ich die komplette Bibliothek, immerhin unkomprimiert 3,7 MB groß, in die HTML-Seite.
Ans Ende des HTML-Blockes wird der Script Block gecoded. Die Daten kommen per Json aus einem REST ASP.NET Web Api Service und beinhalten die Northwind Customer Daten. Nachdem die Daten geladen sind, wird die Bindung aktualisiert (Zeile 11)
1:<script>
2: WinJS.Application.onready = function () {
3: var options = {
4: url: '/api/kunden',
5: type: 'GET'
6: };
7: WinJS.xhr(options).done(
8: function (result) {
9: callback(result.responseText, result.status);
10: //Binding aktivieren
11: WinJS.UI.processAll();
12: },
13: function (result) {
14: callback(null, result.status);
15: }
16: );
17: };
18:
19: WinJS.Application.start();
20:
21: function callback(responseText, status) {
22: if (status === 200) {
23: var customers = JSON.parse(responseText);
24: WinJS.Namespace.define("DataExample", {
25: data: new WinJS.Binding.List(customers)
26: });
27:
28: } else {
29:
30: }
31: }
32: </script>
Etwas ungewohnt werden die empfangenen JSON Array Daten in eine bindbare WinJS Liste umgewandelt. Der Namensraum kombiniert mit dem Eigenschaftsnamen, ergänzt um das Schlüsselwort dataSource, wird im HTML Code per win-Options an das Listview Control gebunden.
Das eigentliche Itemtemplate wird extern, das heißt außerhalb des Listview DIV extra deklariert. Die Feldbindung erfolgt per win-bind Attribut.
1: <h1>Demo METRO Liste</h1>
2: <div class="customerTemplate"
data-win-control="WinJS.Binding.Template" style="display: none;">
3: <div style="height:80px">
4: <h4 data-win-bind="textContent: CompanyName"></h4>
5: </div>
6: </div>
7: <div id="basicListView"
8: data-win-control="WinJS.UI.ListView"
9: data-win-options="{ itemDataSource : DataExample.data.dataSource,
10: itemTemplate: select('.customerTemplate') }">
11: </div>
Richtig erstaunlich wird es im Browser. Die Website sieht aus wie Windows 8.1 und ist genauso bedienbar. In dem Fall mit einem horizontalen Scrolling.
Nun hat Microsoft also mit WinJs 3.0 Yet Another JavaScript Library für mobile Clients. Stellt sich die Frage: wer braucht das, wer wird das nutzen? Konzeptionell ist die Architektur gut gelungen und einfach nutzbar. Die für JavaScript typischen Probleme mit Asynchronität finden sich auch hier. Hervorzuheben ist, dass der HTML Code und vermutlich weitestgehend der JS Code aus einer nativen Windows 8.1 Anwendung übernommen werden können. Die HTML5 Designer aus Blend sind das Beste, was der Markt aktuell an WYSIWYG zum Thema zu bieten hat. In der Gesamtbetrachtung bin ich vorsichtig optimistisch, würde aber aktuell kein Projekt damit starten.
Mehr zum Thema Cross Plattform auf der ADCX in Mannheim und Wien.