Download
1 / 59

Stories from B uilding the Windows Mail A pp - PowerPoint PPT Presentation


  • 67 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Stories from B uilding the Windows Mail A pp' - damali


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Stories from b uilding the windows mail a pp
Stories from Building the Windows Mail App

  • Jeremy Epling

  • Principal Program Manager Lead, Windows Mail App

  • 3-104


Build

//build/

  • Powerful on all devices

  • Leverage Windows and existing code

  • Nailing performance


Build1

//build/

  • Powerful on all devices

  • Leverage Windows and existing code

  • Nailing performance


Powerful on all devices
Powerful on all devices

All-in-one

Laptop

2-in-1

Tablet



Optimize for all types of input
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
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


Build2

//build/

  • Powerful on all devices

  • Leverage Windows and existing code

  • Nailing performance


Html or xaml
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?


Html or xaml1
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 xaml2
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 xaml3
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
New UI built in HTML

  • Use Windows controls

  • Custom controls for your unique experiences

  • Leverage web tools like LESS and JSHint



C cx or c
C#, CX, or C++?

  • Do you have an existing investment in either?


C cx or c1
C#, CX, or C++?

  • Do you have an existing investment in either?

  • Desktop and Windows Phone


C cx or c2
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 c3
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 c4
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 c5
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


Mail app architecture
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


Leverage windows and existing code
Leverage Windows and existing code

  • Use Windows controls

  • Leverage existing code as WinRT components

  • Store enables rapid release of updates


Build3

//build/

  • Powerful on all devices

  • Leverage Windows and existing code

  • Nailing performance


Build in performance from the beginning
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



Faster performance1
Faster Performance

36%

savings



Scheduler
Scheduler

  • WinJS.Utilities.Scheduler

  • Enables a responsive experience

  • Allows you to pre-build UI you’ll need later




Scheduling today
Scheduling Today

?

Task

App

Code

Task

setImmediate();

Task

Task

WinJS

Code

Task

setImmediate();

Task

Task

System

Code

Task

setImmediate();

Task


Scheduling today1
Scheduling Today

?

Task

App

Code

Task

Task

Task

WinJS

Code

Task

Task

Task

System

Code

Task

Task


Scheduling with winjs scheduler
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


Scheduling with winjs scheduler1
Scheduling with WinJS Scheduler

Task

App

Code

Task

Task

Task

WinJS

Code

Task

Task

Task

System

Code

Task

Task


Using winjs scheduler
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);


Web workers
Web workers

  • Great for computation and data access

  • Can’t access the UI thread

  • Consider building large custom controls as a string



default.js

  • varworker = new Worker(“worker.js”);

  • varcontentElement = document.getElementByID(“mainContent”);

  • worker.onmessage= function(e) {

  • contentElement.innerHTML = e.data;

  • };


worker.js

  • onmessage = function(e) {

  • varappointments = getAppointments();

  • e.data.message = getUIAsString(appointments);

  • postMessage(e.data.message);

  • }

  • getUIAsString = function(appointments) {

  • varappointmentHTMLStart = “<div class=‘foo’>”,

  • appointmentHTMLEnd= “</div>”,

  • UIString = “”,

  • i = 0;

  • for (i; i < appointments.length; i++) {

  • UIString = UIString + apptHTMLStart+ appointments[i].name +appHTMLEnd;

  • }

  • returnUIString;

  • }



Fewer elements and rules
Fewer elements and rules

  • Fewer elements, especially in ItemTemplates

  • Simpler layouts – block instead of grid

  • Batch DOM manipulations, write all and then read all

  • 2x scrolling improvement


Use targeted css rules
Use targeted CSS rules

  • CSS rules are evaluated starting at the end

  • Look 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
Nailing Performance

  • Regularly analyze on ARM

  • Schedule all supplementary work

  • Simplify your HTML and CSS code


Build4

//build/

  • Leverage Windows and existing code

  • Nailing performance

  • Powerful on all devices


Resources
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



  • ad