stories from b uilding the windows mail a pp
DESCRIPTION
Stories from B uilding the Windows Mail A pp. Jeremy Epling Principal Program Manager Lead, Windows Mail App 3-104. //build/. Powerful on all devices Leverage Windows and existing code Nailing performance. //build/. Powerful on all devices Leverage Windows and existing code - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/1.jpg)
![Page 2: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/2.jpg)
Jeremy EplingPrincipal Program Manager Lead, Windows Mail App3-104
Stories from Building the Windows Mail App
![Page 3: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/3.jpg)
Powerful on all devices Leverage Windows and existing codeNailing performance
//build/
![Page 4: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/4.jpg)
Powerful on all devicesLeverage Windows and existing codeNailing performance
//build/
![Page 5: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/5.jpg)
Powerful on all devices
All-in-one
Laptop
2-in-1
Tablet
![Page 6: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/6.jpg)
Demo: Mail
![Page 7: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/7.jpg)
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
![Page 8: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/8.jpg)
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
![Page 9: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/9.jpg)
Powerful on all devices Leverage Windows and existing codeNailing performance
//build/
![Page 10: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/10.jpg)
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?
![Page 11: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/11.jpg)
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?
![Page 12: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/12.jpg)
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
![Page 13: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/13.jpg)
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
![Page 14: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/14.jpg)
Picking the right controls
![Page 15: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/15.jpg)
![Page 16: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/16.jpg)
Custom
![Page 17: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/17.jpg)
Search Box
![Page 18: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/18.jpg)
ListView
![Page 19: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/19.jpg)
Item Container & Repeater
![Page 20: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/20.jpg)
iFrame
![Page 21: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/21.jpg)
iFrame
![Page 22: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/22.jpg)
App bar
![Page 23: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/23.jpg)
Flyout
![Page 24: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/24.jpg)
Settings Flyout
![Page 25: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/25.jpg)
New UI built in HTMLUse Windows controlsCustom controls for your unique experiencesLeverage web tools like LESS and JSHint
![Page 26: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/26.jpg)
Picking the right platform
![Page 27: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/27.jpg)
C#, CX, or C++?Do you have an existing investment in either?
![Page 28: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/28.jpg)
C#, CX, or C++?Do you have an existing investment in either?Desktop and Windows Phone
![Page 29: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/29.jpg)
C#, CX, or C++?Do you have an existing investment in either?Desktop and Windows Phone
Where is the expertise of your team?
![Page 30: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/30.jpg)
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
![Page 31: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/31.jpg)
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?
![Page 32: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/32.jpg)
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
![Page 33: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/33.jpg)
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)
![Page 34: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/34.jpg)
Leverage Windows and existing codeUse Windows controls Leverage existing code as WinRT componentsStore enables rapid release of updates
![Page 35: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/35.jpg)
Powerful on all devicesLeverage Windows and existing codeNailing performance
//build/
![Page 36: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/36.jpg)
Build in performance from the beginningDefine the scenarios performance up front Analyze often and on ARM devicesUse Visual Studio and Windows Performance Analyzer
![Page 37: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/37.jpg)
Faster Performance
Startup Expand New email Delete
Mail App Mail App - Spring Update
![Page 38: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/38.jpg)
Faster Performance
Startup Expand New email Delete
Mail App Mail App - Spring Update
33%
savings
50%
savings
63%sav-ings
36%
savings
![Page 39: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/39.jpg)
Scheduling work
![Page 40: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/40.jpg)
SchedulerWinJS.Utilities.SchedulerEnables a responsive experienceAllows you to pre-build UI you’ll need later
![Page 41: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/41.jpg)
Scheduler in Windows Mail App
![Page 42: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/42.jpg)
Scheduler in Windows Mail App
![Page 43: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/43.jpg)
Scheduling TodayTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?setImmediate();
setImmediate();
setImmediate();
![Page 44: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/44.jpg)
Scheduling TodayTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?
![Page 45: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/45.jpg)
Scheduling with WinJS SchedulerTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
schedule(func, pri);
schedule(func, pri);
schedule(func, pri);
![Page 46: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/46.jpg)
Scheduling with WinJS SchedulerTask
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
![Page 47: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/47.jpg)
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);
![Page 48: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/48.jpg)
Web workersGreat for computation and data accessCan’t access the UI threadConsider building large custom controls as a string
![Page 49: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/49.jpg)
Demo: Calendar
![Page 50: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/50.jpg)
var worker = new Worker(“worker.js”);
var contentElement = document.getElementByID(“mainContent”);
worker.onmessage = function(e) { contentElement.innerHTML = e.data;};
default.js
![Page 51: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/51.jpg)
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
![Page 52: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/52.jpg)
Simplifying code
![Page 53: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/53.jpg)
Fewer elements and rulesFewer elements, especially in ItemTemplatesSimpler layouts – block instead of gridBatch DOM manipulations, write all and then read all
2x scrolling improvement
![Page 54: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/54.jpg)
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
![Page 55: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/55.jpg)
Nailing PerformanceRegularly analyze on ARMSchedule all supplementary workSimplify your HTML and CSS code
![Page 56: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/56.jpg)
Leverage Windows and existing codeNailing performancePowerful on all devices
//build/
![Page 57: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/57.jpg)
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
![Page 58: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/58.jpg)
Questions?
![Page 59: Stories from B uilding the Windows Mail A pp](https://reader030.vdocument.in/reader030/viewer/2022033106/56816135550346895dd08fe5/html5/thumbnails/59.jpg)
© 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.