Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 54 Anzeige

SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow

Herunterladen, um offline zu lesen

We’ve made literally thousands of changes to jettison the legacy of the past and to dramatically improve support for the web of today andtomorrow. Come and learn about the new capabilities available and what this means for web developers everywhere.

We’ve made literally thousands of changes to jettison the legacy of the past and to dramatically improve support for the web of today andtomorrow. Come and learn about the new capabilities available and what this means for web developers everywhere.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow (20)

Aktuellste (20)

Anzeige

SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow

  1. 1. June 24, 2015 – SFHTML5 Microsoft Edge for the Web of Today and Tomorrow @JacobRossi Senior Program Manager Microsoft Edge platform team
  2. 2. Browser wars
  3. 3. Technology wars
  4. 4. Massive multiplayer wars
  5. 5. We’re distracted.
  6. 6. What makes us love the web?
  7. 7. The web has unique strengths
  8. 8. Playing to the web’s unique strengths Linkability Searchability Ephemerality Interoperability Openness An interconnected and indexed set of 33 trillion pages that run cross-platform and are publicly viewable.
  9. 9. Write on the page and share it Search faster with Cortana Save it for later in your Reading List Run the x-browser code with EdgeHTML Plan for the future via our open roadmap Linkability Searchability Ephemerality Interoperability Openness
  10. 10. Write on the page and share it Search faster with Cortana Save it for later in your Reading List Run the x-browser code with EdgeHTML Plan for the future via our open roadmap Linkability Searchability Ephemerality Interoperability Openness
  11. 11. A fork from the past
  12. 12. The engine split
  13. 13. Interoperability: a new approach
  14. 14. “The web should just work for everyone – users, developers, and businesses.”
  15. 15. If standard defines an API behavior but all other browsers behave differently, is it a standard? Interoperability means the web “just works” if ($.client.profile().name === 'msie') { var IHateIE = { 'scrollTop': context.$textarea.scrollTop(), 'pos': context.$textarea.textSelection('getCaretPosition', {startAndEnd: true}) }; context.$textarea.data('IHateIE', IHateIE); } For some reason IE seems to be calculating that differently. You might have to put in a special rule for IE there. In Chrome, the error does not occur, the xml is appended successfully and the other methods after these two run as expected. In IE however, a hierarchyRequestError is thrown at the appendChild statement. no matter HOW I passed the ko object to the child window, something got lost. Horrible behavior, IE... Why does the following code throw an 'Unspecified error' (on the appendChild line) in IE11 which I click the button?
  16. 16. Getting the right, modern content
  17. 17. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  18. 18. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  19. 19. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
  20. 20. Mozilla/5.0
  21. 21. The HTML5 Standard even does this!
  22. 22. window.mobileCheck = function() { var check = false; (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi ptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|win dows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|- m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm- |cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|- d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g- mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |- |/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1- w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)- |on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1- 8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i- )|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(- |0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m- |m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|- v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  23. 23. Please don’t do UA sniffing
  24. 24. Please don’t do UA sniffing Please avoid UA sniffing as much as possible Always do feature detection (If isolating a bug) Sniff for specific browser versions Assume unknown browsers are good
  25. 25. Interoperable intersection TheMobileWeb
  26. 26. Interoperable intersection TheMobileWeb
  27. 27. Prioritizing interop Interop2 Interop1 Interop3 Interop0Worked in IE11 Used by real sites Works in other browsers We anticipate sites will require this functionality soon Real site usage is farther out or never
  28. 28. Font Resource Handling Before loading font resources, IE and Firefox check the font server’s CORS header, and the font’s installable header (as per W3C specification). This is done to ensure that the font usage rights are honored. WebKit does not check CORS / installable header.before after
  29. 29. Control Appearance Overrides Apple added ways to restyle HTML controls on the iPhone to match OS control look and feel. Web developers add custom markup to disable Apple’s styles and provide their own. -webkit-appearance: none ← Most common value. -webkit-appearance: button -webkit-appearance: checkbox -webkit-appearance: radio etc.. before after
  30. 30. Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
  31. 31. Gradients Apple originally added support for gradients to WebKit using a Core Graphics friendly syntax. During standardization the syntax was changed leaving WebKit incompatible with the standard. Some sites continue to use the original Apple syntax. Proprietary Apple Markup (still in WebKit): -webkit-gradient(linear, left top, right bottom, colorstop(0, #FFFFFF), color-stop(1, #00A3EF)); Webkit-prefixed W3C Standard Gradient in WebKit: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); Unprefixed W3C standard: linear-gradient(to bottom right, FFFFFF 0%, #00A3EF 100%); before after
  32. 32. innerHTML orphaned children
  33. 33. Interop patterns we’re working on Bugs where we’re just plain wrong Standards we’re missing Unstandardized but interoperable APIs “defacto” differences from standards Bugs in other browsers innerHTML orphaned children Web audio, preserve-3d, RTC, CSP, responsive images -webkit-appearance, <meta viewport> <meta http-equiv="refresh" content="0;http://foo.com" /> body.scrollTop versus documentElement.scrollTop, DOM prototypes
  34. 34. To date, we’ve made of these types of fixes in Edge.
  35. 35. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events
  36. 36. interface AesGcmEncryptResult { readonly ciphertext constructor readonly tag } interface ApplicationCache : EventTarget { function addEventListener function dispatchEvent function removeEventListener } interface Attr : Node { readonly boolean expando } interface AudioTrackList : EventTarget { addEventListener dispatchEvent removeEventListener } interface BookmarkCollection Remembering the IEisms that have passed
  37. 37. Using data to design a platform
  38. 38. Insiders Program 3+ million users  
  39. 39. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
  40. 40. Implementing XPath: crawler data in action
  41. 41. Implementing XPath: crawler data in action
  42. 42. Hypothesis: Most XPath queries can be rewritten in CSS selectors //element1/element2/element3 //element[@attribute="value"] .//*[contains(concat(" ", @class, " "), " classname ")] element1 > element2 > element3 element[attribute="value"] *.classname
  43. 43. So we tried it 94%
  44. 44. So we tried it 97%
  45. 45. Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath code.google.com/p/wicked-good-xpath C++ JS 97% 3%
  46. 46. Standards and our roadmap
  47. 47. Specifications
  48. 48. 130 140 150 160 170 180 190 200 210 May June July Aug Sept Oct Nov Dec Jan Feb Mar April Under Consideration In Development Preview Release Planning in the open
  49. 49. What’s available in Microsoft Edge now
  50. 50. How we think about what’s beyond that Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity
  51. 51. Join in and help us build a browser for you uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @JacobRossi

Hinweis der Redaktion

  • Why do we want the web to win in this fight?
  • TODO: add more splitting and animate between them
  • Anyone remember Mozilla 5.0? It’s actually Netscape Navigator 6, from the year 2000
  • Actual UA sniffing example
  • We receive an amazing amount of data on site compatibility and I’ll talk more about that in a moment.
    To make sense of it all, we use a classification system to prioritize what we invest in to maximize its impact.
    At the top of this priority list is what we call “Interop 0”, these are sites that worked in IE11 but no longer work in Project Spartan. Sometimes this is because we goofed, but most often it’s because we’re now getting interoperable content and need to make a change to behave like other browsers. So beyond just ensuring a site continues to work, we’re also reducing the delta in behavior of our engine when compared with other engines.

    Next there is Interop 1 issues, these are ones that affect Project Spartan but also were broken in IE11. Often these are new standards that are being adopted by the web. So we implement them.

    Next we have Interop 2, these are things that are typically emerging in standards. They may or may not be supported by any browser at the moment. Generally, sites aren’t yet adopting these features quite yet but we anticipate they will in the near future.

    Finally there’s the Interop 3 bucket, these are things that are still in the idea or iteration stage or are supported but deprecated in other browsers with very low or 0 usage on the web. Some features in this bucket will eventually make it to Interop 2 once standards solidify and developer interest increases. Others are on their way out and may never get implemented in our engine.

  • Feature 602898

    http://www.w3.org/TR/css3-fonts/
    CSS Fonts Module Level 3
    W3C Candidate Recommendation 3 October 2013

    4.9 Font fetching requirements
    For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document.
    The implications of this for authors are that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using the Access-Control-Allow-Origin HTTP header. For other schemes, no explicit mechanism to allow cross-origin loading, beyond what is permitted by the potentially CORS-enabled fetch method, is defined or required.
  • It makes developers really happy to remove code. Like really happy.

    I tried to enumerate all the IEisms we’ve removed, but I just couldn’t.

  • So I made a diff.
    Let’s take a second to review the non-interoperable IE’isms we’ve removed thus far.
  • “So we’re done once each one of them browses 11 million pages”
  • [Diagram for crawler + instrumentation]

    [Perhaps animate fade/in out series of stats]

    [Live demo Finder – “someone give me a popular DOM API”]
  • Status tracks 193 standards or proposals – this doesn’t include the baseline stuff supported IE8+
    The HTML5 spec alone is 693 pages when printed.
    Microsoft has 90 members in 58 different Working Groups (avg amongst top 5 browser makers is ~80)

    So you can imagine how easy it is for browsers to behave differently or for specs to have mistakes.

×