Talking about how to build smart design and architecture for app development. Let your app can easy develop and deploy components on your app. And more topic of version control and quality improvement.

1. Best Software Architecture in
App Development
Anistar Sung

2. Introduction
Anistar sung 宋志峰
Mobile, client, server developer
Instructor, Consulter and Author
Focus on: iOS, Android, HTML5, PHP… etc

3. Work @
Mobile Team

4. Yahoo work
Store marketplace app

5. Personal works
NewYork Times - Best Top 10 photography app
App store Top 2 paid app in US
App store Top 40 in world
Best recommended app in app review sites

6. Personal works

7. Agenda
Problems in real world
Smart design + architecture
Version control
Quality improvement

8. Problems in Real World
What developer do?

9. What I think I do

10. What I really do

11. Real development team

12. Smart Design + Architecture
Wanting everything easier

13. Smart way to create app
Easy to present content
Change once apply anywhere
Fast materials replacement
Design + Deploy components
Data presentation

14. Easy to present content
List view for presentation
Most content can display by list view
UICollectionView is a powerful
component

15. List view cover 80% views in
Yahoo Store Marketplace app

16. Demo
Using UICollectionView to present content

18. Easy to present content
Benefit of UICollectionView
Flexible layout
Reuse cells
Memory management
Automatic updates
Waterfall or running water in nature

19. Easy to present content
Custom UICollectionView for production
UICollectionView

20. Easy to present content
Custom UICollectionView for production
UICollectionView
UICollectionReusableView
!

21. Easy to present content
Custom UICollectionView for production
UICollectionView
UICollectionReusableView
UICollectionViewCell
!

22. Easy to present content
Custom UICollectionView for production
UICollectionView
UICollectionReusableView
UICollectionViewCell
UICollectionViewLayout
Waterfall or running water in nature

23. Demo
Using Custom UICollectionView

25. Change once apply anywhere
The pain for change
Hard to sync with designer
Designer or PM always change
After change need to rewrite code

26. Challenge on Color
Design easy sync tool for designer
Design: I want red color background.
Developer: Sure!
self.backgroundColor = [UIColor redColor];

27. Challenge on Color
Design easy sync tool for designer
Design: I want #7b19a9 background.
Developer: What!?
!?

28. Challenge on Color
Design easy sync tool for designer
Design: I want Yahoo background.
Developer: Mom, I want go home. :(
#@*$!

29. Challenge on Color
Design easy sync tool for designer
Using Category to improve UIColor
+ (UIColor *)colorWithHexString:(NSString *)hexstring;
+ (UIColor *)colorWithHexNumber:(NSUInteger)hexNumber;

30. Challenge on Color
Design easy sync tool for designer
Management your theme color
+ (UIColor *)themeBackground;
+ (UIColor *)themeForeground;
+ (UIColor *)themeDisabled;
+ (UIColor *)themeFocus;
+ (UIColor *)themeHighlight;
+ (UIColor *)themeTitle;
+ (UIColor *)themeSubtitle;

31. Change once apply anywhere
Theme color management
You don’t need write import everywhere
.pch file is your friend

32. Change once apply anywhere
Theme color management
+ (UIColor *)themeBackground
{
return [UIColor colorWithHexString:@"1f2f3b"];
}
!
+ (UIColor *)themePanel
{
return [UIColor colorWithHexString:@"333e49"];
}

33. Change once apply anywhere
Theme color management
+ (UIColor *)themeBackground
{
return [UIColor colorWithHexString:@"dedede"];
}
!
+ (UIColor *)themePanel
{
return [UIColor colorWithHexString:@"f4f4f4"];
}

34. Change once apply anywhere
Theme color management

35. Change once apply anywhere
Other pain of change
Interface size and layout
ICON and assets color
Text on the screen

36. Change once apply anywhere
Interface change

37. Change once apply anywhere
Interface change
UICollectionView can set up cell size
!
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGsizeMake(320.0.f, 200.0f);
}

38. Change once apply anywhere
Interface change
UICollectionView can set up cell size
!
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return [[[[[NSBundle mainBundle] loadNibNamed:@“Cell” owner:self
options:nil] lastObject] bounds] size];
}

39. Change once apply anywhere
Interface change
- (CGSize)sizeForNibNamed:(NSString *)nibName
{
CGSize nibSize = CGSizeZero;
if ([self.nibSizeDict objectForKey:nibName]) {
NSString *sizeString = [self.nibSizeDict objectForKey:nibName];
nibSize = CGSizeFromString(sizeString);
} else {
UIView *nibView = [[[NSBundle mainBundle] loadNibNamed:nibName
owner:self options:nil] lastObject];
if (nibView != nil) {
nibSize = CGSizeMake(CGRectGetWidth(nibView.bounds),
CGRectGetHeight(nibView.bounds));
[self.nibSizeDict setObject:NSStringFromCGSize(nibSize)
forKey:nibName];
}
}
return nibSize;
}

40. Change once apply anywhere
Interface change
UICollectionView can set up cell size SMARTER!
!
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return [[NibSizeCalculator sharedInstance] sizeForNibNamed:@"Cell"];
}

41. Cache everything if you can

42. Fast materials replacement
ICON and assets color
ICON should be able to apply theme color

