This session I explained about how to build shareable library and what we did for AppDeKit that is open source app developing tool for app development. If you're looking for a good mechanism for developing your own app, please read this deck to know AppDevKit more. https://github.com/yahoo/AppDevKit

1. The Tour & Mystery of AppDevKit
Anistar Sung
Senior Engineering Manager, Yahoo
Yahoo Open Source
MOPCON 2016

2. Why I did Open Source?

3. I supposed I was doing…

4. But real reasons were…

5. CHALLENGE

6. Duration of Development
Quality of Product

7. They’re my colleagues

9. I want red color background.
Challenge on Color
Design easy sync tool for designer
Designer said:

10. Sure!
Challenge on Color
Design easy sync tool for designer
Developer said:
self.backgroundColor = [UIColor redColor];

12. I want #7b19a9 color background.
Challenge on Color
Design easy sync tool for designer
Designer said:

13. Hmmm… What the color is?
Challenge on Color
Design easy sync tool for designer
Developer said:

15. I want Yahoo purple background.
Challenge on Color
Design easy sync tool for designer
Designer said:

17. Using Category to improve UIColor
+ (UIColor *)ADKColorWithHexString:(NSString *)hexString;
+ (UIColor *)ADKColorWithHexNumber:(NSUInteger)hexNumber;
Challenge on Color
Design easy sync tool for designer

18. 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

19. + (UIColor *)themeBackground
{
return [UIColor ADKColorWithHexString:@"1f2f3b"];
}
+ (UIColor *)themePanel
{
return [UIColor ADKColorWithHexString:@"333e49"];
}
Change once apply anywhere
Theme color management

20. + (UIColor *)themeBackground
{
return [UIColor ADKColorWithHexString:@"dedede"];
}
+ (UIColor *)themePanel
{
return [UIColor ADKColorWithHexString:@"f4f4f4"];
}
Change once apply anywhere
Theme color management

21. AppDevKit

22. Objectives of AppDevKit
Saving developing time
Supporting daily required
Maintaining easier
High performance / reliable solution

23. Composition of AppDevKit
Common UI
Animation
Image
List

24. AppDevKit
Anson Ng
ABU Senior App Engineer, Yahoo
Quick Tour of

25. AppDevKit
Hex Color
Date Formatter
Number Formatter
Gradient View
Over 100+ features
Animation
App Util
Nib Size Calculator
CalculatorHelper
AutoLayout Constraint Tool
Image Filters
ModalMaskView
Dynamic width/height Cell
Pull to Refresh
Infinite scrolling

26. AppDevKit
Hex Color
Date Formatter
Number Formatter
Gradient View
Over 100+ features
Animation
App Util
Nib Size Calculator
CalculatorHelper
AutoLayout Constraint Tool
Image Filters
ModalMaskView
Dynamic width/height Cell
Pull to Refresh
Infinite scrolling

27. Using AutoLayout Easier
Solve UI elements alignment problem

28. Using AutoLayout Easier
Solve UI elements alignment problem

29. Using AutoLayout Easier
Solve UI elements alignment problem

30. Using AutoLayout Easier
Solve UI elements alignment problem

31. @import “UIView+ADKAutoLayoutSupport.h”
[self.presetImageView ADKHideTopConstraint];
[self.presetImageView ADKUnhideTopConstraint];
Using AutoLayout Easier
Solve UI elements alignment problem

32. @import “UIView+AutoLayoutSupport.h”
- (void)ADKSetConstraintConstant:(CGFloat)constant
forAttribute:(NSLayoutAttribute)attribute;
Using AutoLayout Easier
Solve UI elements alignment problem

34. Demo
Using UIView+ADKAutoLayoutSupport

36. Image Filters

37. Image Color replacement

38. UIImage+ADKColorReplacement.h
+ (UIImage *)ADKImage:(UIImage *)image tintColor:(UIColor *)color;
+ (UIImage *)ADKImage:(UIImage *)image replaceColor:(UIColor *)color;
+ (UIImage *)ADKImageNamed:(NSString *)name tintColor:(UIColor *)color;
+ (UIImage *)ADKImageNamed:(NSString *)name replaceColor:(UIColor *)color;
Fast materials replacement
Implement category for UIImage

39. Change ICON’s theme color
@import “UIImage+ADKColorReplacement.h”
self.presetImageView.image = [UIImage ADKImageNamed:@“icon-folder.png"
replaceColor:[UIColor themeLightWhite]];
UIImage *settingButtonImage = [UIImage ADKImageNamed:@"icon-setting.png"
replaceColor:[UIColor themeForeground]];
[settingButton setImage:settingButtonImage forState:UIControlStateNormal];
Fast materials replacement
Implement category for UIImage

40. ADKModalMaskView

41. UIViewController
- (void)presentViewController:(UIViewController *)viewControllerToPresent
animated:(BOOL)flag completion:(void (^)(void))completion
Providing Fancy Modal View
Customizing your modal effect

42. @import “ADKModalMaskView.h”
[(ADKModalMaskView *)self.modalView showInView:self.view
withAnimation:YES
completion:^(BOOL finished) {
// Do something you want
}];
Providing Fancy Modal View
Customizing your modal effect

43. Demo
Using ADKModalMaskView &
UIImage+ADKImageFilter

45. Dynamic Height/Width cell

