SlideShare a Scribd company logo
Best Software Architecture in 
App Development 
Anistar Sung
Introduction 
Anistar sung 宋志峰 
Mobile, client, server developer 
Instructor, Consulter and Author 
Focus on: iOS, Android, HTML5, PHP… etc
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 
Best recommended app in app review sites
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 components 
Data presentation
Easy to present content 
List view for presentation 
Most content can display by list view 
UICollectionView is a powerful 
component
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 
Waterfall or running water in nature
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 
UICollectionViewCell 
!
Easy to present content 
Custom UICollectionView for production 
UICollectionView 
UICollectionReusableView 
UICollectionViewCell 
UICollectionViewLayout 
Waterfall or running water in nature
Demo 
Using Custom UICollectionView
Change once apply anywhere 
The pain for change 
Hard to sync with designer 
Designer or PM always change 
After change need to rewrite code
Challenge on Color 
Design easy sync tool for designer 
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;
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:@"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 
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:(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"]; 
}
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:(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 
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 = [UIColor clearColor]; 
! 
CGFloat progressBigTextSize = 60.0f; 
CGFloat progressSmallTextSize = 20.0f; 
! 
// more initialized code 
}
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 
}
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 (Free / Pro) 
Customer told me previous change was better
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 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
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 immediately 
Keep boring task away
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(); 
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 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); 
}
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 data 
!
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
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
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
Summary
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
Other things need to remind
Keep in mind 
Design Pattern 
Shared code base 
Handle multiple threads 
Data model 
Continuous delivery 
Performance 
Non-functional task
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 
anistarsung@gmail.com 
cfsung@yahoo-inc.com
Welcome join us 
請到 104 搜尋 “Yahoo奇摩” 
MOPCON Yahoo 現場攤位 3F
Q + A

More Related Content

What's hot

Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Gil Irizarry
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better Performance
Elif Boncuk
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
Gil Irizarry
 
Getting Started with XCTest and XCUITest for iOS App Testing
Getting Started with XCTest and XCUITest for iOS App TestingGetting Started with XCTest and XCUITest for iOS App Testing
Getting Started with XCTest and XCUITest for iOS App Testing
Bitbar
 
Android dev tips
Android dev tipsAndroid dev tips
Android dev tips
Kanda Runapongsa Saikaew
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
Google
 
Eclipse 2011 Hot Topics
Eclipse 2011 Hot TopicsEclipse 2011 Hot Topics
Eclipse 2011 Hot Topics
Lars Vogel
 
Introduction to Google App Engine
Introduction to Google App EngineIntroduction to Google App Engine
Introduction to Google App Engine
Kanda Runapongsa Saikaew
 
Selendroid - Selenium for Android
Selendroid - Selenium for AndroidSelendroid - Selenium for Android
Selendroid - Selenium for Android
Dominik Dary
 
Recap of Android Dev Summit 2018
Recap of Android Dev Summit 2018Recap of Android Dev Summit 2018
Recap of Android Dev Summit 2018
Hassan Abid
 
Azure mobile apps
Azure mobile appsAzure mobile apps
Azure mobile apps
David Giard
 
Android tv get started
Android tv get startedAndroid tv get started
Android tv get started
Ascii Huang
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Android studio 2.0: default project structure
Android studio 2.0: default project structureAndroid studio 2.0: default project structure
Android studio 2.0: default project structure
Vyara Georgieva
 
Hassle-Free Continuous Integration with Real Device Testing
Hassle-Free Continuous Integration with Real Device TestingHassle-Free Continuous Integration with Real Device Testing
Hassle-Free Continuous Integration with Real Device Testing
Bitbar
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1
 
Developing better debug_components
Developing better debug_componentsDeveloping better debug_components
Developing better debug_components
Tomoaki Imai
 
Android TV: Building apps with Google’s Leanback Library
Android TV: Building apps with  Google’s Leanback LibraryAndroid TV: Building apps with  Google’s Leanback Library
Android TV: Building apps with Google’s Leanback Library
Joe Birch
 
Android cours
Android coursAndroid cours
Android cours
zakaria bentahar
 
Google App Engine tutorial
Google App Engine tutorialGoogle App Engine tutorial
Google App Engine tutorial
NameForTheTutorial
 

What's hot (20)

Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
 
Optimizing Apps for Better Performance
Optimizing Apps for Better PerformanceOptimizing Apps for Better Performance
Optimizing Apps for Better Performance
 
