Tweet
Tweet

Slide 1

Slide 1 text

May 4, 2015 – Mountain View, CA Platform principles and roadmap @JacobRossi Senior Program Manager Microsoft Edge platform team

Slide 2

Slide 2 text

The new engine: a fork from the past Interoperability: a new approach Using data to design the platform Standards and our roadmap Agenda

Slide 3

Slide 3 text

A fork from the past

Slide 4

Slide 4 text

The engine split

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Interoperability: a new approach

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 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 10

Slide 10 text

Getting the right, modern content

Slide 11

Slide 11 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 12

Slide 12 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 13

Slide 13 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 14

Slide 14 text

Mozilla/5.0

Slide 15

Slide 15 text

The HTML5 Standard even does this!

Slide 16

Slide 16 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 17

Slide 17 text

Please don’t do UA sniffing

Slide 18

Slide 18 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 19

Slide 19 text

Interoperable intersection The Mobile Web

Slide 20

Slide 20 text

Interoperable intersection The Mobile Web

Slide 21

Slide 21 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 22

Slide 22 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 23

Slide 23 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 24

Slide 24 text

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

Slide 25

Slide 25 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 26

Slide 26 text

innerHTML orphaned children

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 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 30

Slide 30 text

By the numbers: Trident versus EdgeHTML 220k+ Unique LoC Removed 300k+ Unique LoC Added 300+ APIs removed 49 New Major Features 4200+ Interop Fixes 6 document modes

Slide 31

Slide 31 text

Using data to design a platform

Slide 32

Slide 32 text

Insiders Program 3+ million users  

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Implementing XPath: crawler data in action

Slide 35

Slide 35 text

Implementing XPath: crawler data in action

Slide 36

Slide 36 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 37

Slide 37 text

So we tried it 94%

Slide 38

Slide 38 text

So we tried it 97%

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Standards and our roadmap

Slide 41

Slide 41 text

Specifications

Slide 42

Slide 42 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 43

Slide 43 text

What’s available in Microsoft Edge now

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Microsoft Edge Dev site dev.modern.ie

Slide 46

Slide 46 text

Join in and help us build a browser for you dev.modern.ie blogs.windows.com/MSEedgeDev uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @MSEdgeDev