43. Fast materials replacement
Implement category for UIImage
UIImage+color.h
+ (UIImage *)image:(UIImage *)image tintColor:(UIColor *)color;
+ (UIImage *)image:(UIImage *)image replaceColor:(UIColor *)color;
+ (UIImage *)imageNamed:(NSString *)name tintColor:(UIColor *)color;
+ (UIImage *)imageNamed:(NSString *)name replaceColor:(UIColor *)color;

44. Fast materials replacement
Implement category for UIImage
Change ICON’s theme color
@import “UIImage+Color.h”
self.presetImageView.image = [UIImage imageNamed:@“icon-folder.png"
replaceColor:[UIColor themeLightWhite]];
UIImage *settingButtonImage = [UIImage imageNamed:@"icon-setting.png"
replaceColor:[UIColor themeForeground]];
[settingButton setImage:settingButtonImage forState:UIControlStateNormal];

45. Fast materials replacement
ICON theme color management

46. Design components
Design flexible components
Don’t hard code to set its size
Percent size design

47. Design components
Design flexible components
Set up component
!
- (void)setupComponent
{
self.backgroundColor = [UIColor clearColor];
!
CGFloat progressBigTextSize = 60.0f;
CGFloat progressSmallTextSize = 20.0f;
!
// more initialized code
}

48. Design components
Design flexible components
Set up component
!
- (void)setupComponent
{
self.backgroundColor = [UIColor clearColor];
!
CGFloat progressBigTextSize = CGRectGetWidth(self.bounds) * 0.35f;
CGFloat progressSmallTextSize = CGRectGetWidth(self.bounds) * 0.1f;
!
// more initialized code
}

49. Demo
Implement percent size design component

51. Deploy components
Bad way to deploy components
Use hard code
Use too more layers on interface builder

52. Deploy components
Deploy components efficiently

53. Version Control
Save your time and life

54. Why Version Control
Colleagues often break my code
Have critical bugs but I can’t fix it
Wanting different version (Free / Pro)
Customer told me previous change was better

55. Solutions for code change
Code management
Source code management
Git / SVN
3rd open source libraries
CocoaPods / Repo

56. Storyboard may make you CRAZY
Multiple developers work together
Easy to conflict
Hard to read and fix it
Wait a long time when open huge one

57. Storyboard may make you Crazy
Multiple developers work together
Split to smaller storyboard

58. Storyboard may make you Crazy
Multiple developers work together
Split to independent xib files

59. Quality Improvement
Don’t crash on user device

60. Test will not waste your time
Test can prove your code run well
Save lots of time to verify bugs
Find change problems immediately
Keep boring task away

61. Demo
The situation of automation test

63. Unit test
Implement unit test
XCTest Framework

64. Unit test
Implement unit test
Test your tests

65. Automation test
Implement automation test

66. Automation test
Implement automation test

67. Automation test
Implement automation test
UIATarget.onAlert = function onAlert(alert) {
var title = alert.name();
UIALogger.logWarning("Alert with title '" + title + "' encountered!");
UIATarget.localTarget().captureScreenWithName("alert_" + (new Date()).UTC());
return false;
}
for (var i = 0; i < 200; i++) {
// exposureSettingButton
checkInstanceExist(target.frontMostApp().mainWindow().buttons()[“exposure”].tap);
target.frontMostApp().mainWindow().buttons()[“exposure”].tap();
}

68. Automation test
Implement monkey test
if (times % 2 == 0) {
target.setDeviceOrientation(UIA_DEVICE_ORIENTATION_PORTRAIT);
} else {
target.setDeviceOrientation(UIA_DEVICE_ORIENTATION_LANDSCAPERIGHT);
}
if (times % 5 == 0) {
target.lockForDuration(5);
target.delay(2);
}

69. Location automated test
Implement location test
Location service is hard to test
Some developer will go out for test

70. Location automated test
Implement location test

71. Location automated test
GPX creator tool
Create routes on your device

72. Location automated test
GPX creator tool
Test on Xcode
Build automation test

73. Data Presentation
Content is soul of app

74. Present your content
Use core data to cache data
Lazy loader provides smooth interaction
Use data model process you data
!

75. Core data
Benefit of core data
Easy way to implement data storage
Cache larger data from internet / log
Multiple thread is big challenge
Recommend MagicalRecord library

76. Lazy loader
Benefit of lazy loader
Lazy loader will not block UI thread
Implement heavy process when stop interaction
Using right format in app
Manage memory carefully

77. Data model
Benefit of data model
Part of MVC design pattern
Change data source will easier
Separate logic and data layer
Easy automated test and verify

78. Summary

79. Summary
We have learned in this session
Our design should be flexible and easy deployment
List view is good architecture for data presentation
Cache everything if you can
Put project in Version Control
Test will improve quality and saving time

80. Other things need to remind

81. Keep in mind
Design Pattern
Shared code base
Handle multiple threads
Data model
Continuous delivery
Performance
Non-functional task

82. Demo
High performance process

85. Related sharing
MOPCON 2013 tech talk slide
http://www.slideshare.net/anistarsung/mopcon-share

86. More information
Anistar Sung
Yahoo Lead Engineer!
http://www.facebook.com/anistarsung
http://blog.riaproject.com
anistarsung@gmail.com
cfsung@yahoo-inc.com

87. Welcome join us
請到 104 搜尋 “Yahoo奇摩”
MOPCON Yahoo 現場攤位 3F

88. Q + A