This document provides an overview and roadmap for WinJS. It discusses new features in WinJS 2.1 for phone, improvements to existing controls, and new building blocks. It outlines the past and future direction of WinJS, including consolidation across devices and web views, improved theming, and creating adaptive apps. The document concludes by mentioning where to get started with WinJS and next steps.

3. WinJS today and tomorrow
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

4. WinJS today and tomorrow
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

5. Phone
WinJS 2.1WinJS 2.0
New!

6. Phone
WinJS 2.1WinJS 2.0
New!

7. WinJS
HTML5
Windows app
WinRT
Windows app and/or Windows Phone app

8. WinJS HTML5 WinRT
Windows 8.1 Windows Phone 8.1Windows app Phone app
WinJS 2.0 Phone WinJS 2.1

9. http://

10. Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

12. Enable true Phone experiences.

13. Enable true Phone experiences.
Built with native performance.

14. Enable true Phone experiences.
Built with native performance.
Share common resources across form factors.

16. Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

17. New controls Improved controls Building blocks

20. <div data-win-control="WinJS.UI.Pivot"
data-win-options="{ title: 'Page title', selectedIndex: 0 }">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ 'header': 'First section' }">
<p> Content - Item One </p>
</div>
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ 'header': 'Second section' }">
<p> Content - Item Two </p>
</div>
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ 'header': 'Third section' }">
<p> Content - Item Three </p>
</div>
</div>

23. <div id="createAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera',
section:'selection'}">
</button>
</div>

24. <div id="createAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{closedDisplayMode:'minimal'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera',
section:'selection'}">
</button>
</div>

25. <div id="createAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{closedDisplayMode:'minimal'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera',
section:'selection'}">
</button>
</div>

30. <div data-win-control="WinJS.UI.ListView" data-win-options="{
itemDataSource: myDataSource,
layout: { type: WinJS.UI.ListLayout },
itemTemplate: myItemTemplate,
selectionMode: 'multi',
tapBehavior: 'toggleSelect'
}">
</div>

33. <div id="inGroupTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
<div class="groupHeader" data-win-bind="innerText: title"></div>
</div>
<div id="outItemTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
<div class="groupHeader" data-win-bind="style.backgroundColor: color; innerText: title"></div>
</div>
<div style="width: 480px; height: 640px" id="sezoRoot" data-win-control="WinJS.UI.SemanticZoom">
<div style="width: 480px; height: 640px" id="zoomedInLV" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate: inItemTemplate, groupHeaderTemplate: inGroupTemplate,
layout: {type: WinJS.UI.ListLayout}}">
</div>
<div style="width: 480px; height: 640px; padding-top: 60px“
id="zoomedOutLV" data-win-control="WinJS.UI.ListView“ data-win-options="
{itemTemplate: outItemTemplate, layout: {type: WinJS.UI.GridLayout}}">
</div>
</div>

