Microsoft Edge: Introducing the new browser for Windows 10 Ryan Joy Startup Evangelist @ Microsoft @atxryan 

Faster, safer and sites “just work” • Always up-to-date, and with a new engine built for the modern web • More secure by default • Single codebase across all Windows 10 devices, with an experience that scales fluidly for each device • Set as default web browser for Windows 10 • Windows 10 will Reach 1 Billion Devices 

It’s demo time. 

New & updated HTML5 features CSS • @supports • Flexbox standards update • dppx unit • transform-style: preserve-3d • Filter effects Storage & networking • HTTP/2 • Content security policy • Web Crypto API updates • HSTS (HTTP Strict Transport Security Media & RTC • Media capture • HLS • WebAudio • Video Tracks • WAV Audio support Input & Editing • Touch events • Pointer lock API • Media Queries L4 - Interaction • Selection API • Gamepad API JavaScript • ES6 Math, Number, String, RegExp & Object built-ins • Arrow functions, Enhanced object literal, Template strings, Default, Rest, Spread • Map, Set, Weakmap, __proto__, Proxies • Let, Const, Promises, Classes DOM & Graphics • SVG foreignobject • SVG attribute animation • Complete WebGL support • DOM event constructors • DOM Level 3 XPath Shipped Preview Release In development 

Extensibility Internet Explorer has supported nearly 30 different legacy extension points for nearly 2 decades.  Includes: ActiveX, Silverlight, Toolbars, BHOs, many others.  Legacy extension points affect security, reliability and performance, and limit browser innovation.  Internet Explorer on Windows 10 will continue to support these extension points for enterprise compatibility. Microsoft Edge is designed for the modern web and does not support IE legacy extensibility points. • It will support both platform and browser extensions:  Native support for Flash and PDF  Modern JavaScript-based extension model coming later in 2015 

“The web should just work for everyone – users, developers and businesses.” http://blogs.msdn.com/b/ie/archive/2014/05/27/launching- status-modern-ie-amp-internet-explorer-platform- priorities.aspx 

Interoperability goals Our goal is “the web just works” Sites authored for Firefox, Chrome and Safari “just work” with Microsoft Edge Evolve at the speed of the web and only support latest version Use standards as a reference but prioritize real-world interop (and then fix standards if needed) Allow web developers to target a single version Internet sites use the new rendering engine (EdgeHTML) by default New update cadence to ensure browser is always up-to-date Make a clean break from the past Interoperable user-agent string to get the same content as other browsers (no IE specific code) Over 4200 interoperability fixes, and 45+ new features to render it correctly Remove IE specific behaviors 

3000+ Interoperability Fixes, Preserve-3d, Touch Events, CSS Filter Effects, DOM Clipboard Support, HTML Drag and Drop, Web Audio, CSS Position Sticky, CSS @supports, CSS Flexbox, HTML Beacon, WebDriver, IndexedDB, WebCrypto, Internationalization Mixed Languages Support, CSS Grid, CSS Variables, srcset, element, Web Workers Update, DOM4 Events, Font Loading, BDI, Cross- domain, HLS Manifest, Block Ellipsis, WAV, @rules, CSS Text(), CSS Border Logical, Logical Box Model, DOM Gamepad API, DOM FileSystem API, HTML element, HTML element, HTML element, HTML element, HTML element, HTML element, HTML element, Native PDF, AppCache, SVG Hosting, Mutation Observers, HTML bidirectional, HTML Speech API, SVG animations, SVG transitions, SVG transforms, Canvas Path, Canvas Accessibility API, CSS Select Control, CSS Masking, CSS Clipping, Navigation Error Logging, CSS element(), CSS Shapes, ORTC, CSS Escape, Shared Workers, ES6 Modules, ES6 Promises, CSS Intrinsic & Extrinsic Sizing, Web Components, CSS Scoped Styles, HTTP 2.0, CSS Resize, WebGL, Canvas Blend Modes, CSS Interpolation, CSS Line Grid, CSS Line Box Contain, CSS Ruby, DOM Event Constructors, HTML

Reverse, Server- Sent Events, Viewport APIs, Quota API, etc. Interoperability Features 

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

Interoperable intersection The Mobile Web 

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. • Removing security constraints on downloaded fonts before after 

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 

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

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 

IE11 on Windows 8.1 MS Edge: With support for –webkit transitions 

But, we still have to be served the right content... 

Getting the right, modern content 

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 

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 

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 

The HTML5 Standard even does this! 

• window.mobileCheck = function() { • var check = false; • (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec |hiptop|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| windows (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); • return check; } 

Please don’t do UA sniffing. 

Sidenote: Using data to design a platform 

Insiders Program 3+ million users   

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

Why a new engine? A fork from the past 

Web Platform Trident Browser Internet Explorer 

Web Platform Blink Browser Chrome 

Web Platform Webkit Browser Safari 

Web Platform Gecko Browser Firefox 

Trident 1995 3 4 1 2 5.5 6 5 7 8 4.x 9 2015 9 10 11 

Trident !DOCTYPE 1995 3 4 1 2 5.5 6 5 7 8 4.x 9 2015 9 10 11 Quirks Strict 1995 HTML4, ES3, CSS2 

Trident IE5 Quirks IE7 Compatibility View IE8 Standards Mode x-ua-compatible !DOCTYPE 1995 3 4 1 2 5.5 6 5 7 8 4.x 9 2015 9 10 11 CSS2.1 HTML4, ES3, CSS2 

1995 3 4 1 2 5.5 6 5 7 8 4.x Trident IE5 Quirks IE7 Compat View IE8 Standards Mode 9 IE9 Standards Mode IE10 Standards Mode QME Quirks Mode Emulation 2015 9 10 11 x-ua-compatible !DOCTYPE IE11 Standards Mode EMIE Enterprise Mode Legacy Web CSS2.1 Modern Web HTML5, SVG, ES5, CSS3 HTML4, ES3, CSS2 

Blink In the meantime… Chrome, Firefox, Opera and Safari are evergreen Updated frequently No need to support different document modes 

Evergreen Microsoft EdgeHTML Microsoft Edge 

How do we fix these interoperability differences and preserve compatibility? 

Internet Explorer: MSHTML Interoperability & compatibility Versioned “document modes” For modern HTML websites, intranet & Enterprise Mode 

No content

What about JavaScript performance? 

Chakra modifications IE5 Quirks IE7 Compat View IE8 Standards Mode IE9 Standards Mode IE10 Standards Mode QME Quirks Mode Emulation IE11 Standards Mode EMIE Enterprise Mode New rendering engine Compat mshtml.dll + jscript9.dll (IE11) Interoperability edgehtml.dll + chakra.dll • New architecture separates compat vs interop focused engines • Old Chakra engine (jscript9.dll) provides enterprise class compatibility • Edge Chakra engine (chakra.dll) • Eliminates document modes • Eliminates MS specific extensions (e.g. ActiveXObject) • Enables faster progress on interoperability and standards • Continually updated • Much faster 

Enable developers to deliver consistently delightful user experiences across all form factors 

Utilize the hardware to it’s full potential Execute fast & get out of the way to let your code run Optimize to make your JavaScript code run faster Improve code throughput to save CPU cycles (& battery) Stay lean and remove GC pauses Don’t get in the way of consistent 60fps animations Performance: JavaScript perspective 

Benchmarks… 64-bit browsers System info: HP Compaq 8100 Elite with Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz (4 cores), 12GB RAM running Windows 10 Enterprise Technical Preview 21854 10247 21014 19271 0 5000 10000 15000 20000 25000 Project Spartan IE11 Chrome Canary 43.0.2369.0 Firefox Alpha 40.0a1(04-14) OCTANE 2.0 (higher is better) 148 96 136 123 0 25 50 75 100 125 150 Project Spartan IE11 Chrome Canary 43.0.2369.0 Firefox Alpha 40.0a1(04-14) JET STREAM (higher is better) 

Fast startup Utilizes the power of the underlying hardware for fast execution Chakra’s Multi-tiered Execution Pipeline Garbage Collector Additional Threads Full JIT Compiler Main Thread Source Code Parser AST Bytecode Generator Bytecode Profiling Interpreter Machine Code Bytecode + Profile Data Machine Code Bailout 

New non-optimizing JIT tier Increases code throughput by faster transition to compiled code Execution Pipeline Changes: Simple JIT Garbage Collector Additional Threads Full JIT Compiler Main Thread Source Code Parser AST Bytecode Generator Bytecode Profiling Interpreter Machine Code Bytecode + Profile Data Machine Code Bailout Simple JIT 

Execution Pipeline Changes: Multiple concurrent JITs Garbage Collector Additional Threads Full JIT Compiler Main Thread Source Code Parser AST Bytecode Generator Bytecode Profiling Interpreter Machine Code Bytecode + Profile Data Machine Code Bailout Simple JIT Full JIT Compiler Simple JIT Large functions could block the JIT compiler Ability to spawns multiple JIT threads based on hardware profiles 

30% improvement in TypeScript compiler’s throughput Impact of pipeline changes Time 

ECMAScript 6 

ECMAScript6 – Key Proposals Library Builders map, set & weakmap __proto__ Proxies Symbols Sub-classable built-ins Scalable Apps let, const & block- scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs 

ECMAScript6 – Implemented in Chakra Library Builders map, set & weakmap __proto__ Proxies Symbols Sub-classable built-ins Scalable Apps let, const & block- scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs Behind a flag: Classes, Generators, Default parameters, RegExp /y /u flag https://status.modern.ie/ 

http://aka.ms/ES6CompatChart ES6: Current Status 

Future 

ES7 moving to a train model with yearly releases Before ratification, proposal needs to have an implementation and test suite Process published at http://aka.ms/TC39Process Championing the ES7 “Async functions” proposal Keenly watching Object.observe, Decorators amongst other proposals ECMAScript.NEXT 

ASM.js Bringing predictable near native performance to web platform • Optimizable, low-level subset of JavaScript • Leveraged principally by transpiling C/C++ code to run on the Web platform • AOT compilation provides predictable performance • Potential to provide speed benefits to many more scenarios over a period of time • Partnering closely with Mozilla ever since we started prototyping • Starting to see light-ups and good performance wins • Available in-preview in about:flags 

“In Development” in partnership with Intel Exploits data level parallelism using hardware capabilities Allows same operations to be performed on multiple data points simultaneously Large number of existing processors support SIMD operations Benefits applications in fields like games, 3D graphics, audio/video processing, multimedia applications etc. SIMD: Single Instruction, Multiple Data (ES7) 

F12 

No content

Browser Tools – A lot in common DOM Inspection Style Tracing Computed Properties Layout View Color Picker Debugger Breakpoints Watches Console Console API CPU profiling Style profiling Network tracing Heap snapshots Snapshot diffing Auto completion Inspect element Pretty printing So, so many tools in the tool box *Not to scale or remotely mathematically sound! The 80% Case 

Browser Tools – A little unique TracePoints Statement level JS Just my code Find references Set next statement Track changes TypeScript colouring 3D view Web audio editor Animation Shader editor Reflow event logging Responsive design mode Lots of extensions Network throttling Device emulation Pseudo elements Edit and continue Paint correlation CSS animation Animation scrubbing More… More… More… 

Why is now the right time for a new browser from Microsoft?* *And why should I care? 

Windows 10: An evolving world of computing 

How do I test my websites? 

• Lower your engineering costs & complexity • Less browser-specific code and reduced development/maintenance time due to interoperability focus • Lower operating costs and improved performance due to more efficient CPU, cache and network utilization • Windows as a Service: Users will be on Windows 10 • Free upgrade for 12 months for Windows 8.x, Windows 7, and Windows Phone 8.1 users • Detailed analysis of existing Windows customer hardware leading to high confidence upgrades • 450+ million devices eligible for upgrade to Windows 10 with Microsoft Edge Why get your sites ready for the Microsoft Edge? 

Netmarketshare.com 

StatCounter.com 

Microsoft Edge Dev Portal 

No content

• WebDriver does work with Internet Explorer • Set IE to new engine in Windows 10 to execute tests • WebDriver support in Microsoft Edge in planned • Timing is TBD • IE WebDriver Tool for Internet Explorer 11 • http://bit.ly/ie11webdriver WebDriver 

http://vorlonjs.com 

vorlon.js Open source Extensible plugin architecture Platform agnostic Powered by Node.js and Socket.io New plugins WebAudio  Connector for F12 debug port 

Remote IE – remote.modern.ie + ngrok 

http://bit.ly/goghostlab 

Headless? Not yet. 

Stay up to date! 

about:flags 

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 See where Edge is headed at status.modern.ie 

What’s available in Microsoft Edge now 

What’s in the works now 

Give feedback on uservoice.modern.ie 

http://stackoverflow.com/questions/tagged/microsoft-edge 

Check out github.com/microsoftedge 

Follow @MSEdgeDev 

Call to actions Validate the new UA with your site Use remote.modern.ie to test the latest version of IE / EdgeHTML Do use feature detection Do not sniff UA Send feedback!!! 

Thank you! Questions??