Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
The Tour & Mystery of AppDevKit
Anistar Sung
Senior 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!
Challenge on Color
Design easy sync tool for designer
Developer said:
self.backgroundColor = [UIColor redColor];
I want #7b19a9 color background.
Challenge on Color
Design easy sync tool for designer
Designer said:
Hmmm… What the color is?
Challenge on Color
Design easy sync tool for designer
Developer said:
I want Yahoo purple background.
Challenge on Color
Design easy sync tool for designer
Designer said:
Using Category to improve UIColor
+ (UIColor *)ADKColorWithHexString:(NSString *)hexString;

+ (UIColor *)ADKColorWithHexN...
Management your theme color
+ (UIColor *)themeBackground;
+ (UIColor *)themeForeground;
+ (UIColor *)themeDisabled;
+ (UIC...
+ (UIColor *)themeBackground

{

return [UIColor ADKColorWithHexString:@"1f2f3b"];

}
+ (UIColor *)themePanel

{

return [...
+ (UIColor *)themeBackground

{

return [UIColor ADKColorWithHexString:@"dedede"];

}
+ (UIColor *)themePanel

{

return [...
AppDevKit
Objectives of AppDevKit
Saving developing time
Supporting daily required
Maintaining easier
High performance / reliable so...
Composition of AppDevKit
Common UI
Animation
Image
List
AppDevKit
Anson Ng
ABU Senior App Engineer, Yahoo
Quick Tour of
AppDevKit
Hex Color
Date Formatter
Number Formatter
Gradient View
Over 100+ features
Animation
App Util
Nib Size Calculato...
AppDevKit
Hex Color
Date Formatter
Number Formatter
Gradient View
Over 100+ features
Animation
App Util
Nib Size Calculato...
Using AutoLayout Easier
Solve UI elements alignment problem
Using AutoLayout Easier
Solve UI elements alignment problem
Using AutoLayout Easier
Solve UI elements alignment problem
Using AutoLayout Easier
Solve UI elements alignment problem
@import “UIView+ADKAutoLayoutSupport.h”


[self.presetImageView ADKHideTopConstraint];
[self.presetImageView ADKUnhideTopC...
@import “UIView+AutoLayoutSupport.h”
- (void)ADKSetConstraintConstant:(CGFloat)constant
forAttribute:(NSLayoutAttribute)at...
Demo
Using UIView+ADKAutoLayoutSupport
Image Filters
Image Color replacement
UIImage+ADKColorReplacement.h

+ (UIImage *)ADKImage:(UIImage *)image tintColor:(UIColor *)color;
+ (UIImage *)ADKImage:(U...
Change ICON’s theme color

@import “UIImage+ADKColorReplacement.h”


self.presetImageView.image = [UIImage ADKImageNamed:@...
ADKModalMaskView
UIViewController
- (void)presentViewController:(UIViewController *)viewControllerToPresent

animated:(BOOL)flag completion:...
@import “ADKModalMaskView.h”


[(ADKModalMaskView *)self.modalView showInView:self.view
withAnimation:YES
completion:^(BOO...
Demo
Using ADKModalMaskView &
UIImage+ADKImageFilter
Dynamic Height/Width cell
UICollectionView can set up cell size SMARTER!
@import ADKCellDynamicSizeCalculator.h
- (CGSize)collectionView:(UICollecti...
Demo
Using ADKCellDynamicSizeCalculator
Change once apply anywhere
Interface change
Change once apply anywhere
Interface change
BEFORE AFTER
UICollectionView can set up cell size SMARTER!
- (CGSize)collectionView:(UICollectionView *)collectionView 

layout:(UICol...
UICollectionView can set up cell size SMARTER!
@import ADKNibSizeCalculator.h
- (CGSize)collectionView:(UICollectionView *...
Pull to Refresh &
Infinite scrolling
Customized pull to refresh feature
[self.collectionView
ADKAddPullToRefreshWithHandleView:refreshView
actionHandler:^{
// ...
Demo
Using UIScrollView+ADKPullToRefreshView
The Mystery You Would Like to Know
Design 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 *cacheK...
Avoid Using BAD Solution
Runtime associated object is expensive
Avoid Using BAD Solution
- (void)ADKHideView:(BOOL)isHidden withConstraints:(ADKLayoutAttribute)attributes
{
ADKAutoLayout...
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 = …
appD...
Document is Important
Comments are Documents as well
Document is Important
appledoc
https://github.com/tomaz/appledoc
Platform Detection
Try to detect OS, Device and SDK
Platform Detection
if (ADKIsBelowIOS10()) { ... }
if (ADKIsLongerScreen()) { ... }
if ([UIImage instancesRespondToSelector...
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 ...
Open Source Progress
Current progress update
AppDevKit Core Team
Anistar Anson Jeff QC
Anistar Sung

Yahoo Senior Engineering Manager

cfsung@yahoo-inc.com
AppDevKit Y...
Google Index of AppDevKit
Github REPO
CocoaPods Support
API Documents
Tutorials
One More Thing…
CameraKit
ADKCamera *camera = [[ADKCamera alloc] 

initCamcoderWithDelegate:self 

quality:AVCaptureSessionPresetHigh 

position:ADK...
Live Demo
Using 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 R2

QC Lin, Senior App Engineer, Yahoo

iOS self-sizing cell
DAY 2 - 10:15 R2

Jeff Lin, Senior Ap...
Q + A
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)
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)
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)
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)
Prochain SlideShare
Chargement dans…5
×

Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)

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

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à commenter

Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)

  1. 1. The Tour & Mystery of AppDevKit Anistar Sung Senior Engineering Manager, Yahoo Yahoo Open Source MOPCON 2016
  2. 2. Why I did Open Source?
  3. 3. I supposed I was doing…
  4. 4. But real reasons were…
  5. 5. CHALLENGE
  6. 6. Duration of Development Quality of Product
  7. 7. They’re my colleagues
  8. 8. I want red color background. Challenge on Color Design easy sync tool for designer Designer said:
  9. 9. Sure! Challenge on Color Design easy sync tool for designer Developer said: self.backgroundColor = [UIColor redColor];
  10. 10. I want #7b19a9 color background. Challenge on Color Design easy sync tool for designer Designer said:
  11. 11. Hmmm… What the color is? Challenge on Color Design easy sync tool for designer Developer said:
  12. 12. I want Yahoo purple background. Challenge on Color Design easy sync tool for designer Designer said:
  13. 13. Using Category to improve UIColor + (UIColor *)ADKColorWithHexString:(NSString *)hexString;
 + (UIColor *)ADKColorWithHexNumber:(NSUInteger)hexNumber; Challenge on Color Design easy sync tool for designer
  14. 14. 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
  15. 15. + (UIColor *)themeBackground
 {
 return [UIColor ADKColorWithHexString:@"1f2f3b"];
 } + (UIColor *)themePanel
 {
 return [UIColor ADKColorWithHexString:@"333e49"];
 } Change once apply anywhere Theme color management
  16. 16. + (UIColor *)themeBackground
 {
 return [UIColor ADKColorWithHexString:@"dedede"];
 } + (UIColor *)themePanel
 {
 return [UIColor ADKColorWithHexString:@"f4f4f4"];
 } Change once apply anywhere Theme color management
  17. 17. AppDevKit
  18. 18. Objectives of AppDevKit Saving developing time Supporting daily required Maintaining easier High performance / reliable solution
  19. 19. Composition of AppDevKit Common UI Animation Image List
  20. 20. AppDevKit Anson Ng ABU Senior App Engineer, Yahoo Quick Tour of
  21. 21. 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
  22. 22. 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
  23. 23. Using AutoLayout Easier Solve UI elements alignment problem
  24. 24. Using AutoLayout Easier Solve UI elements alignment problem
  25. 25. Using AutoLayout Easier Solve UI elements alignment problem
  26. 26. Using AutoLayout Easier Solve UI elements alignment problem
  27. 27. @import “UIView+ADKAutoLayoutSupport.h” 
 [self.presetImageView ADKHideTopConstraint]; [self.presetImageView ADKUnhideTopConstraint]; Using AutoLayout Easier Solve UI elements alignment problem
  28. 28. @import “UIView+AutoLayoutSupport.h” - (void)ADKSetConstraintConstant:(CGFloat)constant forAttribute:(NSLayoutAttribute)attribute; Using AutoLayout Easier Solve UI elements alignment problem
  29. 29. Demo Using UIView+ADKAutoLayoutSupport
  30. 30. Image Filters
  31. 31. Image Color replacement
  32. 32. 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
  33. 33. 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
  34. 34. ADKModalMaskView
  35. 35. UIViewController - (void)presentViewController:(UIViewController *)viewControllerToPresent
 animated:(BOOL)flag completion:(void (^)(void))completion Providing Fancy Modal View Customizing your modal effect
  36. 36. @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
  37. 37. Demo Using ADKModalMaskView & UIImage+ADKImageFilter
  38. 38. Dynamic Height/Width cell
  39. 39. 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
  40. 40. Demo Using ADKCellDynamicSizeCalculator
  41. 41. Change once apply anywhere Interface change
  42. 42. Change once apply anywhere Interface change BEFORE AFTER
  43. 43. 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
  44. 44. 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
  45. 45. Pull to Refresh & Infinite scrolling
  46. 46. 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
  47. 47. Demo Using UIScrollView+ADKPullToRefreshView
  48. 48. The Mystery You Would Like to Know Design Shareable Library with 9 Rules
  49. 49. Bounding User Interface could be EVIL Build Libraries without UI
  50. 50. Made It Smaller and Independent Small modules will be better than a huge feature
  51. 51. Cache Heavy Calculated Result CPU resource is precious
  52. 52. 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; … }
  53. 53. Avoid Using BAD Solution Runtime associated object is expensive
  54. 54. 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; … }
  55. 55. Separate Libraries into small pieces Separating libraries in purpose
  56. 56. Separate Libraries into small pieces Common UI Animation Image List
  57. 57. 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
  58. 58. Document is Important Comments are Documents as well
  59. 59. Document is Important appledoc https://github.com/tomaz/appledoc
  60. 60. Platform Detection Try to detect OS, Device and SDK
  61. 61. Platform Detection if (ADKIsBelowIOS10()) { ... } if (ADKIsLongerScreen()) { ... } if ([UIImage instancesRespondToSelector:@selector(…)]) {…}
  62. 62. Testing is Required Testing is good strategy to save time and life
  63. 63. Testing is Required
  64. 64. Friendly UI Would be Better Using vision data provider
  65. 65. Friendly UI Would be Better IB_DESIGNABLE @interface ADKGradientView : UIView @property (nonatomic, strong) IBInspectable UIColor *beginColor; @property (nonatomic, strong) IBInspectable UIColor *endColor;
  66. 66. Open Source Progress Current progress update
  67. 67. 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
  68. 68. Google Index of AppDevKit
  69. 69. Github REPO
  70. 70. CocoaPods Support
  71. 71. API Documents
  72. 72. Tutorials
  73. 73. One More Thing…
  74. 74. CameraKit
  75. 75. 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
  76. 76. Live Demo Using CameraKit to build customized camera
  77. 77. CameraKit would be released in Nov.
  78. 78. Composition of AppDevKit Common UI Animation Image List Camera
  79. 79. – 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
  80. 80. Q + A

×