mopcon 2014 - best software architecture in app development

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

anistarsung@gmail.com cfsung@yahoo-inc.com

More information

請到 104 搜尋 “Yahoo奇摩”MOPCON Yahoo 現場攤位 3F

Welcome join us

Q + A