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.

1. @piccoloaiutante - michele@orangecode.it
OrangeCode
Michele Capra
Building High Performance and Reliable
Windows Phone 8 Apps
Tuesday, May 14, 13

2. Software contractor :
- C# Asp.net mvc, Wpf, Windows Phone..
- Python, Django
- WebDeBs Founder
@piccoloaiutante - OrangeCodeMichele Capra
Who i am
Tuesday, May 14, 13

3. Building High Performance and Reliable
Windows Phone 8 Apps
@piccoloaiutante - OrangeCodeMichele Capra
What are we going to see
Tuesday, May 14, 13

4. Building High Performance and Reliable
Windows Phone 8 Apps
@piccoloaiutante - OrangeCodeMichele Capra
What are we going to see
Tuesday, May 14, 13

5. Building High Performance and Reliable
Windows Phone 8 Apps
@piccoloaiutante - OrangeCodeMichele Capra
What are we going to see
Tuesday, May 14, 13

6. In general, reliability (systemic def.) is the
ability of a person or system to perform
and maintain its functions in routine
circumstances, as well as hostile or
unexpected circumstances.
Wikipedia
@piccoloaiutante - OrangeCodeMichele Capra
Reliability
Tuesday, May 14, 13

7. @piccoloaiutante - OrangeCodeMichele Capra
Reliability
In general, reliability (systemic def.) is the
ability of a person or system to perform
and maintain its functions in routine
circumstances, as well as hostile or
unexpected circumstances.
Wikipedia
Tuesday, May 14, 13

8. How can we achieve reliability?
• Test your app
@piccoloaiutante - OrangeCodeMichele Capra
Reliability
Tuesday, May 14, 13

9. Use automatic tests while you’re building your
app.
Manually test your app at the end, especially
when you’re integrating logic and UI.
@piccoloaiutante - OrangeCodeMichele Capra
Testing
Tuesday, May 14, 13

10. Use automatic tests while you’re building your
app.
Manually test your app at the end, especially
when you’re integrating logic and UI.
@piccoloaiutante - OrangeCodeMichele Capra
Testing
Tuesday, May 14, 13

11. Basic application:
- Query Spotify database
- Show result
@piccoloaiutante - OrangeCodeMichele Capra
Sample App
Tuesday, May 14, 13

12. @piccoloaiutante - OrangeCodeMichele Capra
Sample App
Tuesday, May 14, 13

13. @piccoloaiutante - OrangeCodeMichele Capra
Sample App
http://ws.spotify.com/service/version/
method[.format]?parameters
Tuesday, May 14, 13

