Microsoft Edge: Introducing the new browser for Windows 10

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. It’s demo time.
4. 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
5. 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
6. “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
7. 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
8. 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
9. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events
10. Interoperable intersection The Mobile Web
11. 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
12. 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
13. Control Appearance Overrides • Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
14. 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
15. IE11 on Windows 8.1 MS Edge: With support for –webkit transitions
16. But, we still have to be served the right content...
17. Getting the right, modern content
18. 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
19. 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
20. 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
21. The HTML5 Standard even does this!
22. • 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; }
23. Please don’t do UA sniffing.
24. Sidenote: Using data to design a platform
25. Insiders Program 3+ million users  
26. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
27. Why a new engine? A fork from the past
28. Web Platform Trident Browser Internet Explorer
29. Web Platform Blink Browser Chrome
30. Web Platform Webkit Browser Safari
31. Web Platform Gecko Browser Firefox
32. Trident 1995 3 4 1 2 5.5 6 5 7 8 4.x 9 2015 9 10 11
33. 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
34. 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
35. 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
36. Blink In the meantime… Chrome, Firefox, Opera and Safari are evergreen Updated frequently No need to support different document modes
37. Evergreen Microsoft EdgeHTML Microsoft Edge
38. How do we fix these interoperability differences and preserve compatibility?
39. Internet Explorer: MSHTML Interoperability & compatibility Versioned “document modes” For modern HTML websites, intranet & Enterprise Mode
41. What about JavaScript performance?
42. 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
43. Enable developers to deliver consistently delightful user experiences across all form factors
44. 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
45. 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)
46. 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
47. 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
48. 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
49. 30% improvement in TypeScript compiler’s throughput Impact of pipeline changes Time
50. ECMAScript 6
51. 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
52. 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/
53. http://aka.ms/ES6CompatChart ES6: Current Status
54. Future
55. 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
56. 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
57. “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)
58. F12
60. 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
61. 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…
62. Why is now the right time for a new browser from Microsoft?* *And why should I care?
63. Windows 10: An evolving world of computing
64. How do I test my websites?
65. • 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?
66. Netmarketshare.com
67. StatCounter.com
68. Microsoft Edge Dev Portal
70. • 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
71. http://vorlonjs.com
72. vorlon.js Open source Extensible plugin architecture Platform agnostic Powered by Node.js and Socket.io New plugins WebAudio  Connector for F12 debug port
73. Remote IE – remote.modern.ie + ngrok
74. http://bit.ly/goghostlab
75. Headless? Not yet.
76. Stay up to date!
77. about:flags
78. 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
79. What’s available in Microsoft Edge now
80. What’s in the works now
81. Give feedback on uservoice.modern.ie
82. http://stackoverflow.com/questions/tagged/microsoft-edge
83. Check out github.com/microsoftedge
84. Follow @MSEdgeDev
85. 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!!!
86. Thank you! Questions??