46. UICollectionView can set up cell size SMARTER!
@import ADKCellDynamicSizeCalculator.h
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize cellSize = [[NibSizeCalculator sharedInstance]
sizeForNibNamed:@“Cell”];
return [[ADKCellDynamicSizeCalculator sharedInstance]
sizeForDynamicHeightCellInstance:sampleCell
preferredSize:cellSize];
}
Change once apply anywhere
Interface change

47. Demo
Using ADKCellDynamicSizeCalculator

49. Change once apply anywhere
Interface change

50. Change once apply anywhere
Interface change
BEFORE AFTER

51. UICollectionView can set up cell size SMARTER!
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat height = 100.0f;
// 2nd requirement: height = 120.0f;
// 3rd requirement: height = 150.0f;
// I can try this all day…
return CGSize(320.0f,height)
}
Change once apply anywhere
Interface change

52. UICollectionView can set up cell size SMARTER!
@import ADKNibSizeCalculator.h
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return [[ADKNibSizeCalculator sharedInstance]
sizeForNibNamed:@"Cell"];
}
Change once apply anywhere
Interface change

53. Pull to Refresh &
Infinite scrolling

54. Customized pull to refresh feature
[self.collectionView
ADKAddPullToRefreshWithHandleView:refreshView
actionHandler:^{
// Calling API to get data and present on list
[self.collectionView reloadData];
}];
Implement Easy Refresh Mechanism
Support UICollectionView & UITableView

55. Demo
Using UIScrollView+ADKPullToRefreshView

57. The Mystery You Would Like to Know
Design Shareable Library with 9 Rules

58. Bounding User Interface could be EVIL
Build Libraries without UI

60. Made It Smaller and Independent
Small modules will be better than a huge feature

66. Cache Heavy Calculated Result
CPU resource is precious

67. Cache Heavy Calculated Result
+ (UIImage *)ADKImageNamed:(NSString *)name replaceColor:(UIColor *)color
{
NSString *cacheKeyString =
[UIImage cacheKeyStringWithImageNamed:name
colorReplaceMode:ADKColorReplaceModeReplace
color:color];
UIImage *resultImage = [s_imageCache objectForKey:cacheKeyString];
if (resultImage) return resultImage;
…
}

68. Avoid Using BAD Solution
Runtime associated object is expensive

69. Avoid Using BAD Solution
- (void)ADKHideView:(BOOL)isHidden withConstraints:(ADKLayoutAttribute)attributes
{
ADKAutoLayoutValueObject *valueObject = self.cachedConstraintValueObject;
if (isHidden) {
if (attributes & ADKLayoutAttributeLeading) {
NSLayoutConstraint *constraint =
[self ADKConstraintForAttribute:NSLayoutAttributeLeading];
valueObject.cachedLeadingConstraintConstant = constraint.constant;
…
}

70. Separate Libraries into small pieces
Separating libraries in purpose

71. Separate Libraries into small pieces
Common UI
Animation
Image
List

72. Separate Libraries into small pieces
s.subspec 'AppDevCommonKit' do |appDevCommonKit|
appDevCommonKit.source_files = …
appDevCommonKit.public_header_files = …
end
s.subspec 'AppDevUIKit' do |appDevUIKit|
appDevUIKit.source_files = …
appDevUIKit.public_header_files = …
appDevUIKit.dependency 'AppDevKit/AppDevCommonKit'
end

73. Document is Important
Comments are Documents as well

74. Document is Important
appledoc
https://github.com/tomaz/appledoc

75. Platform Detection
Try to detect OS, Device and SDK

76. Platform Detection
if (ADKIsBelowIOS10()) { ... }
if (ADKIsLongerScreen()) { ... }
if ([UIImage instancesRespondToSelector:@selector(…)]) {…}

77. Testing is Required
Testing is good strategy to save time and life

78. Testing is Required

79. Friendly UI Would be Better
Using vision data provider

80. Friendly UI Would be Better
IB_DESIGNABLE
@interface ADKGradientView : UIView
@property (nonatomic, strong) IBInspectable UIColor *beginColor;
@property (nonatomic, strong) IBInspectable UIColor *endColor;

81. Open Source Progress
Current progress update

82. AppDevKit Core Team
Anistar Anson Jeff QC
Anistar Sung
Yahoo Senior Engineering Manager
cfsung@yahoo-inc.com
AppDevKit Yahoo Core Team
Yahoo Engineering Engineers
app-dev-kit@yahoo-inc.com

83. Google Index of AppDevKit

84. Github REPO

85. CocoaPods Support

86. API Documents

87. Tutorials

88. One More Thing…

90. CameraKit

91. ADKCamera *camera = [[ADKCamera alloc]
initCamcoderWithDelegate:self
quality:AVCaptureSessionPresetHigh
position:ADKCameraPositionRear];
camera.alignDeviceOrientation = YES;
[self.view.layer
insertSublayer:camera.captureVideoPreviewLayer atIndex:0];
Initialize Customize Camera
Quick & powerful camera developing

92. Live Demo
Using CameraKit to build customized camera

93. CameraKit would be released in Nov.

94. Composition of AppDevKit
Common UI
Animation
Image List
Camera

95. – iOS BDD
DAY 1 - 16:15 R2
QC Lin, Senior App Engineer, Yahoo
iOS self-sizing cell
DAY 2 - 10:15 R2
Jeff Lin, Senior App Engineer, Yahoo
More Sessions in MOPCON 2016

96. Q + A