yahoo open source - the tour & mystery of appdevkit (mopcon 2016)

The Tour & Mystery of AppDevKit

Anistar SungSenior Engineering Manager, Yahoo

Yahoo Open Source

MOPCON 2016

Why I did Open Source?

I supposed I was doing…

But real reasons were…

CHALLENGE

Duration of Development

Quality of Product

They’re my colleagues

I want red color background.

Challenge on Color Design easy sync tool for designer

Designer said:

Sure!


Developer said:

self.backgroundColor = [UIColor redColor];

I want #7b19a9 color background.


Designer said:

Hmmm… What the color is?


Developer said:

I want Yahoo purple background.


Designer said:

Using Category to improve UIColor

+ (UIColor *)ADKColorWithHexString:(NSString *)hexString;+ (UIColor *)ADKColorWithHexNumber:(NSUInteger)hexNumber;


Management your theme color

+ (UIColor *)themeBackground; + (UIColor *)themeForeground; + (UIColor *)themeDisabled; + (UIColor *)themeFocus; + (UIColor *)themeHighlight; + (UIColor *)themeTitle; + (UIColor *)themeSubtitle;


+ (UIColor *)themeBackground{ return [UIColor ADKColorWithHexString:@"1f2f3b"];}

+ (UIColor *)themePanel{ return [UIColor ADKColorWithHexString:@"333e49"];}

Change once apply anywhere Theme color management

+ (UIColor *)themeBackground{ return [UIColor ADKColorWithHexString:@"dedede"];}

+ (UIColor *)themePanel{ return [UIColor ADKColorWithHexString:@"f4f4f4"];}

Change once apply anywhere Theme color management

AppDevKit

Objectives of AppDevKit

Saving developing time

Supporting daily required

Maintaining easier

High performance / reliable solution

Composition of AppDevKit

Common UI

Animation

Image

List

AppDevKit

Anson NgABU Senior App Engineer, Yahoo

Quick Tour of

AppDevKit

Hex ColorDate Formatter

Number Formatter

Gradient View

Over 100+ featuresAnimation

App Util

Nib Size Calculator

CalculatorHelper

AutoLayout Constraint Tool

Image Filters

ModalMaskView

Dynamic width/height Cell

Pull to RefreshInfinite scrolling

Using AutoLayout Easier Solve UI elements alignment problem

@import “UIView+ADKAutoLayoutSupport.h” [self.presetImageView ADKHideTopConstraint]; [self.presetImageView ADKUnhideTopConstraint];


@import “UIView+AutoLayoutSupport.h”

- (void)ADKSetConstraintConstant:(CGFloat)constant forAttribute:(NSLayoutAttribute)attribute;


DemoUsing UIView+ADKAutoLayoutSupport

Image Filters

Image Color replacement

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

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

ADKModalMaskView

UIViewController

- (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag completion:(void (^)(void))completion

Providing Fancy Modal View Customizing your modal effect

@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

DemoUsing ADKModalMaskView & UIImage+ADKImageFilter

Dynamic Height/Width cell

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

DemoUsing ADKCellDynamicSizeCalculator


BEFORE AFTER

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) }


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"]; }


Pull to Refresh & Infinite scrolling

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 MechanismSupport UICollectionView & UITableView

DemoUsing UIScrollView+ADKPullToRefreshView

The Mystery You Would Like to KnowDesign Shareable Library with 9 Rules

Bounding User Interface could be EVIL

Build Libraries without UI

Made It Smaller and Independent

Small modules will be better than a huge feature

Cache Heavy Calculated Result

CPU resource is precious

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;

…

}

Avoid Using BAD Solution

Runtime associated object is expensive

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;

…

}

Separate Libraries into small pieces

Separating libraries in purpose

Separate Libraries into small pieces

Common UI

Animation

Image

List

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

Document is Important

Comments are Documents as well

Document is Important

appledochttps://github.com/tomaz/appledoc

Platform Detection

Try to detect OS, Device and SDK

Platform Detection

if (ADKIsBelowIOS10()) { ... }

if (ADKIsLongerScreen()) { ... }

if ([UIImage instancesRespondToSelector:@selector(…)]) {…}

Testing is Required

Testing is good strategy to save time and life

Testing is Required

Friendly UI Would be Better

Using vision data provider

Friendly UI Would be Better

IB_DESIGNABLE

@interface ADKGradientView : UIView

@property (nonatomic, strong) IBInspectable UIColor *beginColor;

@property (nonatomic, strong) IBInspectable UIColor *endColor;

Open Source ProgressCurrent progress update

AppDevKit Core Team

Anistar Anson Jeff QC

Anistar Sung Yahoo Senior Engineering [email protected]

AppDevKit Yahoo Core TeamYahoo Engineering Engineers [email protected]

mailto:[email protected]?subject=

mailto:[email protected]?subject=

Google Index of AppDevKit

Github REPO

CocoaPods Support

API Documents

Tutorials

One More Thing…

CameraKit

ADKCamera *camera = [[ADKCamera alloc] initCamcoderWithDelegate:self quality:AVCaptureSessionPresetHigh position:ADKCameraPositionRear];

camera.alignDeviceOrientation = YES;

[self.view.layer insertSublayer:camera.captureVideoPreviewLayer atIndex:0];

Initialize Customize CameraQuick & powerful camera developing

Live DemoUsing CameraKit to build customized camera

CameraKit would be released in Nov.

Composition of AppDevKit

Common UI

Animation

Image List

Camera

– iOS BDD

DAY 1 - 16:15 R2QC Lin, Senior App Engineer, Yahoo

iOS self-sizing cell

DAY 2 - 10:15 R2Jeff Lin, Senior App Engineer, Yahoo

More Sessions in MOPCON 2016

yahoo open source - the tour & mystery of appdevkit (mopcon 2016)

Mobile