Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Best Software Architecture in 
App Development 
Anistar Sung
Introduction 
Anistar sung 宋志峰 
Mobile, client, server developer 
Instructor, Consulter and Author 
Focus on: iOS, Android...
Work @ 
Mobile Team
Yahoo work 
Store marketplace app
Personal works 
NewYork Times - Best Top 10 photography app 
App store Top 2 paid app in US 
App store Top 40 in world 
Be...
Personal works
Agenda 
Problems in real world 
Smart design + architecture 
Version control 
Quality improvement
Problems in Real World 
What developer do?
What I think I do
What I really do
Real development team
Smart Design + Architecture 
Wanting everything easier
Smart way to create app 
Easy to present content 
Change once apply anywhere 
Fast materials replacement 
Design + Deploy ...
Easy to present content 
List view for presentation 
Most content can display by list view 
UICollectionView is a powerful...
List view cover 80% views in 
Yahoo Store Marketplace app
Demo 
Using UICollectionView to present content
Easy to present content 
Benefit of UICollectionView 
Flexible layout 
Reuse cells 
Memory management 
Automatic updates 
...
Easy to present content 
Custom UICollectionView for production 
UICollectionView
Easy to present content 
Custom UICollectionView for production 
UICollectionView 
UICollectionReusableView 
!
Easy to present content 
Custom UICollectionView for production 
UICollectionView 
UICollectionReusableView 
UICollectionV...
Easy to present content 
Custom UICollectionView for production 
UICollectionView 
UICollectionReusableView 
UICollectionV...
Demo 
Using Custom UICollectionView
Change once apply anywhere 
The pain for change 
Hard to sync with designer 
Designer or PM always change 
After change ne...
Challenge on Color 
Design easy sync tool for designer 
Design: I want red color background. 
Developer: Sure! 
self.backg...
Challenge on Color 
Design easy sync tool for designer 
Design: I want #7b19a9 background. 
Developer: What!? 
!?
Challenge on Color 
Design easy sync tool for designer 
Design: I want Yahoo background. 
Developer: Mom, I want go home. ...
Challenge on Color 
Design easy sync tool for designer 
Using Category to improve UIColor 
+ (UIColor *)colorWithHexString...
Challenge on Color 
Design easy sync tool for designer 
Management your theme color 
+ (UIColor *)themeBackground; 
+ (UIC...
Change once apply anywhere 
Theme color management 
You don’t need write import everywhere 
.pch file is your friend
Change once apply anywhere 
Theme color management 
+ (UIColor *)themeBackground 
{ 
return [UIColor colorWithHexString:@"...
Change once apply anywhere 
Theme color management 
+ (UIColor *)themeBackground 
{ 
return [UIColor colorWithHexString:@"...
Change once apply anywhere 
Theme color management
Change once apply anywhere 
Other pain of change 
Interface size and layout 
ICON and assets color 
Text on the screen
Change once apply anywhere 
Interface change
Change once apply anywhere 
Interface change 
UICollectionView can set up cell size 
! 
- (CGSize)collectionView:(UICollec...
Change once apply anywhere 
Interface change 
UICollectionView can set up cell size 
! 
- (CGSize)collectionView:(UICollec...
Change once apply anywhere 
Interface change 
- (CGSize)sizeForNibNamed:(NSString *)nibName 
{ 
CGSize nibSize = CGSizeZer...
Change once apply anywhere 
Interface change 
UICollectionView can set up cell size SMARTER! 
! 
- (CGSize)collectionView:...
Cache everything if you can
Fast materials replacement 
ICON and assets color 
ICON should be able to apply theme color
Fast materials replacement 
Implement category for UIImage 
UIImage+color.h 
+ (UIImage *)image:(UIImage *)image tintColor...
Fast materials replacement 
Implement category for UIImage 
Change ICON’s theme color 
@import “UIImage+Color.h” 
self.pre...
Fast materials replacement 
ICON theme color management
Design components 
Design flexible components 
Don’t hard code to set its size 
Percent size design
Design components 
Design flexible components 
Set up component 
! 
- (void)setupComponent 
{ 
self.backgroundColor = [UIC...
Design components 
Design flexible components 
Set up component 
! 
- (void)setupComponent 
{ 
self.backgroundColor = [UIC...
Demo 
Implement percent size design component
Deploy components 
Bad way to deploy components 
Use hard code 
Use too more layers on interface builder
Deploy components 
Deploy components efficiently
Version Control 
Save your time and life
Why Version Control 
Colleagues often break my code 
Have critical bugs but I can’t fix it 
Wanting different version (Fre...
Solutions for code change 
Code management 
Source code management 
Git / SVN 
3rd open source libraries 
CocoaPods / Repo
Storyboard may make you CRAZY 
Multiple developers work together 
Easy to conflict 
Hard to read and fix it 
Wait a long t...
Storyboard may make you Crazy 
Multiple developers work together 
Split to smaller storyboard
Storyboard may make you Crazy 
Multiple developers work together 
Split to independent xib files
Quality Improvement 
Don’t crash on user device
Test will not waste your time 
Test can prove your code run well 
Save lots of time to verify bugs 
Find change problems i...
Demo 
The situation of automation test
Unit test 
Implement unit test 
XCTest Framework
Unit test 
Implement unit test 
Test your tests
Automation test 
Implement automation test
Automation test 
Implement automation test
Automation test 
Implement automation test 
UIATarget.onAlert = function onAlert(alert) { 
var title = alert.name(); 
UIAL...
Automation test 
Implement monkey test 
if (times % 2 == 0) { 
target.setDeviceOrientation(UIA_DEVICE_ORIENTATION_PORTRAIT...
Location automated test 
Implement location test 
Location service is hard to test 
Some developer will go out for test
Location automated test 
Implement location test
Location automated test 
GPX creator tool 
Create routes on your device
Location automated test 
GPX creator tool 
Test on Xcode 
Build automation test
Data Presentation 
Content is soul of app
Present your content 
Use core data to cache data 
Lazy loader provides smooth interaction 
Use data model process you dat...
Core data 
Benefit of core data 
Easy way to implement data storage 
Cache larger data from internet / log 
Multiple threa...
Lazy loader 
Benefit of lazy loader 
Lazy loader will not block UI thread 
Implement heavy process when stop interaction 
...
Data model 
Benefit of data model 
Part of MVC design pattern 
Change data source will easier 
Separate logic and data lay...
Summary
Summary 
We have learned in this session 
Our design should be flexible and easy deployment 
List view is good architectur...
Other things need to remind
Keep in mind 
Design Pattern 
Shared code base 
Handle multiple threads 
Data model 
Continuous delivery 
Performance 
Non...
Demo 
High performance process
Related sharing 
MOPCON 2013 tech talk slide 
http://www.slideshare.net/anistarsung/mopcon-share
More information 
Anistar Sung 
Yahoo Lead Engineer! 
http://www.facebook.com/anistarsung 
http://blog.riaproject.com 
ani...
Welcome join us 
請到 104 搜尋 “Yahoo奇摩” 
MOPCON Yahoo 現場攤位 3F
Q + A
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Evolving Mobile Architectures - Developer Version
Next
Download to read offline and view in fullscreen.

66

Share

Download to read offline

MOPCON 2014 - Best software architecture in app development

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

MOPCON 2014 - Best software architecture in app development

  1. 1. Best Software Architecture in App Development Anistar Sung
  2. 2. Introduction Anistar sung 宋志峰 Mobile, client, server developer Instructor, Consulter and Author Focus on: iOS, Android, HTML5, PHP… etc
  3. 3. Work @ Mobile Team
  4. 4. Yahoo work Store marketplace app
  5. 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. 6. Personal works
  7. 7. Agenda Problems in real world Smart design + architecture Version control Quality improvement
  8. 8. Problems in Real World What developer do?
  9. 9. What I think I do
  10. 10. What I really do
  11. 11. Real development team
  12. 12. Smart Design + Architecture Wanting everything easier
  13. 13. Smart way to create app Easy to present content Change once apply anywhere Fast materials replacement Design + Deploy components Data presentation
  14. 14. Easy to present content List view for presentation Most content can display by list view UICollectionView is a powerful component
  15. 15. List view cover 80% views in Yahoo Store Marketplace app
  16. 16. Demo Using UICollectionView to present content
  17. 17. Easy to present content Benefit of UICollectionView Flexible layout Reuse cells Memory management Automatic updates Waterfall or running water in nature
  18. 18. Easy to present content Custom UICollectionView for production UICollectionView
  19. 19. Easy to present content Custom UICollectionView for production UICollectionView UICollectionReusableView !
  20. 20. Easy to present content Custom UICollectionView for production UICollectionView UICollectionReusableView UICollectionViewCell !
  21. 21. Easy to present content Custom UICollectionView for production UICollectionView UICollectionReusableView UICollectionViewCell UICollectionViewLayout Waterfall or running water in nature
  22. 22. Demo Using Custom UICollectionView
  23. 23. Change once apply anywhere The pain for change Hard to sync with designer Designer or PM always change After change need to rewrite code
  24. 24. Challenge on Color Design easy sync tool for designer Design: I want red color background. Developer: Sure! self.backgroundColor = [UIColor redColor];
  25. 25. Challenge on Color Design easy sync tool for designer Design: I want #7b19a9 background. Developer: What!? !?
  26. 26. Challenge on Color Design easy sync tool for designer Design: I want Yahoo background. Developer: Mom, I want go home. :( #@*$!
  27. 27. Challenge on Color Design easy sync tool for designer Using Category to improve UIColor + (UIColor *)colorWithHexString:(NSString *)hexstring; + (UIColor *)colorWithHexNumber:(NSUInteger)hexNumber;
  28. 28. 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;
  29. 29. Change once apply anywhere Theme color management You don’t need write import everywhere .pch file is your friend
  30. 30. Change once apply anywhere Theme color management + (UIColor *)themeBackground { return [UIColor colorWithHexString:@"1f2f3b"]; } ! + (UIColor *)themePanel { return [UIColor colorWithHexString:@"333e49"]; }
  31. 31. Change once apply anywhere Theme color management + (UIColor *)themeBackground { return [UIColor colorWithHexString:@"dedede"]; } ! + (UIColor *)themePanel { return [UIColor colorWithHexString:@"f4f4f4"]; }
  32. 32. Change once apply anywhere Theme color management
  33. 33. Change once apply anywhere Other pain of change Interface size and layout ICON and assets color Text on the screen
  34. 34. Change once apply anywhere Interface change
  35. 35. 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); }
  36. 36. 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]; }
  37. 37. 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; }
  38. 38. 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"]; }
  39. 39. Cache everything if you can
  40. 40. Fast materials replacement ICON and assets color ICON should be able to apply theme color
  41. 41. 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;
  42. 42. 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];
  43. 43. Fast materials replacement ICON theme color management
  44. 44. Design components Design flexible components Don’t hard code to set its size Percent size design
  45. 45. 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 }
  46. 46. 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 }
  47. 47. Demo Implement percent size design component
  48. 48. Deploy components Bad way to deploy components Use hard code Use too more layers on interface builder
  49. 49. Deploy components Deploy components efficiently
  50. 50. Version Control Save your time and life
  51. 51. 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
  52. 52. Solutions for code change Code management Source code management Git / SVN 3rd open source libraries CocoaPods / Repo
  53. 53. 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
  54. 54. Storyboard may make you Crazy Multiple developers work together Split to smaller storyboard
  55. 55. Storyboard may make you Crazy Multiple developers work together Split to independent xib files
  56. 56. Quality Improvement Don’t crash on user device
  57. 57. 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
  58. 58. Demo The situation of automation test
  59. 59. Unit test Implement unit test XCTest Framework
  60. 60. Unit test Implement unit test Test your tests
  61. 61. Automation test Implement automation test
  62. 62. Automation test Implement automation test
  63. 63. 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(); }
  64. 64. 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); }
  65. 65. Location automated test Implement location test Location service is hard to test Some developer will go out for test
  66. 66. Location automated test Implement location test
  67. 67. Location automated test GPX creator tool Create routes on your device
  68. 68. Location automated test GPX creator tool Test on Xcode Build automation test
  69. 69. Data Presentation Content is soul of app
  70. 70. Present your content Use core data to cache data Lazy loader provides smooth interaction Use data model process you data !
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. Summary
  75. 75. 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
  76. 76. Other things need to remind
  77. 77. Keep in mind Design Pattern Shared code base Handle multiple threads Data model Continuous delivery Performance Non-functional task
  78. 78. Demo High performance process
  79. 79. Related sharing MOPCON 2013 tech talk slide http://www.slideshare.net/anistarsung/mopcon-share
  80. 80. More information Anistar Sung Yahoo Lead Engineer! http://www.facebook.com/anistarsung http://blog.riaproject.com anistarsung@gmail.com cfsung@yahoo-inc.com
  81. 81. Welcome join us 請到 104 搜尋 “Yahoo奇摩” MOPCON Yahoo 現場攤位 3F
  82. 82. Q + A
  • DialogueHsueh

    Sep. 17, 2016
  • CupidoRegina

    Feb. 26, 2016
  • dwatow

    Nov. 1, 2015
  • ranadheerr

    Sep. 3, 2015
  • EricWeiC63AMG

    Mar. 12, 2015
  • inter008

    Mar. 10, 2015
  • aldousw

    Mar. 10, 2015
  • cuoyen

    Feb. 2, 2015
  • jarsing

    Jan. 25, 2015
  • yulin0629

    Jan. 23, 2015
  • jieweiwu

    Jan. 15, 2015
  • tokikanno

    Dec. 27, 2014
  • sinergy

    Dec. 26, 2014
  • flyoscar

    Dec. 26, 2014
  • PoShengHsu

    Dec. 26, 2014
  • bestlong

    Dec. 26, 2014
  • jazzwang

    Dec. 25, 2014
  • briannfang

    Dec. 25, 2014
  • ChunChuanSu

    Dec. 25, 2014
  • JasonChien1

    Dec. 24, 2014

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.

Views

Total views

7,196

On Slideshare

0

From embeds

0

Number of embeds

218

Actions

Downloads

124

Shares

0

Comments

0

Likes

66

×