Tweet
Tweet

Slide 1

Slide 1 text

June 24, 2015 – SFHTML5 Microsoft Edge for the Web of Today and Tomorrow @JacobRossi Senior Program Manager Microsoft Edge platform team

Slide 2

Slide 2 text

Browser wars

Slide 3

Slide 3 text

Technology wars

Slide 4

Slide 4 text

Massive multiplayer wars

Slide 5

Slide 5 text

We’re distracted.

Slide 6

Slide 6 text

What makes us love the web?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

The web has unique strengths

Slide 9

Slide 9 text

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 publically viewable.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

A fork from the past

Slide 13

Slide 13 text

The engine split

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Interoperability: a new approach

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

“The web should just work for everyone – users, developers, and businesses.”

Slide 18

Slide 18 text

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?

Slide 19

Slide 19 text

Getting the right, modern content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Mozilla/5.0

Slide 24

Slide 24 text

The HTML5 Standard even does this!

Slide 25

Slide 25 text

window.mobileCheck = function() { var check = false; (function(a){if(/(android|bb\d+|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);

Slide 26

Slide 26 text

Please don’t do UA sniffing

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Interoperable intersection The Mobile Web

Slide 29

Slide 29 text

Interoperable intersection The Mobile Web

Slide 30

Slide 30 text

Prioritizing interop Interop 2 Interop 1 Interop 3 Interop 0 Worked 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

innerHTML orphaned children

Slide 36

Slide 36 text

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, body.scrollTop versus documentElement.scrollTop, DOM prototypes

Slide 37

Slide 37 text

To date, we’ve made of these types of fixes in Edge.

Slide 38

Slide 38 text

Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Using data to design a platform

Slide 41

Slide 41 text

Insiders Program 3+ million users  

Slide 42

Slide 42 text

33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge

Slide 43

Slide 43 text

Implementing XPath: crawler data in action

Slide 44

Slide 44 text

Implementing XPath: crawler data in action

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

So we tried it 94%

Slide 47

Slide 47 text

So we tried it 97%

Slide 48

Slide 48 text

Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath code.google.com/p/wicked-good-xpath C++ JS 97% 3%

Slide 49

Slide 49 text

Standards and our roadmap

Slide 50

Slide 50 text

Specifications

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

What’s available in Microsoft Edge now

Slide 53

Slide 53 text

How we think about what’s beyond that Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity

Slide 54

Slide 54 text

Join in and help us build a browser for you uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @JacobRossi