WinJS je open source knihovna pro JavaScript, která pomáhá při vytváření aplikací pro Windows Store v HTML, CSS a JavaScriptu s jednotným vzhledem a výkony na všech zařízeních s Windows. Knihovnu WinJS lze použít nejen pro univerzální aplikace pro Windows s HTML/JS, ale taky pro weby a při práci s technologiemi aplikací založenými na HTML, jako je Apache Cordova. 

1. WinJS
Kamil Ondrák

2. ▷ JS knihovna pro psaní HTML/CSS/JS aplikací
▷ Microsoft
▷ Open source (Apache licence 2.0)
▷ Windows 8 aplikace ve Windows Store
▷ Windows Phone
▷ Universal Windows Apps
▷ Všechny moderní prohlížeče
▷ Apache Cordova
The Windows library for JavaScript

3. ▷ Windows UI komponenty
ListView, DatePicker, Toolbar, atd.
▷ Přístup k Windows Runtime (WinRT)
GPS, akcelerometr, kompas, atd.
▷ One-way data binding
▷ Template engine
▷ Implementace tříd, namespace, promise
Základní prvky

4. Windows UI komponenty
<div id="myControl"
data-win-control="WinJS.UI.Rating" data-win-
options="{
averageRating: 3.4,
maxRating: 10 }">
</div>
WinJS.UI.processAll()
HTML
JavaScript
Výsledek

5. Windows UI komponenty
var myDiv = document.createElement("div");
var newControl = new WinJS.UI.Rating( myDiv, {
maxRating: 10,
averageRating: 3.4,
});
Imperativně
Výsledek

6. Data binding
<select data-win-control="WinJS.UI.Repeater"
data-win-options="{data:myList.items}">
<option data-win-bind="value:id; textContent:
description"> </option>
</select>

7. ▷ Objekt reprezentující asynchroní akci
▷ Obdobné jako v Ecmascript 6
▷ Metoda then()
její (první) argument je zavolán po splnění požadavku
vrací Promise, čili umožňuje řetězení
Promise

8. ▷ Adaptéry pro React, Angular, Knockout
▷ V Reactu WinJS komponenta
Adaptéry
<div data-win-control="WinJS.UI.FlipView" data-
win-options="{
itemDataSource: ...,
itemTemplate: ...,
onPageSelect: ...}">
</div>
<ReactWinJS.FlipView
itemDataSource={this.props.ratingsList.dataSou
rce}
itemTemplate={this.flipViewItemRenderer}
onPageSelected={this.handlePageSelected} />
Původní WinJS
React

9. ▷ Primárně pro vývoj Universal Windows Apps
Za použití technologií, které známe
▷ Použitelné i na webu, pokud někdo touží po Modern UI
Ale vyvíjí se i Bootstrap skin - Winstrap
Shrnutí

10. Díky za pozornost!
Otázky?
Kamil Ondrák
kamil.ondrak@keyup.eu

11. ▷ Homepage: http://www.buildwinjs.com/
▷ WinJS Playground: http://try.buildwinjs.com/playground/
▷ WinJS API:
https://msdn.microsoft.com/en-us/library/windows/apps/mt
502392.aspx
▷ Winstrap: http://bootstrap-winjs.azurewebsites.net
Odkazy