mopcon 2014 - best software architecture in app development
DESCRIPTION
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.TRANSCRIPT
Best Software Architecture in App DevelopmentAnistar Sung
Anistar sung 宋志峰 Mobile, client, server developer Instructor, Consulter and Author
Focus on: iOS, Android, HTML5, PHP… etc
Introduction
Work @
Mobile Team
Store marketplace app
Yahoo work
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
Personal works
Personal works
Problems in real world
Smart design + architecture
Version control
Quality improvement
Agenda
Problems in Real WorldWhat developer do?
What I think I do
What I really do
Real development team
Smart Design + ArchitectureWanting everything easier
Easy to present content
Change once apply anywhere
Fast materials replacement
Design + Deploy components
Data presentation
Smart way to create app
Most content can display by list view
UICollectionView is a powerful component
Easy to present content List view for presentation
List view cover 80% views in Yahoo Store Marketplace app
DemoUsing UICollectionView to present content
Flexible layout
Reuse cells
Memory management
Automatic updates
Easy to present content Benefit of UICollectionView
Waterfall or running water in nature
UICollectionView
Easy to present content Custom UICollectionView for production
UICollectionView
UICollectionReusableView
!
Easy to present content Custom UICollectionView for production
UICollectionView
UICollectionReusableView
UICollectionViewCell
!
Easy to present content Custom UICollectionView for production
UICollectionView
UICollectionReusableView
UICollectionViewCell
UICollectionViewLayout
Easy to present content Custom UICollectionView for production
Waterfall or running water in nature
DemoUsing Custom UICollectionView
Hard to sync with designer
Designer or PM always change
After change need to rewrite code
Change once apply anywhere The pain for change
Design: I want red color background.
Developer: Sure! self.backgroundColor = [UIColor redColor];
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:(NSString *)hexstring;+ (UIColor *)colorWithHexNumber:(NSUInteger)hexNumber;
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;
Challenge on Color Design easy sync tool for designer
You don’t need write import everywhere
.pch file is your friend
Change once apply anywhere Theme color management
+ (UIColor *)themeBackground{ return [UIColor colorWithHexString:@"1f2f3b"];} !+ (UIColor *)themePanel{ return [UIColor colorWithHexString:@"333e49"];}
Change once apply anywhere Theme color management
+ (UIColor *)themeBackground{ return [UIColor colorWithHexString:@"dedede"];} !+ (UIColor *)themePanel{ return [UIColor colorWithHexString:@"f4f4f4"];}
Change once apply anywhere Theme color management
Change once apply anywhere Theme color management
Interface size and layout
ICON and assets color
Text on the screen
Change once apply anywhere Other pain of change
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); }
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]; }
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; }
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"]; }
Change once apply anywhere Interface change
Cache everything if you can
ICON should be able to apply theme color
Fast materials replacement ICON and assets color
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;
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];
Fast materials replacement Implement category for UIImage
Fast materials replacement ICON theme color management
Don’t hard code to set its size
Percent size design
Design componentsDesign flexible components
Set up component !- (void)setupComponent { self.backgroundColor = [UIColor clearColor]; ! CGFloat progressBigTextSize = 60.0f; CGFloat progressSmallTextSize = 20.0f; ! // more initialized code }
Design componentsDesign 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 }
Design componentsDesign flexible components
DemoImplement percent size design component
Use hard code
Use too more layers on interface builder
Deploy componentsBad way to deploy components
Deploy componentsDeploy components efficiently
Version ControlSave your time and life
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
Why Version Control
Source code management
Git / SVN
3rd open source libraries
CocoaPods / Repo
Solutions for code change Code management
Easy to conflict
Hard to read and fix it
Wait a long time when open huge one
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
Storyboard may make you Crazy Multiple developers work together
Quality ImprovementDon’t crash on user device
Test can prove your code run well
Save lots of time to verify bugs
Find change problems immediately
Keep boring task away
Test will not waste your time
DemoThe situation of automation test
XCTest Framework
Unit test Implement unit test
Test your tests
Unit test Implement unit test
Automation test Implement automation test
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();
}
Automation test Implement automation 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);
}
Automation test Implement monkey test
Location service is hard to test
Some developer will go out for test
Location automated test Implement location test
Location automated test Implement location test
Create routes on your device
Location automated test GPX creator tool
Test on Xcode Build automation test
Location automated test GPX creator tool
Data PresentationContent is soul of app
Use core data to cache data
Lazy loader provides smooth interaction
Use data model process you data
!
Present your content
Easy way to implement data storage
Cache larger data from internet / log
Multiple thread is big challenge
Recommend MagicalRecord library
Core data Benefit of core data
Lazy loader will not block UI thread
Implement heavy process when stop interaction
Using right format in app
Manage memory carefully
Lazy loader Benefit of lazy loader
Part of MVC design pattern
Change data source will easier
Separate logic and data layer
Easy automated test and verify
Data model Benefit of data model
Summary
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
Summary We have learned in this session
Other things need to remind
Design Pattern
Shared code base
Handle multiple threads
Data model
Continuous delivery
Performance
Non-functional task
Keep in mind
DemoHigh performance process
MOPCON 2013 tech talk slide http://www.slideshare.net/anistarsung/mopcon-share
Related sharing
Anistar Sung Yahoo Lead Engineer!
http://www.facebook.com/anistarsung http://blog.riaproject.com
[email protected] [email protected]
More information
請到 104 搜尋 “Yahoo奇摩”MOPCON Yahoo 現場攤位 3F
Welcome join us
Q + A