Beginning Native Android Apps
Beginning Native Android AppsBeginning Native Android Apps
Beginning Native Android Apps
 
Getting Started with XCTest and XCUITest for iOS App Testing
Getting Started with XCTest and XCUITest for iOS App TestingGetting Started with XCTest and XCUITest for iOS App Testing
Getting Started with XCTest and XCUITest for iOS App Testing
 
Android dev tips
Android dev tipsAndroid dev tips
Android dev tips
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
 
Eclipse 2011 Hot Topics
Eclipse 2011 Hot TopicsEclipse 2011 Hot Topics
Eclipse 2011 Hot Topics
 
Introduction to Google App Engine
Introduction to Google App EngineIntroduction to Google App Engine
Introduction to Google App Engine
 
Selendroid - Selenium for Android
Selendroid - Selenium for AndroidSelendroid - Selenium for Android
Selendroid - Selenium for Android
 
Recap of Android Dev Summit 2018
Recap of Android Dev Summit 2018Recap of Android Dev Summit 2018
Recap of Android Dev Summit 2018
 
Azure mobile apps
Azure mobile appsAzure mobile apps
Azure mobile apps
 
Android tv get started
Android tv get startedAndroid tv get started
Android tv get started
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Android studio 2.0: default project structure
Android studio 2.0: default project structureAndroid studio 2.0: default project structure
Android studio 2.0: default project structure
 
Hassle-Free Continuous Integration with Real Device Testing
Hassle-Free Continuous Integration with Real Device TestingHassle-Free Continuous Integration with Real Device Testing
Hassle-Free Continuous Integration with Real Device Testing
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
 
Developing better debug_components
Developing better debug_componentsDeveloping better debug_components
Developing better debug_components
 
Android TV: Building apps with Google’s Leanback Library
Android TV: Building apps with  Google’s Leanback LibraryAndroid TV: Building apps with  Google’s Leanback Library
Android TV: Building apps with Google’s Leanback Library
 
Android cours
Android coursAndroid cours
Android cours
 
Google App Engine tutorial
Google App Engine tutorialGoogle App Engine tutorial
Google App Engine tutorial
 

Similar to MOPCON 2014 - Best software architecture in app development

Leaving Interface Builder Behind
Leaving Interface Builder BehindLeaving Interface Builder Behind
Leaving Interface Builder Behind
John Wilker
 
mobl
moblmobl
mobl
zefhemel
 
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
anistar sung
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
JSFestUA
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lecture
Tsvyatko Konov
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
Oliver N
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development
Mahmoud Hamed Mahmoud
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKit
Louis D'hauwe
 
Telerik Kendo UI Overview
Telerik Kendo UI OverviewTelerik Kendo UI Overview
Telerik Kendo UI Overview
Ed Musters
 
How React Native, Appium and me made each other shine @Frontmania 16-11-2018
How React Native, Appium and me made each other shine @Frontmania 16-11-2018How React Native, Appium and me made each other shine @Frontmania 16-11-2018
How React Native, Appium and me made each other shine @Frontmania 16-11-2018
Wim Selles
 
Better User Experience with .NET
Better User Experience with .NETBetter User Experience with .NET
Better User Experience with .NET
Peter Gfader
 
Tools and practices for rapid application development
Tools and practices for rapid application developmentTools and practices for rapid application development
Tools and practices for rapid application development
Zoltán Váradi
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
Robert Cooper
 
Building Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture ComponentsBuilding Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture Components
Hassan Abid
 
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb HighlightsGoogle I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
Romain Guy
 
Getting Started With Material Design
Getting Started With Material DesignGetting Started With Material Design
Getting Started With Material Design
Yasin Yildirim
 
CodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilderCodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilder
Andres Almiray
 
Android development for iOS developers
Android development for iOS developersAndroid development for iOS developers
Android development for iOS developers
Darryl Bayliss
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
Jeremy Grancher
 
Android Wear: A Developer's Perspective
Android Wear: A Developer's PerspectiveAndroid Wear: A Developer's Perspective
Android Wear: A Developer's Perspective
Vin Lim
 

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

Leaving Interface Builder Behind
Leaving Interface Builder BehindLeaving Interface Builder Behind
Leaving Interface Builder Behind
 
mobl
moblmobl
mobl
 
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lecture
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKit
 
Telerik Kendo UI Overview
Telerik Kendo UI OverviewTelerik Kendo UI Overview
Telerik Kendo UI Overview
 