14. Architectural Pattern:
• Derived from Presentation Model pattern
(Fowler)
• Clear separation between UI and Logic
Structure our code:
• ViewModel (c#): Logic
• View (Xaml): Presentation
@piccoloaiutante - OrangeCodeMichele Capra
Model-View-ViewModel in Windows Phone 8
Tuesday, May 14, 13

15. @piccoloaiutante - OrangeCodeMichele Capra
Model-View-ViewModel in Windows Phone 8
ViewModel View
Property Binding
Tuesday, May 14, 13

16. We have to make a REST call to Spotify
API.
We are going to create a service (a class
called SongService) that could support our
ViewModel in this action.
@piccoloaiutante - OrangeCodeMichele Capra
Make a query to Spotify
Tuesday, May 14, 13

17. @piccoloaiutante - OrangeCodeMichele Capra
Model-View-ViewModel in Windows Phone 8
ViewModelView
Song
Service
Tuesday, May 14, 13

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 Capra
UI Language - Xaml
Tuesday, May 14, 13

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 Capra
UI Language - Xaml
Tuesday, May 14, 13

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 Capra
Logic Language - C#
Tuesday, May 14, 13

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 Capra
Logic Language - C#
Tuesday, May 14, 13

22. @piccoloaiutante - OrangeCodeMichele Capra
Project Structure
Tuesday, May 14, 13

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 Capra
SongService
Tuesday, May 14, 13

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 Capra
SongService
Tuesday, May 14, 13

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 Capra
SongService Test
Tuesday, May 14, 13

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 Capra
SongService Test
Tuesday, May 14, 13

27. @piccoloaiutante - OrangeCodeMichele Capra
MS Test Runner
Tuesday, May 14, 13

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 Capra
ViewModel with service
Tuesday, May 14, 13

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 Capra
ViewModel with service
Tuesday, May 14, 13

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 Capra
Testing ViewModel with Service
Tuesday, May 14, 13

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 Capra
Testing ViewModel with Service
Tuesday, May 14, 13

32. @piccoloaiutante - OrangeCodeMichele Capra
MS Test Runner
Tuesday, May 14, 13

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 Capra
Manually test the UI
Tuesday, May 14, 13

34. Building High Performance and Reliable
Windows Phone 8 Apps
@piccoloaiutante - OrangeCodeMichele Capra
What are we going to see
Tuesday, May 14, 13

35. This subject involves different part of your
application.
• App startup
• UI Thread
• Images
@piccoloaiutante - OrangeCodeMichele Capra
Performance
Tuesday, May 14, 13

36. This subject involves different part of your
application.
• App startup
• UI Thread
• Images
@piccoloaiutante - OrangeCodeMichele Capra
Performance
Tuesday, May 14, 13

37. @piccoloaiutante - OrangeCodeMichele Capra
Windows Phone 8 - Thread Architecture
UI
Thread
(touch,
XAML,
draw visual,
handler)
Compsition
Thread
( feed GPU,
texture,
handle
transform)
GPU
Your
App
Tuesday, May 14, 13

38. @piccoloaiutante - OrangeCodeMichele Capra
Windows Phone 8 - Thread Architecture
UI
Thread
(touch,
XAML,
draw visual,
handler)
Compsition
Thread
( feed GPU,
texture,
handle
transform)
GPU
Your
App
Maintaining a lightweight UI
thread is the key to writing a
responsive app.
Tuesday, May 14, 13

39. UI thread: handles all input, which
includes touching, parsing and creating
objects from XAML, layout calculations,
data binding, drawing all visuals (at least
the first time they are drawn), rendering/
rastering, process per-frame callbacks and
executing other user code and event
handlers.
@piccoloaiutante - OrangeCodeMichele Capra
UI thread
Tuesday, May 14, 13

40. Composition/Render thread: feeds the
GPU with textures and handles transform
(scale, rotate, translate) animations and
plane projections.
@piccoloaiutante - OrangeCodeMichele Capra
Slice titile
Tuesday, May 14, 13

41. • Microsoft recommendation related to
performance issues http://bit.ly/10yuFRw
• Performance best practice http://bit.ly/
PiOzz9
@piccoloaiutante - OrangeCodeMichele Capra
General Bottleneck
Tuesday, May 14, 13

42. How users perceive your app performance:
• Startup time
• Responsiveness
@piccoloaiutante - OrangeCodeMichele Capra
Performance
Tuesday, May 14, 13

43. Visual Studio 2012 provides the Windows
Phone Application Analysis tool.
Main feature:
• App Monitoring
• Profiling
@piccoloaiutante - OrangeCodeMichele Capra
Performance tools
Tuesday, May 14, 13

44. App Monitoring: you can evaluate the most
important behaviors of your app that
contribute to a good user experience, such
as start time and responsiveness.
@piccoloaiutante - OrangeCodeMichele Capra
App monitoring
Tuesday, May 14, 13

45. Profiling: you can evaluate either
execution-related or memory-usage aspects
of your app.
@piccoloaiutante - OrangeCodeMichele Capra
Profiling
Tuesday, May 14, 13

46. @piccoloaiutante - OrangeCodeMichele Capra
App Analysis example App
Demo application with heavy jpg images
Tuesday, May 14, 13

47. @piccoloaiutante - OrangeCodeMichele Capra
Performance tools
Tuesday, May 14, 13

48. @piccoloaiutante - OrangeCodeMichele Capra
Performance tool session
Tuesday, May 14, 13

49. @piccoloaiutante - OrangeCodeMichele Capra
Performance tool session
Tuesday, May 14, 13

50. @piccoloaiutante - OrangeCodeMichele Capra
Performance tool session
Tuesday, May 14, 13

51. @piccoloaiutante - OrangeCodeMichele Capra
Performance tool session
Tuesday, May 14, 13

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 Capra
Other session indicators
Memory profiling graphs:
• Memory usage MB
• Image loads
• GC events
Tuesday, May 14, 13

53. Visual Studio 2012 update 2, Windows
Phone 8 SDK
Unit testing:
• MS Test
• Moq as mocking framework
Profiling:
• Windows Phone Application Analysis tool
@piccoloaiutante - OrangeCodeMichele Capra
Quick recap
Tuesday, May 14, 13

54. Email: michele@orangecode.it
Twitter: @piccoloaiutante
Blog: orangecode.it/blog
GitHub: github.com/piccoloaiutante
Linkedin:it.linkedin.com/in/michelecapra
@piccoloaiutante - OrangeCodeMichele Capra
That’s all folks
Tuesday, May 14, 13