Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Microsoft Edge: Introducing the new browser for...

Microsoft Edge: Introducing the new browser for Windows 10

Ryan Joy

July 23, 2015
Tweet

More Decks by Ryan Joy

Other Decks in Technology

Transcript

  1. Microsoft Edge: Introducing the new browser for Windows 10 Ryan

    Joy Startup Evangelist @ Microsoft @atxryan
  2. 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
  3. 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
  4. 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
  5. “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
  6. 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
  7. 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, <picture> 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 <date> element, HTML <keygen> element, HTML <main> element, HTML <output> element, HTML <summary> element, HTML <detail> element, HTML <time> 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 <ol> Reverse, Server- Sent Events, Viewport APIs, Quota API, etc. Interoperability Features
  8. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible

    currentStyle currentStyle IE Layout Quirks MS-prefixed Events
  9. 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
  10. 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
  11. Control Appearance Overrides • Some sites restyle input controls using

    -webkit-appearance: none for critical functionality. before after
  12. 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
  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 User-Agent Strings
  14. 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
  15. 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
  16. • 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; }
  17. 33 trillion pages 44 billion sites 7 thousand APIs bing

    Web Crawler Instrumentation Microsoft Edge
  18. Trident 1995 3 4 1 2 5.5 6 5 7

    8 4.x 9 2015 9 10 11
  19. 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
  20. 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
  21. 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
  22. Blink In the meantime… Chrome, Firefox, Opera and Safari are

    evergreen Updated frequently No need to support different document modes
  23. 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
  24. 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
  25. 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)
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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/
  31. 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
  32. 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
  33. “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)
  34. F12

  35. 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
  36. 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…
  37. Why is now the right time for a new browser

    from Microsoft?* *And why should I care?
  38. • 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?
  39. • 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
  40. vorlon.js Open source Extensible plugin architecture Platform agnostic Powered by

    Node.js and Socket.io New plugins WebAudio  Connector for F12 debug port
  41. 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
  42. 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!!!