How React Native, Appium and me made each other shine @Frontmania 16-11-2018
How React Native, Appium and me made each other shine @Frontmania 16-11-2018How React Native, Appium and me made each other shine @Frontmania 16-11-2018
How React Native, Appium and me made each other shine @Frontmania 16-11-2018
 
Better User Experience with .NET
Better User Experience with .NETBetter User Experience with .NET
Better User Experience with .NET
 
Tools and practices for rapid application development
Tools and practices for rapid application developmentTools and practices for rapid application development
Tools and practices for rapid application development
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
Building Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture ComponentsBuilding Modern Apps using Android Architecture Components
Building Modern Apps using Android Architecture Components
 
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb HighlightsGoogle I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
 
Getting Started With Material Design
Getting Started With Material DesignGetting Started With Material Design
Getting Started With Material Design
 
CodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilderCodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilder
 
Android development for iOS developers
Android development for iOS developersAndroid development for iOS developers
Android development for iOS developers
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
 
Android Wear: A Developer's Perspective
Android Wear: A Developer's PerspectiveAndroid Wear: A Developer's Perspective
Android Wear: A Developer's Perspective
 

More from anistar sung

Mopcon2017 - AppDevKit x CameraKit
Mopcon2017 - AppDevKit x CameraKitMopcon2017 - AppDevKit x CameraKit
Mopcon2017 - AppDevKit x CameraKit
anistar sung
 
Best Strategy for Developing App Architecture and High Quality App
Best Strategy for Developing App Architecture and High Quality AppBest Strategy for Developing App Architecture and High Quality App
Best Strategy for Developing App Architecture and High Quality App
anistar sung
 
MOPCON 2015 - Tips of Mobile Continuous Delivery
MOPCON 2015 - Tips of Mobile Continuous DeliveryMOPCON 2015 - Tips of Mobile Continuous Delivery
MOPCON 2015 - Tips of Mobile Continuous Delivery
anistar sung
 
Yahoo2013 hackday - Frosted Glass Effect on iOS app
Yahoo2013 hackday - Frosted Glass Effect on iOS app Yahoo2013 hackday - Frosted Glass Effect on iOS app
Yahoo2013 hackday - Frosted Glass Effect on iOS app
anistar sung
 
MOPCON 2013 - APP急速視覺UX回饋應用
MOPCON 2013 - APP急速視覺UX回饋應用MOPCON 2013 - APP急速視覺UX回饋應用
MOPCON 2013 - APP急速視覺UX回饋應用
anistar sung
 
談笑揭秘CSS3
談笑揭秘CSS3談笑揭秘CSS3
談笑揭秘CSS3
anistar sung
 

More from anistar sung (6)

Mopcon2017 - AppDevKit x CameraKit
Mopcon2017 - AppDevKit x CameraKitMopcon2017 - AppDevKit x CameraKit
Mopcon2017 - AppDevKit x CameraKit
 
Best Strategy for Developing App Architecture and High Quality App
Best Strategy for Developing App Architecture and High Quality AppBest Strategy for Developing App Architecture and High Quality App
Best Strategy for Developing App Architecture and High Quality App
 
MOPCON 2015 - Tips of Mobile Continuous Delivery
MOPCON 2015 - Tips of Mobile Continuous DeliveryMOPCON 2015 - Tips of Mobile Continuous Delivery
MOPCON 2015 - Tips of Mobile Continuous Delivery
 
Yahoo2013 hackday - Frosted Glass Effect on iOS app
Yahoo2013 hackday - Frosted Glass Effect on iOS app Yahoo2013 hackday - Frosted Glass Effect on iOS app
Yahoo2013 hackday - Frosted Glass Effect on iOS app
 
MOPCON 2013 - APP急速視覺UX回饋應用
MOPCON 2013 - APP急速視覺UX回饋應用MOPCON 2013 - APP急速視覺UX回饋應用
MOPCON 2013 - APP急速視覺UX回饋應用
 
談笑揭秘CSS3
談笑揭秘CSS3談笑揭秘CSS3
談笑揭秘CSS3
 

Recently uploaded

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 

Recently uploaded (20)

Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 

MOPCON 2014 - Best software architecture in app development

  • 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
  • 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
  • 7. Agenda Problems in real world Smart design + architecture Version control Quality improvement
  • 8. Problems in Real World What developer do?
  • 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
  • 17.
  • 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
  • 24.
  • 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"]; }
  • 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
  • 50.
  • 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
  • 62.
  • 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
  • 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
  • 83.
  • 84.
  • 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