Chris Wilson Chris Wilson IE Platform Architect Microsoft Microsoft 1
Dec 10, 2014
Chris WilsonChris WilsonIE Platform ArchitectMicrosoftMicrosoft
1
Compatibility vs InteroperabilityCompatibility vs. InteroperabilityWhat’s new in IE8O t iti f SitOpportunities for Site owners
Discussion
More info: http://blogs.msdn.com/ie
2
PredictabilityPredictabilityProgramming Powerg gPerformance
3
Work as expectedWork as expected (i.e. follow the standard and be interoperable)?
Work as expected (i.e. do what you used to and be compatible)?
4
We can't tell if authors (and tools) expectWe can t tell if authors (and tools) expect standards, or if they expect past behavior
IE8’s “Best standards” is default for InternetB t th till t ll th b t “ ldBut authors can still tell the browser to use “old rendering” using an HTTP header or <meta>A thors choose to pgrade hen the ’re readAuthors choose to upgrade when they’re ready
P di t bilit t d d tPredictability means standards supportComplete standards – not just “good enough”
5
IE8 goal: complete CSS 2.1 complianceg p pBeta 2 implements every CSS2.1 property
New layout engineGreat typographic foundationDesigned with CSS 2.1 in handClear principles: compliance & interopNo more hasLayouty
6
The web needs interoperabilityThe web needs interoperabilityThe best way to get interoperability: comprehensive unbiased test suitescomprehensive unbiased test suites
Contributing our tests to the W3Cg>3200 tests contributedValidates (or corrects) our interpretationValidates (or corrects) our interpretationGoal: a complete, objective test suite
7
Improved HTML interoperabilityImproved HTML interoperability<object> and forms support, e.g.
Improved DOM complianceFixed attribute odditiesFixed attribute odditiesMany other changes – see IEBlog
DOM bj t t bilitDOM object mutabilitygetters and setters on DOM objectsg j
8
Surprise!The IE6-era web app platform isn’t complete.
9
Set Window.location.hash, IE does the rest,IE fires an window.onhashchange eventIE updates the address bar and back buttonIE updates the address bar and back buttonAllows copy & paste of “Ajax URLs”
10
CSS Selector APIW3C Web Applications WG draft standard.querySelectorAll() – returns a StaticNodeList*
S l t () t th fi t hild l t.querySelector() – returns the first child elementAPIs can be called on Document or Element50x faster than Javascript tree traversal50x faster than Javascript tree traversal
<div class="vcard"> <span class="fn“>Chris Wilson</span>’s email: <span class fn >Chris Wilson</span> s email: <span class="email">[email protected]</span> </div>
var vcard; var name; var email;// G b ll d i th d t// Grab all vcards in the documentvar vcards = document.querySelectorAll(‘.vcard’);for (vcard in vcards) {
name = vcard.querySelector(‘.fn’);
11
q y ( );email = vcard.querySelector(‘.email’);
}
Web applications need local storageWeb applications need local storageCookies, UserData control
HTML5 adds the Storage interfaceHTML5 adds the Storage interfacesessionStorage (tab/session specific)localStorage (shared)Key/value string pairs10MB per domain, 100MB total
12
Network connectivity is transientNetwork connectivity is transientHTML5 adds online/offline eventsA d t t i di tAnd a state indicator
<!‐‐ Add handlers for online/offline events ‐‐><body ononline=“go_online()”
onoffline “go offline()”>;onoffline=“go_offline()”>;
// Find out if browser is online// Find out if browser is onlineonline = window.navigator.onLine;
13
The most interesting web applications mashThe most interesting web applications mash up data and components across domains
Without restrictions this is unsafeWithout restrictions, this is unsafeSo today, XHR is restricted to Same Origin
You can circumvent this by:Using script (not restricted to SOP)
Can be dangerous, if you don’t trust the third partyProxying on the server side
Complicated, slower and costly.
14
Cross domain requests require mutualCross domain requests require mutual consent between the webpage and serverXDomainRequest (XDR)XDomainRequest (XDR)
Your app creates a XDomainRequest objectXDR opens a connection and requests data, sending Access Control HTTP header
S t W3C W b A WG A C t lSupports W3C Web Apps WG Access ControlXDR object gives your app the data IFF server responds with Access Control Allowedresponds with Access Control AllowedXDR is always anonymous (no cookies/auth)
15
// 1. Create XDR objectvar xdr = new XDomainRequest();var xdr = new XDomainRequest();// 2. hook up callback for dataxdr.onload = readData();();// 3. Set‐up connection to an XDR server xdr.open("get", www.contoso.com/xdr.htm);// S d t t// 4. Send async request to serverxdr.send();// 5 Retrieve text in callback (changeState())// 5. Retrieve text in callback (changeState())xdr.responseText
16
Some scenarios want more of a “sandbox”Some scenarios want more of a sandboxFrames are used for this today….
but they need to add limited communication…but they need to add limited communicationAgain, both sides need to opt in to be “safe”tM / f HTML5postMessage/onmessage from HTML5
function postToIframe()function postToIframe(){
document.onmessage = receiver; // message handlervar ff = document.getElementsByTagName('iframe')[0];g y g ( )[ ];ff.contentWindow.postMessage('Hello',"http://contoso.com");
}
17
Often the “data” passed across domainOften the data passed across domain is HTML or JavaScript code, not text
2 fBeta 2 has two ways to make this safe:Native Javascript Object Notation (JSON)Native Javascript Object Notation (JSON) enables safe transfer of JS object datatoSafeHTML() allows any HTML to betoSafeHTML() – allows any HTML to be “sanitized” (removes “active content”)
18
Unlocking Web 2 0 with W3C ARIAUnlocking Web 2.0 with W3C ARIAARIA enables accessible web 2.0 appsARIA l t t d ti blARIA roles, states, and properties enable assistive technology (e.g. screenreaders)
Improved Zoom Experiencep p
19
Hardcore focus on performancepWe focus on “real-world” performanceMANY changes post beta2 to improve perfMANY changes post-beta2 to improve perf
JavaScript improvementsFaster native JavaScript operationsBetter GC, Faster DOM object lookups, j pPre-parser doesn’t block at script tags
Network perf is frequently the problemNetwork perf is frequently the problemConnections increased to 6 (2 on modems)
20
CSS/HTML/Javascript debugger “in the box!”
Debug and profile JavaScriptExecution control (breakpoints step into etc )Execution control (breakpoints, step into, etc.)Variable inspection (watches, locals, etc.)Immediate windowImmediate windowNew profiler lets you examine perf of your code
D b CSS d HTMLDebug CSS and HTMLView and trace effective stylesView layout (box model) infoView layout (box model) infoEdit HTML and CSS live – with save to file!Change browser mode & document mode
21
g
Users already use lots of web servicesUsers already use lots of web servicesMaps: Windows Live, Yahoo, MapQuestBlogs: Facebook, MySpace, BloggerEmail: Hotmail, Yahoo, Gmail, ,Productivity: Translate, Search, Dictionary
But this is a manual process!p
22
Accelerators connect users to their existing services, from anywhere they may go on the web
Easy for web publishers to implement (no client code)
23
http://www.paris-web.fr/2008/-Lieux-
24
<?xml version="1.0" encoding="utf‐8" ?> <openServiceDescriptionxmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">xmlns http://www.microsoft.com/schemas/openservicedescription/1.0 >
<homepageUrl>http://maps.live.com</homepageUrl> <display>
<name>Map with Live Maps</name> <icon>http://maps live com/favicon ico</icon> <icon>http://maps.live.com/favicon.ico</icon>
</display><activity category="Map">
<activityAction context="selection"><execute method="get“
action="http://maps.live.com/default.aspx?where1={selection}" /> <preview method="get" action="http://maps.live.com/geotager.aspx">
<parameter name="b" value="{selection}" /> p { }<parameter name="clean" value="true" /> <parameter name="w" value="320" /> <parameter name="h" value="240" /> <parameter name="format" value="full" /> <parameter name= format value= full />
</preview></activityAction>
</activity>
25
</openServiceDescription>
//check if service is already installed//check if service is already installedwindow.external.IsServiceInstalled
(http://maps.live.com/livemaps.xml);(http://maps.live.com/livemaps.xml);
//if false, display button to add service// f f , p ywindow.external.AddService
(http://maps.live.com/liveMaps.xml) ;
26
Users monitor lots of content on the webUsers monitor lots of content on the webAuctions, weather condition, top news story...
But this is also a manual process!Navigate to page, check price – rinse & repeat
Feeds can be used for this scenario…but the current item is the important one…but the current item is the important one
They’re not “the page,” so not always updated
27
WebSlices enable publishers to mark upWebSlices enable publishers to mark up “subscribe-able” parts of web pages, allowing you to monitor your favoriteallowing you to monitor your favorite dynamic pieces of the web
28
hAtom Microformat describes a feed & itemshAtom Microformat describes a feed & itemsWebSlice builds on hAtom
hAt t t ti t thAtom can represent static contentWebSlice is dynamic content
Webslice reuses properties on hAtomAdds optional properties for subscribingp p p g
ttl – time-to-live valuefeedurl – alternative path to get updatesendtime – When the feed item is no longer relevant
Can be applied to an hAtom
29
The Windows Feeds Platform now supportsThe Windows Feeds Platform now supports both feeds and WebSlices
Converts WebSlice HTML to Atom feedConverts WebSlice HTML to Atom feedAccessible by Feed APISaniti es content (no script)Sanitizes content (no script)
Feeds Platform adds Authentication SupportHTTP-based Authentication (Basic & Digest)HTTP based Authentication (Basic & Digest)Basic auth via SSLUses saved creds for background download
30
Uses saved creds for background download
Multi-tiered systemMulti tiered systemReport a Webpage Problem Tool IE B t NIE Beta Newsgroup (http://go.microsoft.com/fwlink/?LinkId=110585)P bli V t IE8 T h B t bPublic Votes on IE8 Tech Beta bugsIE8 Tech Beta – committed bug filersAutomated Customer Feedback
31
IE8 Beta2 for Windows XP & Windows Vistahttp://www microsoft com/ie/ie8http://www.microsoft.com/ie/ie8
Please, test your web content and apps!Use X-UA-Compatible as a toolpMove the web toward standards content
We want your feedback!Visit the IEBlog & Developer Center for moreVisit the IEBlog & Developer Center for more
32
When are you going to ship?When are you going to ship?When it’s ready. We will have a public Release Candidate build – a “final” buildCandidate build a final build.
Are you adding SVG/XHTML/? to IE8?IE8 B t 2 ti ll l tf l tIE8 Beta 2 was essentially platform-complete
Why aren’t you supporting SVG/XHTML/?We know these are important. They didn’t make this release.
33
Chris Wilson@microsoft com© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
34
p p g y y p pMICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.