Stories from B uilding the Windows Mail A pp

2. Stories from Building the Windows Mail App • Jeremy Epling • Principal Program Manager Lead, Windows Mail App • 3-104

3. //build/ • Powerful on all devices • Leverage Windows and existing code • Nailing performance

4. //build/ • Powerful on all devices • Leverage Windows and existing code • Nailing performance

5. Powerful on all devices All-in-one Laptop 2-in-1 Tablet

6. Demo: Mail

7. 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

8. 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

9. //build/ • Powerful on all devices • Leverage Windows and existing code • Nailing performance

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

11. 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?

12. 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

13. 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

14. Picking the right controls

16. Custom

17. Search Box

18. ListView

19. Item Container & Repeater

20. iFrame

21. iFrame

22. App bar

23. Flyout

24. Settings Flyout

25. New UI built in HTML • Use Windows controls • Custom controls for your unique experiences • Leverage web tools like LESS and JSHint

26. Picking the right platform

27. C#, CX, or C++? • Do you have an existing investment in either?

28. C#, CX, or C++? • Do you have an existing investment in either? • Desktop and Windows Phone

29. C#, CX, or C++? • Do you have an existing investment in either? • Desktop and Windows Phone • Where is the expertise of your team?

30. 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

31. 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?

32. 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

33. Mail app architecture Mail UI (View) • Diagram example • WWA • Platform Mail UI (View model) Mail Object Cache (WinRT) Process Mail Object Model (WinRT) Media Foundation Mail Data Store (JET DB) Search (.EML files on disk) Sync host Exchange Active Sync (EAS) IMAP WNS

34. Leverage Windows and existing code • Use Windows controls • Leverage existing code as WinRT components • Store enables rapid release of updates

35. //build/ • Powerful on all devices • Leverage Windows and existing code • Nailing performance

36. Build in performance from the beginning • Define the scenarios performance up front • Analyze often and on ARM devices • Use Visual Studio and Windows Performance Analyzer

37. Faster Performance

38. Faster Performance 36% savings

39. Scheduling work

40. Scheduler • WinJS.Utilities.Scheduler • Enables a responsive experience • Allows you to pre-build UI you’ll need later

41. Scheduler in Windows Mail App

42. Scheduler in Windows Mail App

43. Scheduling Today ? Task App Code Task setImmediate(); Task Task WinJS Code Task setImmediate(); Task Task System Code Task setImmediate(); Task

44. Scheduling Today ? Task App Code Task Task Task WinJS Code Task Task Task System Code Task Task

45. Scheduling with WinJS Scheduler Task App Code Task schedule(func, pri); Task Task WinJS Code Task schedule(func, pri); Task Task System Code Task schedule(func, pri); Task

46. Scheduling with WinJS Scheduler Task App Code Task Task Task WinJS Code Task Task Task System Code Task Task

47. Using WinJS Scheduler • setImmediate(foo); • varS = WinJS.Utilities.Scheduler; • S.schedule(foo, S.Priority.normal); • or • S.schedule(foo, S.Priority.high); • or • S.schedule(foo, S.Priority.idle);

48. Web workers • Great for computation and data access • Can’t access the UI thread • Consider building large custom controls as a string

49. Demo: Calendar

50. default.js • varworker = new Worker(“worker.js”); • varcontentElement = document.getElementByID(“mainContent”); • worker.onmessage= function(e) { • contentElement.innerHTML = e.data; • };