Push it to the Edge
- 3. Agenda What you can expect Hey Microsoft, why did you build another IE? Why get my sites ready for the Microsoft Edge? What do I need to do for that? What is the Chakra Engine? What else can I do with the ChakraCore? How can I test my applications on Microsoft Edge? What you won’t get Please use Microsoft Edge from now! Deep dive into Chakra, JavaScript or ECMAScript
- 4. Microsoft Edge What? When? Why?
- 8. Evergreen
- 9. Windows Browser Roadmap 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 Internet Explorer 10 Internet Explorer 11 Internet Explorer 8 Internet Explorer 9 Internet Explorer 11 Internet Explorer 10 Internet Explorer 11 Microsoft Edge
- 10. 3 41 2 5.5 65 7 84.x 99 10 11 Trident 1995 2015
- 11. Quirks Strict HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 !DOCTYPE
- 12. Quirks Strict HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 !DOCTYPE
- 13. !DOCTYPE Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 x-ua-compatible IE5 Quirks IE7 Compatibility View IE8 Standards Mode HTML4, ES3, CSS2 CSS2.1
- 14. HTML5, SVG, ES5 !DOCTYPE HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 CSS2.1 x-ua-compatible IE5 Quirks IE7 Compatibility View IE8 Standards Mode IE9 Standards Mode
- 15. HTML5, SVG, ES5, CSS3 !DOCTYPE HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 CSS2.1 x-ua-compatible IE5 Quirks IE7 Compatibility View IE8 Standards Mode QME Quirks Mode Emulation IE9 Standards Mode IE10 Standards Mode
- 16. HTML5, SVG, ES5, CSS3 !DOCTYPE HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 CSS2.1 x-ua-compatible IE5 Quirks IE7 Compatibility View IE8 Standards Mode IE10 Standards Mode IE9 Standards Mode QME Quirks Mode Emulation EMIE Enterprise Mode IE11 Standards Mode Modern WebLegacy Web
- 17. HTML5, SVG, ES5, CSS3HTML4, ES3, CSS2 Trident 3 41 2 5.5 65 7 84.x 99 10 11 1995 2015 CSS2.1 IE5 Quirks IE7 Compatibility View IE8 Standards Mode IE10 Standards Mode IE9 Standards Mode QME Quirks Mode Emulation EMIE Enterprise Mode IE11 Standards Mode Modern WebLegacy Web Incoming browser request Which browser? Webkit, Blink & Gecko codeMultiple IE code paths
- 21. Always up-to-date Microsoft Edge is a Universal Windows App Automatic updates
- 22. Performance
- 23. JetStream Browser Benchmark 0 50 100 150 200 250 300 Internet Explorer 11 Edge Chrome Canary Firefox Alpha
- 24. Interoperability
- 25. Interoperability
- 26. Why get your sites ready for Microsoft Edge? With new engine built to be interoperable with modern standards Incoming browser request Which browser? Webkit, Blink & Gecko codeMultiple IE code paths Legacy standards Modern standards Incoming browser request EdgeHTML Webkit, Blink & Gecko code Today, multiple code paths need to be maintained
- 27. User Agent Strings Safari Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A Chrome Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Microsoft Edge Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
- 28. User Agent Strings Safari Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A Chrome Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Microsoft Edge Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246
- 29. TheMobileWeb
- 30. Interoperability Features 4200+ 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. http://dev.modern.ie/platform/status
- 32. And what about Internet Explorer?
- 33. Internet Explorer Internal engine switch enabled by CV lists, x-ua-compatible and meta tags For sites requiring ActiveX or BHO Compatibility Engine mshtml.dll IE5 Quirks IE7 Compat View IE8 Standards Mode IE9 Standards Mode IE10 Standards Mode QME Quirks Mode Emulation IE11 Standards Mode EMIE Enterprise Mode Silverlight Java Flash BHOs ActiveX BHO ActiveX
- 34. Chakra Engine
- 35. Chakra JavaScript Engine Microsoft Edge Universal Windows Apps Server Side Applications Cloud Based Services NoSQL databases Game Engines Front-End tools Internet of Things
- 36. ChakraCore goals Extremely good compliance with the standard Extremely fast Scalability on the server side Easy interaction with native code
- 37. ChakraCore characteristics Leading ECMAScript 6 support ASM.js, SIMD, classes, Async functions, etc… Eliminates document modes Eliminates MS specific extensions Faster progress on interoperability and standards
- 39. Testing for Microsoft Edge F12 Developer Tools Microsoft Edge Selenium WebDriver Support Microsoft Dev Essentials Virtual Machines Vorlon.js
- 40. Call to actions Validate the new UA with your site Use remote.modern.ie to test the latest version of IE Do use feature detection Do not sniff UA Try ChakraCore Send us feedback
Editor's Notes
- #22: Pre-installed default browser on every windows-10 device UWP: Windows PCs, Tablets, Phones, Xbox One, evt. HoloLens Automatic Updates: Chakra und EdgeHTML
- #30: Start: all browsers had unique behaviors (not drawn to scale – meant to emphasize the point) Build: Purple overlay - First step was to remove IE specific behaviors once EdgeHTML was split from MSHTML Build: Green overlay - Second step was to add behaviors at the intersection of other modern browsers – these are especially important for the mobile web, but not exclusively.
- #36: For example: Azure DocumentDB, Cortana, Outlook.com, TypeScript What makes Chakra different: Chakra -> Byte code that can be interpreted. Opt-out JIT. Small memory constrains (important for small sensor devices)
- #37: ASM.js = subset of JS, closer to the hardware What makes Chakra different: Chakra -> Byte code that can be interpreted. Opt-out JIT. Small memory constrains (important for small sensor devices)