Preview 2-720.pptx

1.0x

Preview 2-720.pptx

Created 2 years ago

Duration 0:00:00
lesson view count 15
Select the file type you wish to download
Slide Content
  1. 2-720

    Slide 1 - 2-720

    • JavaScript frameworks in your apps and sites from WinJS and beyond
    • JavaScript frameworks in your apps and sites from WinJS and beyond
    • //build/ content is being presented by Microsoft Office Mix The video for this session will be available shortly
  2. Slide 2

    • 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
  3. Slide 3

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

    Slide 4 - WebApps @ Microsoft

  5. WebApps @ Microsoft

    Slide 5 - WebApps @ Microsoft

    • ActiveX
    • 1996
    • ActiveX JS HTAs
    • 1997
    • Universal APIs + JS
    • 2012
    • Hosted WebApps
    • 2015
    • IE 9 + Chakra
    • 2011
    • IE 8
    • 2009
    • IE 7
    • 2006
    • Office Web Apps
    • 2010
    • 1995
    • 2016
  6. Framework search interest over time

    Slide 6 - Framework search interest over time

    • script.aculo.us released
    • MooTools released
    • AngularJS released
    • ReactJS released
    • Knockout JS released
  7. Framework search interest over time

    Slide 7 - Framework search interest over time

    • jQuery released
  8. ElevatorJS

    Slide 8 - ElevatorJS

    • A framework to watch
  9. EdgeHTML.dll

    Slide 9 - EdgeHTML.dll

    • Chakra
    • Hosted content
    • Always up-to-date
    • Packaged content
    • Offline first
  10. Developers want…

    Slide 10 - Developers want…

    • … their existing code to just run
    • … more frameworks to just work
  11. We focused too much on “The Windows Way”

    Slide 11 - 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
  12. Huge interop investments

    Slide 12 - 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
  13. WinJS features

    Slide 13 - WinJS features

  14. WinJS features

    Slide 14 - WinJS features

  15. Responsive appCharMaphttps://github.com/InternetExplorer/CharMap/

    Slide 15 - Responsive appCharMaphttps://github.com/InternetExplorer/CharMap/

  16. CharMap App

    Slide 16 - CharMap App

    • interface Block {    chars : Char[];    start : number;    end : number;    name : string;}interface Char {    name : string;    code : number;    favorite : boolean;    rating : number;}
  17. HTML5 controls in actionWinJShttps://github.com/winjs/winjs

    Slide 17 - HTML5 controls in actionWinJShttps://github.com/winjs/winjs

  18. HTML5 controls in actionKnockoutJShttps://github.com/winjs/knockout-winjs

    Slide 18 - HTML5 controls in actionKnockoutJShttps://github.com/winjs/knockout-winjs

  19. JS

    Slide 19 - 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>
    • KnockoutJS code
  20. HTML5 controls in actionAngularJShttps://github.com/winjs/angular-winjs

    Slide 20 - HTML5 controls in actionAngularJShttps://github.com/winjs/angular-winjs

  21. JS

    Slide 21 - 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>
    • ...
    • </div>
    • https://github.com/winjs/angular-winjs/
    • AngularJS code
  22. HTML5 controls in actionReacthttps://github.com/winjs/react-winjs

    Slide 22 - HTML5 controls in actionReacthttps://github.com/winjs/react-winjs

  23. JS

    Slide 23 - 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>
    • ReactJS
  24. Bootstrap theme for websiteshttps://github.com/winjs/bootstrap-winjs

    Slide 24 - Bootstrap theme for websiteshttps://github.com/winjs/bootstrap-winjs

  25. Cordova cross-platform apps

    Slide 25 - Cordova cross-platform apps

  26. Continued investment in JS frameworks at Microsoft

    Slide 26 - 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
  27. (2-665) Hosted Web Apps and Web Platform Innovations

    Slide 27 - (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