chris anderson (@codemonkeychris) distinguished engineer kevin hill (@kevinjhill) senior program...
TRANSCRIPT
2-720
JavaScript frameworks in your apps and sites from WinJS and beyond
JavaScript frameworks in your apps and sites from WinJS and beyond
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
Journey of frameworks
Web apps@ Microsoft
Responsive app
CharMap
KnockoutJS app
+ Favorites
AngularJS app+ Ratings
ReactJSSearch
BootstrapWindows
themes for Websites
WebApps @ Microsoft
WebApps @ Microsoft
ActiveX1996
ActiveX JS HTAs1997
Universal APIs + JS
2012
Hosted WebApps2015
IE 9 + Chakra2011
IE 82009
IE 72006
Office Web Apps2010
1995 2016
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
20042004200520052006200620072007200820082009200920102010201120122012201320132014201420150
10
20
30
40
50
60
70
80
90
100
MooToolsscript.aculo.usAngularJSjQueryKnockout JS
Framework search interest over time
jQuery released
ElevatorJS
A framework to watch
EdgeHTML.dll Chakra
Hosted contentAlways up-to-date
Packaged contentOffline first
Developers want…
… their existing code to just run… more frameworks to just work
• 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
• 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
WinJS features
WinJS features
Responsive appCharMap
https://github.com/InternetExplorer/CharMap/
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 actionWinJS
https://github.com/winjs/winjs
HTML5 controls in actionKnockoutJS
https://github.com/winjs/knockout-winjs
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
HTML5 controls in actionAngularJS
https://github.com/winjs/angular-winjs
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
HTML5 controls in actionReact
https://github.com/winjs/react-winjs
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
Bootstrap theme for websites
https://github.com/winjs/bootstrap-winjs
Cordova cross-platform apps
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
• (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
© 2015 Microsoft Corporation. All rights reserved.