An Introduction to Microsoft Edge
Download as PPTX, PDF2 likes2,772 views
The document discusses the development and features of Microsoft Edge and its relation to Windows 10, highlighting its modern architecture and security enhancements. It details new web standards and updates, including HTML5 and CSS advancements, as well as tools and resources available for developers. The presentation emphasizes the future of browser interoperability and the importance of keeping pace with evolving web technologies.
![Blog - ryanhayes.net
Twitter - @RyannosaurusRex
Slide Decks - https://slides.com/ryanhayes
Ninja:["JavaScript", "HTML5", "EmberJS", "C#", "ASP.NET"],
Passions:["team efficiency", "lean startup method in the
enterprise", "guitar"],
Awards:["Microsoft MVP”, “IE UserAgents "]
Who Is Ryan?](https://image.slidesharecdn.com/microsoftedgemvp-150514191335-lva1-app6892/85/An-Introduction-to-Microsoft-Edge-3-320.jpg)
An Introduction to Microsoft Edge
- 1. Windows 10 & Edge Chris Love Ryan Hayes May 14 – 15, 2015 2015 Microsoft MVP Virtual Conference
- 2. Who Am Chris? • ASP.NET MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Web, JavaScript, CSS & HTML5 • Slide Decks – slidesha.re/15YTrTT • Source Code – http://GitHub.com/docluv • @ChrisLove • Love2Dev.com
- 3. Blog - ryanhayes.net Twitter - @RyannosaurusRex Slide Decks - https://slides.com/ryanhayes Ninja:["JavaScript", "HTML5", "EmberJS", "C#", "ASP.NET"], Passions:["team efficiency", "lean startup method in the enterprise", "guitar"], Awards:["Microsoft MVP”, “IE UserAgents "] Who Is Ryan?
- 4. Why A New Browser?
- 10. In the Meantime • Chrome, Firefox, Opera and Safari are evergreen – Updated frequently – No need to support different document modes
- 12. Microsoft Edge Is… • Built for Windows 10 – Built on the Universal Windows Platform – Updated frequently, along with Windows 10 • Ready for the future – Free from legacy IE extensibility points (ActiveX, Toolbars, BHOs, etc.) – Built on top of modern security protections (64-bit, AppContainer, etc.) – Able to launch Internet Explorer when needed for backwards compatibility
- 13. A fork from the past
- 16. Modern Web Interoperability The Web should just work for everyone (But sometimes it doesn’t)
- 17. The web is on a wider variety of devices than ever The dream: Write once, run anywhere
- 18. Specifications
- 19. 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
- 20. About:flags
- 21. New Features
- 22. 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
- 23. And more… 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, Internation 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.
- 24. Status.modern.ie
- 25. New Features in preview @ https://status.modern.ie
- 27. F12 Road Map Tools for IE11 on Win10+ are frozen Full steam ahead for Microsoft Edge
- 28. Browser Tools Have 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
- 29. TracePoints Statement level JS Just my code Find references Set next statement Track changes TypeScript coloring 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… Browser Tools A little unique
- 30. Testing & Debugging Your Site • http://dev.modern.ie/ • RemoteIE - https://remote.modern.ie/ • Free Virtual Machines • Windows, Linux, MAC • SiteScan - http://dev.modern.ie/tools/staticscan/ • Browser Screen Shots - http://dev.modern.ie/tools/screenshots/
- 31. ES6 Status
- 32. ES6 Status • ES6 ES2015 • Final Draft completed • Largest Update in JavaScript's History • Moving to train model • Future updates will be much smaller • Test262 Coverage In Progress • You can help! https://github.com/tc39/test262
- 33. ECMAScript 6 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
- 34. Edge <3 ES6 •Highest Score Among Browsers: ES6 Compat Table •Interoperability-driven Standards Development • Spartan delivers without breaking the web or needlessly differing from other browsers •Embrace the Future • ASM.js can be turned on via about:flags. SIMD in development. •` http://aka.ms/ES6CompatChart
- 35. Edge In Action