Download - Stories from B uilding the Windows Mail A pp
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 inputTouch• Easy thumb access• Reduce posture changesMouse• Show actions on hover• Reduce mouse distanceKeyboard• Fewer tabs for key scenarios• Shortcuts for everything
Optimize for all sizesWork great from 7in to 30in, portrait and landscape• Use Hub, ListView, and CSS Media Queries to adjust orientation
and sizeDesign 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 HTMLUse 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 codeUse 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
SchedulerWinJS.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 TodayTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?setImmediate();
setImmediate();
setImmediate();
Scheduling TodayTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?
Scheduling with WinJS SchedulerTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
schedule(func, pri);
schedule(func, pri);
schedule(func, pri);
Scheduling with WinJS SchedulerTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
Using WinJS SchedulersetImmediate(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 workersGreat 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 rulesFewer elements, especially in ItemTemplatesSimpler layouts – block instead of gridBatch DOM manipulations, write all and then read all
2x scrolling improvement
Use targeted CSS rulesCSS rules are evaluated starting at the endLook out for BLoPR - IE:MSHTML:BuildListOfProbableRules Use simple selectors, like ID and Class
BAD: #foo > divGOOD: #foo > .bar
BAD: [aria-selected="true"] .fooGOOD: .win-selected .foo
Nailing PerformanceRegularly analyze on ARMSchedule all supplementary workSimplify your HTML and CSS code
Leverage Windows and existing codeNailing performancePowerful on all devices
//build/
ResourcesPerformance• 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.