The Microsoft Edge Rendering Engine that makes the Web just work

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

Transcript

1. May 4, 2015 – Mountain View, CA Platform principles and roadmap @JacobRossi Senior Program Manager Microsoft Edge platform team
2. The new engine: a fork from the past Interoperability: a new approach Using data to design the platform Standards and our roadmap Agenda
3. A fork from the past
4. The engine split
6. Interoperability: a new approach
8. “The web should just work for everyone – users, developers, and businesses.”
9. 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?
10. Getting the right, modern content
11. 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
12. 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
13. 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
14. Mozilla/5.0
15. The HTML5 Standard even does this!
16. 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);
17. Please don’t do UA sniffing
18. 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
19. Interoperable intersection The Mobile Web
20. Interoperable intersection The Mobile Web
21. 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
22. 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
23. 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
24. Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
25. 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
26. innerHTML orphaned children
27. To date, we’ve made of these types of fixes in Edge. 4200+
28. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events
29. 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
30. 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
31. Using data to design a platform
32. Insiders Program 3+ million users  
33. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
34. Implementing XPath: crawler data in action
35. Implementing XPath: crawler data in action
36. 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
37. So we tried it 94%
38. So we tried it 97%
39. Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath github.com/google/wicked-good-xpath C++ JS 97% 3%
40. Standards and our roadmap
41. Specifications
42. 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
43. What’s available in Microsoft Edge now
44. How we think about what’s beyond that Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity
45. Microsoft Edge Dev site dev.modern.ie
46. 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