Slide 1

Slide 2

Slide 3

WinJS today and tomorrow Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 4

WinJS today and tomorrow Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 5

Phone WinJS 2.1WinJS 2.0 New!

Slide 6

Phone WinJS 2.1WinJS 2.0 New!

Slide 7

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

Slide 8

WinJSHTML5WinRT Windows 8.1Windows Phone 8.1Windows app Phone app WinJS 2.0 Phone WinJS 2.1

Slide 9

http://

Slide 10

Building apps in HTML/JS Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Building apps in HTML/JS Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 17

Slide 18

Slide 19

Slide 20

Content - Item One Content - Item Two Content - Item Three

Slide 21

Slide 22

Slide 23 ">

Slide 24 ">

Slide 25 ">

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30 ">

Slide 31

Slide 32

Slide 33 ">

Slide 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(); });

Slide 35

Slide 36

TurnstileSlide

Slide 37

Slide 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);

Slide 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);

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 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;}"; });

Slide 46

Building apps in HTML/JS Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 47

Slide 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)

Slide 49

Slide 50

Angular-WinJS Hello, {{name}}. Your current rating is: {{rating}}.

Slide 51

Knockout-WinJS Hello,. Your current rating is:.

Slide 52

Slide 53

Slide 54

WinJS 1.0WinJS 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

Slide 55

Building apps in HTML/JS Big picture of whats new Deep dive on new features The road ahead Getting started and next steps

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Add talks

Slide 61

Slide 62

Slide 63