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.

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.

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 (@KevinJHill) Senior Program Manager Lead Chris Anderson (@codemonkeychris) 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.

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

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.

WebApps @ Microsoft ActiveX 1996 IE 7 2006 Office Web Apps 2010 Build 2015 4/21/2017 9:31 AM WebApps @ 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.

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.

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.

A framework to watch ElevatorJS

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

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

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.

“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

WinJS features

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.

Responsive app CharMap https://github.com/InternetExplorer/CharMap/ Build 2014 4/21/2017 Responsive app CharMap https://github.com/InternetExplorer/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.

CharMap App 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

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>

HTML5 controls in action AngularJS https://github

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> ... https://github.com/winjs/angular-winjs/

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

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.

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

Cordova cross-platform apps

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.

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