Microsoft is releasing a new Browser with Windows 10, called Edge. Edge is a fork of Internet Explorer that leaves legacy support behind and adds support for many new specs and features. This session attempts to highlight many of the changes and provide understanding of what the future holds for web developers.

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?

5. Web Platform
Trident
Browser
Internet Explorer

6. Web Platform
Blink
Browser
Chrome

7. Web Platform
Webkit
Browser
Safari

8. Web Platform
Gecko
Browser
Firefox

9. x-ua-compatible
!DOCTYPE
Trident
IE5
Quirks
IE7
Compat View
IE8
Standards
Mode
IE9
Standards
Mode
IE10
Standards
Mode
QME
Quirks Mode
Emulation
IE11
Standards
Mode
EMIE
Enterprise
Mode

10. In the Meantime
• Chrome, Firefox, Opera and Safari are
evergreen
– Updated frequently
– No need to support different document modes

11. Microsoft Edge
Evergreen
Microsoft EdgeHTML

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

26. F12 Developer Tools

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