Jeremy EplingPrincipal Program Manager Lead, Windows Mail App3-104

Stories from Building the Windows Mail App

Powerful on all devices Leverage Windows and existing codeNailing performance

//build/

Powerful on all devicesLeverage Windows and existing codeNailing performance

//build/

Powerful on all devices

All-in-one

Laptop

2-in-1

Tablet

Demo: Mail

Optimize for all types of input

Touch• Easy thumb access• Reduce posture changes

Mouse• Show actions on hover• Reduce mouse distance

Keyboard• Fewer tabs for key scenarios• Shortcuts for everything

Optimize for all sizes

Work great from 7in to 30in, portrait and landscape• Use Hub, ListView, and CSS Media Queries to adjust orientation

and size

Design the scenarios when you launch other apps• Use protocol handlers to specify launch size

Powerful on all devices Leverage Windows and existing codeNailing performance

//build/

HTML or XAML?

Do you have an existing investment in either?Where is the expertise of your team?Are your scenarios better enabled in one platform?

HTML or XAML?

Do you have an existing investment in either?Where is the expertise of your team?Are your scenarios better enabled in one platform?

HTML or XAML?

Do you have an existing investment in either?Where is the expertise of your team?Are your scenarios better enabled in one platform?

- Almost all email is sent and received as HTML- Accurate email rendering and editing

HTML or XAML?

Do you have an existing investment in either?Where is the expertise of your team?Are your scenarios better enabled in one platform?

- Almost all email is sent and received as HTML- Accurate email rendering and editing- Leverage the latest and greatest in HTML standards- Huge community of frameworks

Picking the right controls

Custom

Search Box

ListView

Item Container & Repeater

iFrame

iFrame

App bar

Flyout

Settings Flyout

New UI built in HTML

Use Windows controlsCustom controls for your unique experiencesLeverage web tools like LESS and JSHint

Picking the right platform

C#, CX, or C++?

Do you have an existing investment in either?

C#, CX, or C++?

Do you have an existing investment in either?Desktop and Windows Phone

C#, CX, or C++?

Do you have an existing investment in either?Desktop and Windows Phone

Where is the expertise of your team?

C#, CX, or C++?

Do you have an existing investment in either?Desktop and Windows Phone

Where is the expertise of your team?C++ and COM

C#, CX, or C++?

Do you have an existing investment in either?Desktop and Windows Phone

Where is the expertise of your team?C++ and COM

Are your scenarios better enabled in one platform?

C#, CX, or C++?

Do you have an existing investment in either?Desktop and Windows Phone

Where is the expertise of your team?C++ and COM

Are your scenarios better enabled in one platform?Fast background sync for great battery life

Diagram exampleWWA

Platform

Mail app architecture

Media Foundation

Sync host

Mail UI (View)

Search (.EML files on disk)

Exchange Active Sync

(EAS)IMAP

Mail Object Cache (WinRT)

Mail Data Store (JET DB)

Mail UI (View model)

Process

WNS

Mail Object Model (WinRT)

Leverage Windows and existing code

Use Windows controls Leverage existing code as WinRT componentsStore enables rapid release of updates

Powerful on all devicesLeverage Windows and existing codeNailing performance

//build/

Build in performance from the beginningDefine the scenarios performance up front Analyze often and on ARM devicesUse Visual Studio and Windows Performance Analyzer

Faster Performance

Startup Expand New email Delete

Mail App Mail App - Spring Update

Faster Performance

Startup Expand New email Delete

Mail App Mail App - Spring Update

33%

savings

50%

savings

63%sav-ings

36%

savings

Scheduling work

Scheduler

WinJS.Utilities.SchedulerEnables a responsive experienceAllows you to pre-build UI you’ll need later

Scheduler in Windows Mail App

Scheduler in Windows Mail App

Scheduling Today

Task

Task

Task

Task

Task

Task

Task

Task

Task

AppCode

WinJSCode

SystemCode

?setImmediate();

setImmediate();

setImmediate();

Scheduling Today

Task

Task

Task

Task

Task

Task

Task

Task

Task

AppCode

WinJSCode

SystemCode

?

Scheduling with WinJS Scheduler

Task

Task

Task

Task

Task

Task

Task

Task

Task

AppCode

WinJSCode

SystemCode

schedule(func, pri);

schedule(func, pri);

schedule(func, pri);

Scheduling with WinJS Scheduler

Task

Task

Task

Task

Task

Task

Task

Task

Task

AppCode

WinJSCode

SystemCode

Using WinJS Scheduler

setImmediate(foo);

var S = WinJS.Utilities.Scheduler;S.schedule(foo, S.Priority.normal);

orS.schedule(foo, S.Priority.high);

orS.schedule(foo, S.Priority.idle);

Web workers

Great for computation and data accessCan’t access the UI threadConsider building large custom controls as a string

Demo: Calendar

var worker = new Worker(“worker.js”);

var contentElement = document.getElementByID(“mainContent”);

worker.onmessage = function(e) { contentElement.innerHTML = e.data;};

default.js

onmessage = function(e) { var appointments = getAppointments(); e.data.message = getUIAsString(appointments); postMessage(e.data.message);}

getUIAsString = function(appointments) { var appointmentHTMLStart = “<div class=‘foo’>”, appointmentHTMLEnd = “</div>”, UIString = “”, i = 0; for (i; i < appointments.length; i++) { UIString = UIString + apptHTMLStart + appointments[i].name + appHTMLEnd; } return UIString;}

worker.js

Simplifying code

Fewer elements and rules

Fewer elements, especially in ItemTemplatesSimpler layouts – block instead of gridBatch DOM manipulations, write all and then read all

2x scrolling improvement

Use targeted CSS rules

CSS rules are evaluated starting at the endLook out for BLoPR - IE:MSHTML:BuildListOfProbableRules Use simple selectors, like ID and Class

BAD: #foo > div

GOOD: #foo > .bar

BAD: [aria-selected="true"] .foo

GOOD: .win-selected .foo

Nailing Performance

Regularly analyze on ARMSchedule all supplementary workSimplify your HTML and CSS code

Leverage Windows and existing codeNailing performancePowerful on all devices

//build/

Resources

Performance• App Analysis in WPA: 2-100• Apps build using HTML in VS: 3-316• App Performance: Planning costs less than re-architecting: 2-098

Leveraging Windows and existing code• Building a UI: What does it cost: 2-192• What’s New in WinJS: 2-165

Powerful on all devices• Beautiful Apps at Any Size on Any Screen: 2-150• Designing and Building User Interfaces for Windows: 2-168

Questions?

© 2012 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.