chris anderson (@codemonkeychris) distinguished engineer kevin hill (@kevinjhill) senior program...
TRANSCRIPT
![Page 1: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/1.jpg)
![Page 2: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/2.jpg)
2-720
JavaScript frameworks in your apps and sites from WinJS and beyond
JavaScript frameworks in your apps and sites from WinJS and beyond
![Page 3: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/3.jpg)
2-720
JavaScript frameworks in your apps and sites from WinJS and beyond
JavaScript frameworks in your apps and sites from WinJS and beyond
Chris Anderson (@codemonkeychris)Distinguished Engineer
Kevin Hill (@KevinJHill)Senior Program Manager Lead
![Page 4: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/4.jpg)
Journey of frameworks
Web apps@ Microsoft
Responsive app
CharMap
KnockoutJS app
+ Favorites
AngularJS app+ Ratings
ReactJSSearch
BootstrapWindows
themes for Websites
![Page 5: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/5.jpg)
WebApps @ Microsoft
![Page 6: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/6.jpg)
WebApps @ Microsoft
ActiveX1996
ActiveX JS HTAs1997
Universal APIs + JS
2012
Hosted WebApps2015
IE 9 + Chakra2011
IE 82009
IE 72006
Office Web Apps2010
1995 2016
![Page 7: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/7.jpg)
Framework search interest over time
2004
2004
2004
2005
2005
2005
2006
2006
2006
2007
2007
2007
2008
2008
2008
2009
2009
2009
2010
2010
2010
2011
2011
2011
2012
2012
2012
2013
2013
2014
2014
2014
2015
0
10
20
30
40
50
60
70
80
90
100
MooToolsscript.aculo.usAngularJSReactJSKnockout JS
script.aculo.us released
MooTools released
AngularJS released
ReactJS releasedKnockout JS
released
![Page 8: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/8.jpg)
20042004200520052006200620072007200820082009200920102010201120122012201320132014201420150
10
20
30
40
50
60
70
80
90
100
MooToolsscript.aculo.usAngularJSjQueryKnockout JS
Framework search interest over time
jQuery released
![Page 9: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/9.jpg)
ElevatorJS
A framework to watch
![Page 10: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/10.jpg)
EdgeHTML.dll Chakra
Hosted contentAlways up-to-date
Packaged contentOffline first
![Page 11: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/11.jpg)
Developers want…
… their existing code to just run… more frameworks to just work
![Page 12: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/12.jpg)
• We focused too much on “The Windows Way”
• Focus on interop to support HTML markup and JS frameworks/libs
• Our security model for web apps did not play well with existing code
• We did not play well with the web development workflow
Adapting to what we’ve learned
We’ve learned our Windows 8 investments just scratch the surface
![Page 13: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/13.jpg)
• Huge interop investments• New rendering engine• Updated JavaScript engine• Evergreen• Embracing the standards
“The web just works”
Web developers want to have the latest and greatest features
![Page 14: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/14.jpg)
WinJS features
![Page 15: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/15.jpg)
WinJS features
![Page 16: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/16.jpg)
Responsive appCharMap
https://github.com/InternetExplorer/CharMap/
![Page 17: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/17.jpg)
CharMap App
interface Block { chars : Char[]; start : number; end : number; name : string;}interface Char { name : string; code : number; favorite : boolean; rating : number;}
![Page 18: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/18.jpg)
HTML5 controls in actionWinJS
https://github.com/winjs/winjs
![Page 19: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/19.jpg)
HTML5 controls in actionKnockoutJS
https://github.com/winjs/knockout-winjs
![Page 20: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/20.jpg)
JSvar viewModel = { listViewArray: ko.observableArray(), favorites: ko.observableArray()};
ko.applyBindings(viewModel);
HTML<div id="content" class="content" data-bind="winListView: { itemTemplate: 'listViewItemTemplate', itemDataSource: listViewArray, layout: {type: WinJS.UI.GridLayout} }"></div>
KnockoutJS code
![Page 21: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/21.jpg)
HTML5 controls in actionAngularJS
https://github.com/winjs/angular-winjs
![Page 22: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/22.jpg)
JSangular.module('sample', ['winjs']).controller("sampleController", function ($scope) { $scope.rating = 1; $scope.maxRating = 5;});HTML<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/
AngularJS code
![Page 23: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/23.jpg)
HTML5 controls in actionReact
https://github.com/winjs/react-winjs
![Page 24: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/24.jpg)
JSvar 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>;});
HTML<body id="root"> <div id="app"></div> <script src="reactApp.js"></script></body>
ReactJS
![Page 25: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/25.jpg)
Bootstrap theme for websites
https://github.com/winjs/bootstrap-winjs
![Page 26: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/26.jpg)
Cordova cross-platform apps
![Page 27: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/27.jpg)
Continued investment in JS frameworks at Microsoft• HTML Controls work with web frameworks• Microsoft Edge web engine powers the platform• We are always listening and learning
Wrap-up
![Page 28: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/28.jpg)
• (2-665) Hosted Web Apps and Web Platform Innovations
• (3-756) Getting Great Performance Out of Cordova Apps
• (2-706) Getting Started with Cross-Platform Mobile Development with Apache Cordova
• (2-656) "Project Spartan": Introducing the New Browser and Web App Platform for Windows 10
Related Sessions
![Page 29: Chris Anderson (@codemonkeychris) Distinguished Engineer Kevin Hill (@KevinJHill) Senior Program Manager Lead](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649e225503460f94b0eb4a/html5/thumbnails/29.jpg)
© 2015 Microsoft Corporation. All rights reserved.