Building High Performance and Reliable Windows Phone 8 Apps

1,222 views

Published on

Have you ever dreamed to build a solid and fast application for your Windows Phone 8? Come to this session and you will see how to leverage the power of your device and how to deliver outstanding robust application. You'll discover how to unit test your WP8 application and how to tune its performance.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,222
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building High Performance and Reliable Windows Phone 8 Apps

  1. 1. @piccoloaiutante - michele@orangecode.itOrangeCodeMichele CapraBuilding High Performance and ReliableWindows Phone 8 AppsTuesday, May 14, 13
  2. 2. Software contractor :- C# Asp.net mvc, Wpf, Windows Phone..- Python, Django- WebDeBs Founder@piccoloaiutante - OrangeCodeMichele CapraWho i amTuesday, May 14, 13
  3. 3. Building High Performance and ReliableWindows Phone 8 Apps@piccoloaiutante - OrangeCodeMichele CapraWhat are we going to seeTuesday, May 14, 13
  4. 4. Building High Performance and ReliableWindows Phone 8 Apps@piccoloaiutante - OrangeCodeMichele CapraWhat are we going to seeTuesday, May 14, 13
  5. 5. Building High Performance and ReliableWindows Phone 8 Apps@piccoloaiutante - OrangeCodeMichele CapraWhat are we going to seeTuesday, May 14, 13
  6. 6. In general, reliability (systemic def.) is theability of a person or system to performand maintain its functions in routinecircumstances, as well as hostile orunexpected circumstances.Wikipedia@piccoloaiutante - OrangeCodeMichele CapraReliabilityTuesday, May 14, 13
  7. 7. @piccoloaiutante - OrangeCodeMichele CapraReliabilityIn general, reliability (systemic def.) is theability of a person or system to performand maintain its functions in routinecircumstances, as well as hostile orunexpected circumstances.WikipediaTuesday, May 14, 13
  8. 8. How can we achieve reliability?• Test your app@piccoloaiutante - OrangeCodeMichele CapraReliabilityTuesday, May 14, 13
  9. 9. Use automatic tests while you’re building yourapp.Manually test your app at the end, especiallywhen you’re integrating logic and UI.@piccoloaiutante - OrangeCodeMichele CapraTestingTuesday, May 14, 13
  10. 10. Use automatic tests while you’re building yourapp.Manually test your app at the end, especiallywhen you’re integrating logic and UI.@piccoloaiutante - OrangeCodeMichele CapraTestingTuesday, May 14, 13
  11. 11. Basic application:- Query Spotify database- Show result@piccoloaiutante - OrangeCodeMichele CapraSample AppTuesday, May 14, 13
  12. 12. @piccoloaiutante - OrangeCodeMichele CapraSample AppTuesday, May 14, 13
  13. 13. @piccoloaiutante - OrangeCodeMichele CapraSample Apphttp://ws.spotify.com/service/version/method[.format]?parametersTuesday, May 14, 13
  14. 14. Architectural Pattern:• Derived from Presentation Model pattern(Fowler)• Clear separation between UI and LogicStructure our code:• ViewModel (c#): Logic• View (Xaml): Presentation@piccoloaiutante - OrangeCodeMichele CapraModel-View-ViewModel in Windows Phone 8Tuesday, May 14, 13
  15. 15. @piccoloaiutante - OrangeCodeMichele CapraModel-View-ViewModel in Windows Phone 8ViewModel ViewProperty BindingTuesday, May 14, 13
  16. 16. We have to make a REST call to SpotifyAPI.We are going to create a service (a classcalled SongService) that could support ourViewModel in this action.@piccoloaiutante - OrangeCodeMichele CapraMake a query to SpotifyTuesday, May 14, 13
  17. 17. @piccoloaiutante - OrangeCodeMichele CapraModel-View-ViewModel in Windows Phone 8ViewModelViewSongServiceTuesday, May 14, 13
  18. 18.    <StackPanel  x:Name="TitlePanel"  Grid.Row="0"  Margin="12,17,0,28">            <TextBlock  Text="OrangeCode"    Margin="12,0"/>            <TextBlock  Text="Spotify  Viewer"  Margin="9,-­‐7,0,0"  />    </StackPanel>    <Grid  x:Name="ContentPanel"  Grid.Row="1"  Margin="12,0,12,0">            <Grid.RowDefinitions>                    <RowDefinition  Height="80"/>                    <RowDefinition  Height="*"/>            </Grid.RowDefinitions>            <Grid  >                  <Grid.ColumnDefinitions>                        <ColumnDefinition  Width="*"/>                        <ColumnDefinition  Width="150"/>                  </Grid.ColumnDefinitions>                  <TextBox    Text="{Binding  SearchedText,Mode=TwoWay}"/>                  <Button  Content="search"  Command="{Binding  Search}"/>            </Grid>            <ScrollViewer  Grid.Row="1">                    <ItemsControl  ItemsSource="{Binding  TrackList}">                            <ItemsControl.ItemTemplate>                                    <DataTemplate>                                            <TextBlock  Text="{Binding  name}"/>                                    </DataTemplate>                            </ItemsControl.ItemTemplate>                    </ItemsControl>            </ScrollViewer>    </Grid>@piccoloaiutante - OrangeCodeMichele CapraUI Language - XamlTuesday, May 14, 13
  19. 19.    <StackPanel  x:Name="TitlePanel"  Grid.Row="0"  Margin="12,17,0,28">            <TextBlock  Text="OrangeCode"    Margin="12,0"/>            <TextBlock  Text="Spotify  Viewer"  Margin="9,-­‐7,0,0"  />    </StackPanel>    <Grid  x:Name="ContentPanel"  Grid.Row="1"  Margin="12,0,12,0">            <Grid.RowDefinitions>                    <RowDefinition  Height="80"/>                    <RowDefinition  Height="*"/>            </Grid.RowDefinitions>            <Grid  >                  <Grid.ColumnDefinitions>                        <ColumnDefinition  Width="*"/>                        <ColumnDefinition  Width="150"/>                  </Grid.ColumnDefinitions>                  <TextBox    Text="{Binding  SearchedText,Mode=TwoWay}"/>                  <Button  Content="search"  Command="{Binding  Search}"/>            </Grid>            <ScrollViewer  Grid.Row="1">                    <ItemsControl  ItemsSource="{Binding  TrackList}">                            <ItemsControl.ItemTemplate>                                    <DataTemplate>                                            <TextBlock  Text="{Binding  name}"/>                                    </DataTemplate>                            </ItemsControl.ItemTemplate>                    </ItemsControl>            </ScrollViewer>    </Grid>@piccoloaiutante - OrangeCodeMichele CapraUI Language - XamlTuesday, May 14, 13
  20. 20.      public  class  MainViewModel        {              private  readonly  ISongService  _songService;              public  string  SearchedText  {  get;  set;  }              public  IList<track>  TrackList  {  get;  set;  }              public  MainViewModel(ISongService  songService)              {                      _songService  =  songService;                      TrackList=  new  List<track>();              }              public  async  Task    Search()              {    var  data  =  await  _songService.Query(SearchedText);                      TrackList  =  data.tracks;                        OnPropertyChanged("TrackList");              }      }@piccoloaiutante - OrangeCodeMichele CapraLogic Language - C#Tuesday, May 14, 13
  21. 21.      public  class  MainViewModel        {              private  readonly  ISongService  _songService;              public  string  SearchedText  {  get;  set;  }              public  IList<track>  TrackList  {  get;  set;  }              public  MainViewModel(ISongService  songService)              {                      _songService  =  songService;                      TrackList=  new  List<track>();              }              public  async  Task    Search()              {    var  data  =  await  _songService.Query(SearchedText);                      TrackList  =  data.tracks;                        OnPropertyChanged("TrackList");              }      }@piccoloaiutante - OrangeCodeMichele CapraLogic Language - C#Tuesday, May 14, 13
  22. 22. @piccoloaiutante - OrangeCodeMichele CapraProject StructureTuesday, May 14, 13
  23. 23. public class SongService : ISongService{string _baseUrl;private RestClient _client;public SongService(){_client = new RestClient();_client.BaseUrl ="http://ws.spotify.com/search/1/track.json?q=";}public Task<info> Query(string query){var request = new RestRequest(query, Method.GET);var response= await _client.ExecuteTaskAsync<info>(request);return response.Data;}}@piccoloaiutante - OrangeCodeMichele CapraSongServiceTuesday, May 14, 13
  24. 24. public class SongService : ISongService{string _baseUrl;private RestClient _client;public SongService(){_client = new RestClient();_client.BaseUrl ="http://ws.spotify.com/search/1/track.json?q=";}public Task<info> Query(string query){var request = new RestRequest(query, Method.GET);var response= await _client.ExecuteTaskAsync<info>(request);return response.Data;}}@piccoloaiutante - OrangeCodeMichele CapraSongServiceTuesday, May 14, 13
  25. 25. [TestClass]public class SongServiceFixture{private SongService _service;public SongServiceFixture(){_service = new SongService();}[TestMethod]public async Task Query_Should_Return_Result_From_Spotify_Service(){var data = await _service.Query("Madonna");Assert.IsTrue(data.tracks.Count!=0);}}@piccoloaiutante - OrangeCodeMichele CapraSongService TestTuesday, May 14, 13
  26. 26. [TestClass]public class SongServiceFixture{private SongService _service;public SongServiceFixture(){_service = new SongService();}[TestMethod]public async Task Query_Should_Return_Result_From_Spotify_Service(){var data = await _service.Query("Madonna");Assert.IsTrue(data.tracks.Count!=0);}}@piccoloaiutante - OrangeCodeMichele CapraSongService TestTuesday, May 14, 13
  27. 27. @piccoloaiutante - OrangeCodeMichele CapraMS Test RunnerTuesday, May 14, 13
  28. 28. public class MainViewModel{private readonly ISongService _songService;public string SearchedText { get; set; }public IList<track> TrackList { get; set; }public MainViewModel(ISongService songService){_songService = songService;TrackList= new List<track>();}public async Task Search(){TrackList = (await _songService.Query(SearchedText)).tracks;}}@piccoloaiutante - OrangeCodeMichele CapraViewModel with serviceTuesday, May 14, 13
  29. 29. public class MainViewModel{private readonly ISongService _songService;public string SearchedText { get; set; }public IList<track> TrackList { get; set; }public MainViewModel(ISongService songService){_songService = songService;TrackList= new List<track>();}public async Task Search(){TrackList = (await _songService.Query(SearchedText)).tracks;}}@piccoloaiutante - OrangeCodeMichele CapraViewModel with serviceTuesday, May 14, 13
  30. 30. [TestMethod]public void Search_Should_Get_Songs_From_Service(){var viewModel = new MainViewModel(new SongSearchService());viewModel.SearchedText = "Madonna";await viewModel.Search();Assert.IsNotNull(viewModel.TrackList);Assert.IsTrue(viewModel.TrackList.Count >= 1);}@piccoloaiutante - OrangeCodeMichele CapraTesting ViewModel with ServiceTuesday, May 14, 13
  31. 31. [TestMethod]public void Search_Should_Get_Songs_From_Service(){var viewModel = new MainViewModel(new SongSearchService());viewModel.SearchedText = "Madonna";await viewModel.Search();Assert.IsNotNull(viewModel.TrackList);Assert.IsTrue(viewModel.TrackList.Count >= 1);}@piccoloaiutante - OrangeCodeMichele CapraTesting ViewModel with ServiceTuesday, May 14, 13
  32. 32. @piccoloaiutante - OrangeCodeMichele CapraMS Test RunnerTuesday, May 14, 13
  33. 33.    <StackPanel  x:Name="TitlePanel"  Grid.Row="0"  Margin="12,17,0,28">            <TextBlock  Text="OrangeCode"    Margin="12,0"/>            <TextBlock  Text="Spotify  Viewer"  Margin="9,-­‐7,0,0"  />    </StackPanel>    <Grid  x:Name="ContentPanel"  Grid.Row="1"  Margin="12,0,12,0">            <Grid.RowDefinitions>                    <RowDefinition  Height="80"/>                    <RowDefinition  Height="*"/>            </Grid.RowDefinitions>            <Grid  >                  <Grid.ColumnDefinitions>                        <ColumnDefinition  Width="*"/>                        <ColumnDefinition  Width="150"/>                  </Grid.ColumnDefinitions>                  <TextBox    Text="{Binding  SearchedText,Mode=TwoWay}"/>                  <Button  Content="search"  Command="{Binding  Search}"/>            </Grid>            <ScrollViewer  Grid.Row="1">                    <ItemsControl  ItemsSource="{Binding  TrackList}">                            <ItemsControl.ItemTemplate>                                    <DataTemplate>                                            <TextBlock  Text="{Binding  name}"/>                                    </DataTemplate>                            </ItemsControl.ItemTemplate>                    </ItemsControl>            </ScrollViewer>    </Grid>@piccoloaiutante - OrangeCodeMichele CapraManually test the UITuesday, May 14, 13
  34. 34. Building High Performance and ReliableWindows Phone 8 Apps@piccoloaiutante - OrangeCodeMichele CapraWhat are we going to seeTuesday, May 14, 13
  35. 35. This subject involves different part of yourapplication.• App startup• UI Thread• Images@piccoloaiutante - OrangeCodeMichele CapraPerformanceTuesday, May 14, 13
  36. 36. This subject involves different part of yourapplication.• App startup• UI Thread• Images@piccoloaiutante - OrangeCodeMichele CapraPerformanceTuesday, May 14, 13
  37. 37. @piccoloaiutante - OrangeCodeMichele CapraWindows Phone 8 - Thread ArchitectureUIThread(touch,XAML,draw visual,handler)CompsitionThread( feed GPU,texture,handletransform)GPUYourAppTuesday, May 14, 13
  38. 38. @piccoloaiutante - OrangeCodeMichele CapraWindows Phone 8 - Thread ArchitectureUIThread(touch,XAML,draw visual,handler)CompsitionThread( feed GPU,texture,handletransform)GPUYourAppMaintaining a lightweight UIthread is the key to writing aresponsive app.Tuesday, May 14, 13
  39. 39. UI thread: handles all input, whichincludes touching, parsing and creatingobjects from XAML, layout calculations,data binding, drawing all visuals (at leastthe first time they are drawn), rendering/rastering, process per-frame callbacks andexecuting other user code and eventhandlers.@piccoloaiutante - OrangeCodeMichele CapraUI threadTuesday, May 14, 13
  40. 40. Composition/Render thread: feeds theGPU with textures and handles transform(scale, rotate, translate) animations andplane projections.@piccoloaiutante - OrangeCodeMichele CapraSlice titileTuesday, May 14, 13
  41. 41. • Microsoft recommendation related toperformance issues http://bit.ly/10yuFRw• Performance best practice http://bit.ly/PiOzz9@piccoloaiutante - OrangeCodeMichele CapraGeneral BottleneckTuesday, May 14, 13
  42. 42. How users perceive your app performance:• Startup time• Responsiveness@piccoloaiutante - OrangeCodeMichele CapraPerformanceTuesday, May 14, 13
  43. 43. Visual Studio 2012 provides the WindowsPhone Application Analysis tool.Main feature:• App Monitoring• Profiling@piccoloaiutante - OrangeCodeMichele CapraPerformance toolsTuesday, May 14, 13
  44. 44. App Monitoring: you can evaluate the mostimportant behaviors of your app thatcontribute to a good user experience, suchas start time and responsiveness.@piccoloaiutante - OrangeCodeMichele CapraApp monitoringTuesday, May 14, 13
  45. 45. Profiling: you can evaluate eitherexecution-related or memory-usage aspectsof your app.@piccoloaiutante - OrangeCodeMichele CapraProfilingTuesday, May 14, 13
  46. 46. @piccoloaiutante - OrangeCodeMichele CapraApp Analysis example AppDemo application with heavy jpg imagesTuesday, May 14, 13
  47. 47. @piccoloaiutante - OrangeCodeMichele CapraPerformance toolsTuesday, May 14, 13
  48. 48. @piccoloaiutante - OrangeCodeMichele CapraPerformance tool sessionTuesday, May 14, 13
  49. 49. @piccoloaiutante - OrangeCodeMichele CapraPerformance tool sessionTuesday, May 14, 13
  50. 50. @piccoloaiutante - OrangeCodeMichele CapraPerformance tool sessionTuesday, May 14, 13
  51. 51. @piccoloaiutante - OrangeCodeMichele CapraPerformance tool sessionTuesday, May 14, 13
  52. 52. Execution profiling graphs:• External events• Frame rate• CPU usage %• Application responsiveness• Network data transfer MBps• Battery consumption mAh• Memory usage MB• Storyboards• Image loads• GC events@piccoloaiutante - OrangeCodeMichele CapraOther session indicatorsMemory profiling graphs:• Memory usage MB• Image loads• GC eventsTuesday, May 14, 13
  53. 53. Visual Studio 2012 update 2, WindowsPhone 8 SDKUnit testing:• MS Test• Moq as mocking frameworkProfiling:• Windows Phone Application Analysis tool@piccoloaiutante - OrangeCodeMichele CapraQuick recapTuesday, May 14, 13
  54. 54. Email: michele@orangecode.itTwitter: @piccoloaiutanteBlog: orangecode.it/blogGitHub: github.com/piccoloaiutanteLinkedin:it.linkedin.com/in/michelecapra@piccoloaiutante - OrangeCodeMichele CapraThat’s all folksTuesday, May 14, 13

×