Kevin Hill (@KevinJHill) Senior Program Manager Lead Chris Anderson (@codemonkeychris) Distinguished Engineer AngularJS app + Ratings Web apps @ Microsoft Bootstrap Windows themes for Websites KnockoutJS app + Favorites Responsive app CharMap ReactJS Search.

Download Report

Transcript Kevin Hill (@KevinJHill) Senior Program Manager Lead Chris Anderson (@codemonkeychris) Distinguished Engineer AngularJS app + Ratings Web apps @ Microsoft Bootstrap Windows themes for Websites KnockoutJS app + Favorites Responsive app CharMap ReactJS Search. 

Kevin Hill (@KevinJHill)
Senior Program Manager Lead
Chris Anderson (@codemonkeychris)
Distinguished Engineer
AngularJS app
+ Ratings
Web apps
@ Microsoft
Bootstrap
Windows themes
for Websites
KnockoutJS app
+ Favorites
Responsive app
CharMap
ReactJS
Search
1995
2016
100
90
MooTools
released
80
70
MooTools
AngularJS
released
60
script.aculo.us
50
script.aculo.us
released
40
ReactJS
released
Knockout JS
released
30
AngularJS
ReactJS
Knockout JS
20
10
0
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
100
90
80
70
MooTools
60
script.aculo.us
50
jQuery
released
40
AngularJS
jQuery
30
Knockout JS
20
10
0
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
ElevatorJS
EdgeHTML.dll
Chakra
just run
just work
Responsive app
CharMap
https://github.com/InternetExplorer/
CharMap/
interface Block {
chars : Char[];
start : number;
end : number;
name : string;
}
interface Char {
name : string;
code : number;
favorite : boolean;
rating : number;
}
HTML5 controls in action
WinJS
https://github.com/winjs/winjs
HTML5 controls in action
KnockoutJS
https://github.com/winjs/knockoutwinjs
var viewModel = {
listViewArray: ko.observableArray(),
favorites: ko.observableArray()
};
ko.applyBindings(viewModel);
<div id="content" class="content"
data-bind="winListView: {
itemTemplate: 'listViewItemTemplate',
itemDataSource: listViewArray,
layout: {type: WinJS.UI.GridLayout}
}">
</div>
HTML5 controls in action
AngularJS
https://github.com/winjs/angularwinjs
angular.module('sample', ['winjs']).controller("sampleController", function
($scope) {
$scope.rating = 1;
$scope.maxRating = 5;
});
<div ng-app="sample" ng-controller="sampleController">
<win-rating max-rating="maxRating" user-rating="rating"></win-rating>
<div>
<h2>Rating: {{rating}}</h2>
<input type="range" min="1" max="{{maxRating}}" ng-model="rating" />
</div>
...
</div>
https://github.com/winjs/angular-winjs/
HTML5 controls in action
React
https://github.com/winjs/react-winjs
var blocks = onlyItemsWithMatches.
map(function (item) {
return <ReactWinJS.Hub.Section key={item.block.name} header={item.block.name} isHeaderStatic={true}>
<div className="hubSectionLetterContainer">{
matchChars(item.chars, that.state.searchString).
map(function (c) {
return <div className="item">
...
</div>;
})
}</div>
</ReactWinJS.Hub.Section>;
});
<body id="root">
<div id="app"></div>
<script src="reactApp.js"></script>
</body>
Cordova cross-platform apps
Hosted Web Apps and Web Platform Innovations
Getting Great Performance Out of Cordova Apps
Getting Started with Cross-Platform Mobile
Development with Apache Cordova
"Project Spartan": Introducing the New Browser
and Web App Platform for Windows 10