Kevin Hill Kevin JHill Senior Program Manager Lead

  • Slides: 29
Download presentation

Kevin Hill (@Kevin. JHill) Senior Program Manager Lead Chris Anderson (@codemonkeychris) Distinguished Engineer

Kevin Hill (@Kevin. JHill) Senior Program Manager Lead Chris Anderson (@codemonkeychris) Distinguished Engineer

Angular. JS app + Ratings Web apps @ Microsoft Bootstrap Windows themes for Websites

Angular. JS app + Ratings Web apps @ Microsoft Bootstrap Windows themes for Websites Knockout. JS app + Favorites Responsive app Char. Map React. JS Search

1995 2016

1995 2016

80 70 40 30 2004 2004 2005 2005 2006 2006 2007 2008 2008 2009

80 70 40 30 2004 2004 2005 2005 2006 2006 2007 2008 2008 2009 2009 2010 2010 2011 2012 2012 2013 2013 2014 2014 2015 100 90 Moo. Tools released 60 Angular. JS released 50 script. aculo. us released Knockout JS released Moo. Tools React. JS released 20 10 0 script. aculo. us Angular. JS React. JS Knockout JS

100 90 80 70 Moo. Tools 60 50 script. aculo. us Angular. JS j.

100 90 80 70 Moo. Tools 60 50 script. aculo. us Angular. JS j. Query Knockout JS j. Query released 40 30 20 10 0 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014

Elevator. JS

Elevator. JS

Edge. HTML. dll Chakra

Edge. HTML. dll Chakra

just run just work

just run just work

Responsive app Char. Map https: //github. com/Internet. Explorer/ Char. Map/

Responsive app Char. Map https: //github. com/Internet. Explorer/ Char. Map/

interface Block { chars : Char[]; start : number; end : number; name :

interface Block { chars : Char[]; start : number; end : number; name : string; } interface Char { name : string; code : number; favorite : boolean; rating : number; }

HTML 5 controls in action Win. JS https: //github. com/winjs

HTML 5 controls in action Win. JS https: //github. com/winjs

HTML 5 controls in action Knockout. JS https: //github. com/winjs/knockoutwinjs

HTML 5 controls in action Knockout. JS https: //github. com/winjs/knockoutwinjs

var view. Model = { list. View. Array: ko. observable. Array(), favorites: ko. observable.

var view. Model = { list. View. Array: ko. observable. Array(), favorites: ko. observable. Array() }; ko. apply. Bindings(view. Model); <div id="content" class="content" data-bind="win. List. View: { item. Template: 'list. View. Item. Template', item. Data. Source: list. View. Array, layout: {type: Win. JS. UI. Grid. Layout} }"> </div>

HTML 5 controls in action Angular. JS https: //github. com/winjs/angularwinjs

HTML 5 controls in action Angular. JS https: //github. com/winjs/angularwinjs

angular. module('sample', ['winjs']). controller("sample. Controller", function ($scope) { $scope. rating = 1; $scope. max.

angular. module('sample', ['winjs']). controller("sample. Controller", function ($scope) { $scope. rating = 1; $scope. max. Rating = 5; }); <div ng-app="sample" ng-controller="sample. Controller"> <win-rating max-rating="max. Rating" user-rating="rating"></win-rating> <div> <h 2>Rating: {{rating}}</h 2> <input type="range" min="1" max="{{max. Rating}}" ng-model="rating" /> </div> . . . </div> https: //github. com/winjs/angular-winjs/

HTML 5 controls in action React https: //github. com/winjs/react-winjs

HTML 5 controls in action React https: //github. com/winjs/react-winjs

var blocks = only. Items. With. Matches. map(function (item) { return <React. Win. JS.

var blocks = only. Items. With. Matches. map(function (item) { return <React. Win. JS. Hub. Section key={item. block. name} header={item. block. name} is. Header. Static={true}> <div class. Name="hub. Section. Letter. Container">{ match. Chars(item. chars, that. state. search. String). map(function (c) { return <div class. Name="item">. . . </div>; }) }</div> </React. Win. JS. Hub. Section>; }); <body id="root"> <div id="app"></div> <script src="react. App. js"></script>

Cordova cross-platform apps

Cordova cross-platform apps

Hosted Web Apps and Web Platform Innovations Getting Great Performance Out of Cordova 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