34. var groups = [
{ title: "#", count: 0 }, { title: "A", count: 2 }, // ...
{ title: "Z", count: 0 }
];
for (var i = 0; i < groups.length; i++) {
outItems.push({ title: groups[i].title, color: (groups[i].count ? "#0094ff" : "#AAAAAA"),
mapsTo: (groups[i].count ? inItems.length : -1) });
function inToOutMappingFunction(item) {
return { groupIndexHint: item.data.mapsTo };
}
function outToInMappingFunction(item) {
return { firstItemIndexHint: item.data.mapsTo };
}
outLV.addEventListener("iteminvoked", function (e) {
var item = data.zoomedOut.getItem(e.detail.itemIndex);
if (item.data.mapsTo === -1)
e.preventDefault();
});

36. Turnstile Slide

37. Continuum backward in
Continuum backward out
Continuum forward in
Continuum forward out
Slide down
Slide left in
Slide left out
Slide right in
Slide right out
Slide up
Turnstile backward in
Turnstile backward out
Turnstile forward in
Turnstile forward out

38. var incoming; // A single element or an array of elements
WinJS.UI.Animation.turnstileForwardIn(incoming);
WinJS.UI.Animation.turnstileForwardOut(incoming);
WinJS.UI.Animation.turnstileBackwardIn(incoming);
WinJS.UI.Animation.turnstileBackwardOut(incoming);
WinJS.UI.Animation.slideUp(incoming);
WinJS.UI.Animation.slideDown(incoming);

39. var listview = document.getElementById("listview").winControl;
var items = [];
for (var i = listview.indexOfFirstVisible; i <
listview.indexOfLastVisible + 1; i++) {
items.push(listview.elementFromIndex(i).parentNode.parentNode);
}
WinJS.UI.Animation.turnstileForwardIn(items);

42. <!—
At runtime, ui-themed.css resolves to ui-themed.light.css or ui-
themed.dark.css based on the user’s theme setting.
This is part of the MRT resource loading functionality.
-->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

43. 


45. var currentFontStyle = null;
var uiSettings = new Windows.UI.ViewManagement.UISettings();
uiSettings.addEventListener("textscalefactorchanged", function () {
if (!currentFontStyle) {
currentFontStyle = document.createElement("style");
currentFontStyle.type = "text/css";
document.head.appendChild(currentFontStyle);
}
function getFontSize(oldSize) {
return oldSize + Math.max(-Math.E * Math.log(oldSize) + 18, 0) *
(uiSettings.textScaleFactor - 1);
}
currentFontStyle.innerHTML = ".title {font-size: " + getFontSize(15) + "pt;}" +
".contents {font-size: " + getFontSize(12) + "pt;}";
});

46. Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

47. Phone
PC
2012 2013 2014 2015
WinJS1.0 WinJS2.0
Phone.WinJS2.1
WinJS3.0

48. WinJS UI Modules:
ListView, FlipView, Flyout, Tooltip, etc..
WinJS SPA
Modules:
Promises, Data
binding,
Scheduler,
Fragments,
Declarative controls,
etc…
AngularJS KnockoutJS EmberJS
Co-exist with other UI toolkits (e.g. Bootstrap)
UI.js
Base.js AngularJS
Other UI toolkits
(e.g. Bootstrap)

49. 




50. <!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app" ng-controller="AppController">
<head>
<meta charset="utf-8" />
<title>Angular-WinJS</title>
<!-- WinJS references omitted -->
<script src="/js/lib/jquery.js"></script>
<script src="/js/lib/angular.js"></script>
<script src="/js/lib/angular-winjs.js"></script>
<!-- Project references omitted -->
</head>
<body>
Hello, {{name}}. Your current rating is: {{rating}}.<br />
<input type="text" ng-model="rating" /><br />
<win-rating max-rating="5" user-rating="rating"></win-rating>
</body>
</html>

51. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Knockout-WinJS</title>
<!-- WinJS references omitted -->
<script src="/js/knockout-3.0.0.debug.js"></script>
<script src="/js/knockout-winjs.js"></script>
<!-- Project references omitted -->
</head>
<body>
Hello, <span data-bind="text: name"></span>.
Your current rating is: <span data-bind="text: userRating"></span>.<br />
<input type="text" data-bind="value: userRating, valueUpdate: 'afterkeydown'" /><br />
<div data-bind="winRating: {userRating: userRating}"></div>
</body>
</html>

53. 






54. WinJS 1.0 WinJS 2.0
WinJS Xbox
1.0
WinJS Phone
2.1
//build/
S1
• Desktop/Mobile
Browsers
• Modularization
• Minification
S0
• Git, Grunt, Less
• Open Source
S2
• Consolidation
• Devices:
WebView
• CSS Theming
S3
• New Features
• Interoperability
• Adaptive Apps

55. Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps

56. New controls Improved controls Building blocks

58.  Microsoft.Phone.WinJS.2.1




59. 



60. Add talks