Windows 10 & EdgeChris LoveRyan Hayes

May 14 – 15, 2015

2015 Microsoft MVP Virtual Conference

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

Blog - ryanhayes.netTwitter - @RyannosaurusRexSlide 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?

Why A New Browser?

Web Platform

Trident

BrowserInternet Explorer

Web Platform

Blink

BrowserChrome

Web Platform

Webkit

BrowserSafari

Web Platform

Gecko

BrowserFirefox

x-ua-compatible

!DOCTYPE

Trident

IE5 Quirks

IE7 Compat

View

IE8Standards

Mode

IE9Standards

Mode

IE10Standards

Mode

QMEQuirks Mode

Emulation

IE11Standards

Mode

EMIEEnterprise

Mode

In the Meantime

• Chrome, Firefox, Opera and Safari are evergreen– Updated frequently– No need to support different document modes

Microsoft Edge

Evergreen

Microsoft EdgeHTML

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

A fork from the past

Modern Web Interoperability

The Web should just work for everyone(But sometimes it doesn’t)

The web is on a wider variety of devices than ever

The dream: Write once, run anywhere

Specifications

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

About:flags

New Features

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

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.

Status.modern.ie

New Features in preview @ https://status.modern.ie

F12 Developer Tools

F12 Road Map

Tools for IE11 on Win10+ are frozen

Full steam ahead for Microsoft Edge

Browser Tools Have a Lot in Common

DOM InspectionStyle TracingComputed PropertiesLayout ViewColor PickerDebuggerBreakpointsWatchesConsoleConsole API

CPU profilingStyle profilingNetwork tracingHeap snapshotsSnapshot diffingAuto completionInspect elementPretty printing

So, so many tools in the tool box

*Not to scale or remotely mathematically sound!

The 80%Case

TracePointsStatement level JSJust my codeFind references

Set next statementTrack changesTypeScript coloring

3D viewWeb audio editorAnimationShader editor

Reflow event loggingResponsive design modeLots of extensions

Network throttlingDevice emulationPseudo elementsEdit and continue

Paint correlationCSS animationAnimation scrubbing

More…

More…

More…

Browser Tools A little unique

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/

ES6 Status

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

ECMAScript 6

Library Builders

map, set & weakmap__proto__Proxies

SymbolsSub-classable

built-ins

Scalable Apps

let, const & block- scoped bindings

ClassesPromisesIterators

GeneratorsTyped arrays

Modules

Syntactic Sugar

Arrow functionsEnhanced object

literalsTemplate strings

DestructuringRest, Spread,

DefaultString, Math,

Number, Object, RegExp APIs

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

Edge In Action