powerful on all devices all-in-onelaptop2-in-1tablet
TRANSCRIPT
Jeremy EplingPrincipal Program Manager Lead, Windows Mail App3-104
Stories from Building the Windows Mail App
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
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
New UI built in HTML
Use Windows controlsCustom controls for your unique experiencesLeverage web tools like LESS and JSHint
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
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
33%
savings
50%
savings
63%sav-ings
36%
savings
Scheduler
WinJS.Utilities.SchedulerEnables a responsive experienceAllows you to pre-build UI you’ll need later
Scheduling Today
Task
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?setImmediate();
setImmediate();
setImmediate();
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
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
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
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
© 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.