1. Build 2015
4/21/2017
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. JavaScript frameworks in your apps and sites from WinJS and beyond
Build 2014
4/21/2017
JavaScript frameworks in your apps and sites from WinJS and beyond
JavaScript frameworks in your apps and sites from WinJS and beyond
2-720
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. JavaScript frameworks in your apps and sites from WinJS and beyond
Build 2014
4/21/2017
JavaScript frameworks in your apps and sites from WinJS and beyond
JavaScript frameworks in your apps and sites from WinJS and beyond
Kevin Hill
Senior Program Manager Lead
Chris Anderson
Distinguished Engineer
2-720
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Windows themes for Websites
Journey of frameworks
AngularJS app
+ Ratings
Web apps
@ Microsoft
Bootstrap
Windows themes for Websites
KnockoutJS app
+ Favorites
ReactJS
Search
Responsive app
CharMap

5. WebApps @ Microsoft Build 2014 4/21/2017
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. WebApps @ Microsoft ActiveX 1996 IE 7 2006 Office Web Apps 2010
Build 2015
4/21/2017 9:31 AM
Microsoft
ActiveX
1996
IE 7
2006
Office Web Apps
2010
Universal APIs + JS
2012
1995
2016
ActiveX JS HTAs
1997
IE 8
2009
IE 9 + Chakra
2011
Hosted WebApps
2015
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Framework search interest over time
Build 2015
4/21/2017 9:31 AM
Framework search interest over time
MooTools released
AngularJS released
ReactJS released
script.aculo.us released
Knockout JS released
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. Framework search interest over time
Build 2015
4/21/2017 9:31 AM
Framework search interest over time
jQuery released
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. A framework to watch
ElevatorJS

10. EdgeHTML.dll Chakra Packaged content Offline first Hosted content
Always up-to-date

11. Developers want…
… their existing code to just run
… more frameworks to just work

12. Adapting to what we’ve learned
Build 2015
4/21/2017 9:31 AM
Adapting to what we’ve learned
We’ve learned our Windows 8 investments just scratch the surface
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
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. “The web just works” Huge interop investments New rendering engine
Web developers want to have the latest and greatest features
Huge interop investments
New rendering engine
Updated JavaScript engine
Evergreen
Embracing the standards

14. WinJS features

15. WinJS features Build 2015 4/21/2017 9:31 AM
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Responsive app CharMap https://github.com/InternetExplorer/CharMap/
Build 2014
4/21/2017
Responsive app CharMap
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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

18. HTML5 controls in action WinJS https://github.com/winjs/winjs

19. HTML5 controls in action KnockoutJS https://github

20. KnockoutJS code JS var 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>

21. HTML5 controls in action AngularJS https://github

22. AngularJS code JS
angular.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>
...

23. HTML5 controls in action React https://github.com/winjs/react-winjs

24. ReactJS JS HTML <body id="root">
Build 2015
4/21/2017 9:31 AM
ReactJS JS
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>;
});
HTML
<body id="root">
<div id="app"></div>
<script src="reactApp.js"></script>
</body>
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25. Bootstrap theme for websites https://github.com/winjs/bootstrap-winjs

26. Cordova cross-platform apps

27. Wrap-up Continued investment in JS frameworks at Microsoft
Build 2015
4/21/2017 9:31 AM
Wrap-up
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
© 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. Related Sessions (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