Successfully reported this slideshow.
Your SlideShare is downloading. ×

MOPCON 2014 - Best software architecture in app development

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 88 Ad

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.

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.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to MOPCON 2014 - Best software architecture in app development (20)

Advertisement

Recently uploaded (20)

Advertisement

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

×