Thibault Klein - Architecting for Reusability

At Prolific, we often work with partners who own more than one brand, and want mobile apps for all of them. As engineers, we naturally want to share as much code between each project as possible. Building these projects has given us the chance to tackle some unique architectural challenges.

In this talk, I will go over two different approaches we've taken and give you some insights on the technical decisions we made. Whether you're building for a massive, multi-brand commerce empire or a solo-developer side project, these tips can help you make your codebase more modular and reusable.

Thibault is a Senior iOS Engineer at Prolific Interactive. He's led several large commerce projects, including partnerships with David's Bridal, Lilly Pulitzer and Saks Fifth Avenue.

Recording from the March 2017 Brooklyn Swift Developers Meetup: meetup.com/Brooklyn-Swift-Developers/events/238066139
Video: vimeo.com/211194632
Code: github.com/prolificinteractive/ReusabilityMeetup

Transcript

1. How we approached code sharing at Prolific Interactive Architecting for Reusability Brooklyn Swift Meetup
2. Build eCommerce apps for multiple brands
3. Building separate apps for 2 or more of a company’s consumer brands. What is a multi-brand project?
4. Build and release the first app as soon as possible in a classic architecture. Figure out the plan for the other brands later. Scenario 1 Single Codebase
5. Brand Flag enum Brand { case cocaCola, sprite var current: Brand { #if COCA_BRAND return .cocaCola #elseif SPRITE_BRAND return .sprite #endif } }
6. Factory Pattern Replace class constructors and abstract the process of object generation so that the type of the object instantiated can be determined at run-time.
7. protocol Constants { var contactUsPhoneNumber: String { get } } struct CocaColaConstants: Constants { let contactUsPhoneNumber: String = "123-123-1234" } struct ConstantsFactory { static func makeConstants(forBrand brand: Brand) -> Constants { switch brand { case .cocaCola: return CocaColaConstants() case .sprite: return SpriteConstants() } } } let constants = ConstantsFactory.makeConstants(forBrand: .cocaCola) print(constants.contactUsPhoneNumber) // 123-123-1234
8. protocol Constants { var contactUsPhoneNumber: String { get } } struct CocaColaConstants: Constants { let contactUsPhoneNumber: String = "123-123-1234" } struct ConstantsFactory { static func makeConstants(forBrand brand: Brand) -> Constants { switch brand { case .cocaCola: return CocaColaConstants() case .sprite: return SpriteConstants() } } } let constants = ConstantsFactory.makeConstants(forBrand: .cocaCola) print(constants.contactUsPhoneNumber) // 123-123-1234
9. protocol Constants { var contactUsPhoneNumber: String { get } } struct CocaColaConstants: Constants { let contactUsPhoneNumber: String = "123-123-1234" } struct ConstantsFactory { static func makeConstants(forBrand brand: Brand) -> Constants { switch brand { case .cocaCola: return CocaColaConstants() case .sprite: return SpriteConstants() } } } let constants = ConstantsFactory.makeConstants(forBrand: .cocaCola) print(constants.contactUsPhoneNumber) // 123-123-1234
10. protocol Constants { var contactUsPhoneNumber: String { get } } struct CocaColaConstants: Constants { let contactUsPhoneNumber: String = "123-123-1234" } struct ConstantsFactory { static func makeConstants(forBrand brand: Brand) -> Constants { switch brand { case .cocaCola: return CocaColaConstants() case .sprite: return SpriteConstants() } } } let constants = ConstantsFactory.makeConstants(forBrand: .cocaCola) print(constants.contactUsPhoneNumber) // 123-123-1234
11. protocol Constants { var contactUsPhoneNumber: String { get } } struct CocaColaConstants: Constants { let contactUsPhoneNumber: String = "123-123-1234" } struct ConstantsFactory { static func makeConstants(forBrand brand: Brand) -> Constants { switch brand { case .cocaCola: return CocaColaConstants() case .sprite: return SpriteConstants() } } } let constants = ConstantsFactory.makeConstants(forBrand: .cocaCola) print(constants.contactUsPhoneNumber) // 123-123-1234
12. Theme Share a common theme structure with font and color combinations represented in a grid format of rows and columns.
15. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
16. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
17. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
18. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
19. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
20. // Font protocol FontSize { var xl: CGFloat { get } } protocol FontName { var medium: String { get } } protocol FontTheme { var fontSize: FontSize { get } var fontName: FontName { get } func mediumXL() -> FontAttributes } typealias FontAttributes = [String: Any] extension FontTheme { func mediumXL() -> FontAttributes { return [ NSFontAttributeName: UIFont(name: fontName.medium, size: fontSize.xl)!, NSKernAttributeName: 0.0 as NSObject ] } } // Color protocol ColorTheme { var primaryColor: UIColor { get } }
21. // Grid enum Row { case r1 func font(theme: Theme) -> FontAttributes { switch self { case .r1: return theme.fontTheme.mediumXL() } } } enum Column { case c1 func color(theme: Theme) -> UIColor { switch self { case .c1: return theme.colorTheme.primaryColor } } }
22. // Grid enum Row { case r1 func font(theme: Theme) -> FontAttributes { switch self { case .r1: return theme.fontTheme.mediumXL() } } } enum Column { case c1 func color(theme: Theme) -> UIColor { switch self { case .c1: return theme.colorTheme.primaryColor } } }
23. // Grid enum Row { case r1 func font(theme: Theme) -> FontAttributes { switch self { case .r1: return theme.fontTheme.mediumXL() } } } enum Column { case c1 func color(theme: Theme) -> UIColor { switch self { case .c1: return theme.colorTheme.primaryColor } } }
24. typealias FontAttributes = [String: Any] // Theme protocol Theme { var fontTheme: FontTheme { get } var colorTheme: ColorTheme { get } func style(row: Row, column: Column) -> FontAttributes } extension Theme { func style(row: Row, column: Column) -> FontAttributes { var font = row.font(theme: self) let color = column.color(theme: self) font[NSForegroundColorAttributeName] = color return font } }
25. typealias FontAttributes = [String: Any] // Theme protocol Theme { var fontTheme: FontTheme { get } var colorTheme: ColorTheme { get } func style(row: Row, column: Column) -> FontAttributes } extension Theme { func style(row: Row, column: Column) -> FontAttributes { var font = row.font(theme: self) let color = column.color(theme: self) font[NSForegroundColorAttributeName] = color return font } }
26. typealias FontAttributes = [String: Any] // Theme protocol Theme { var fontTheme: FontTheme { get } var colorTheme: ColorTheme { get } func style(row: Row, column: Column) -> FontAttributes } extension Theme { func style(row: Row, column: Column) -> FontAttributes { var font = row.font(theme: self) let color = column.color(theme: self) font[NSForegroundColorAttributeName] = color return font } }
27. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
28. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
29. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
30. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
31. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
32. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
33. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
34. struct CocaColaFontSize: FontSize { let XL: CGFloat = 18 } struct CocaColaFontName: FontName { let medium: String = "Arial-BoldMT" } struct CocaColaFontTheme: FontTheme { let fontSize: FontSize = CocaColaFontSize() let fontName: FontName = CocaColaFontName() } struct CocaColaColorTheme: ColorTheme { var primaryColor: UIColor = UIColor.red } struct CocaColaTheme: Theme { var fontTheme: FontTheme = CocaColaFontTheme() var colorTheme: ColorTheme = CocaColaColorTheme() } struct TextRendered { static func render(text: String, attributes: FontAttributes) -> NSAttributedString { return NSAttributedString(string: text, attributes: attributes) } } let theme = ThemeFactory.makeTheme(forBrand: .cocaCola) let style = theme.style(row: .r1, column: .c1) let text = "Text to show" label.attributedText = TextRenderer.render(text: text, attributes: style)
35. Reusability • Create protocols to define reusable code • Use factories to abstract object creation • Use a shared language between designers and engineers
36. Extra Tips • Create one localizable strings file per target • Create one assets folder per target • Write tests before refactoring
37. What We Learned • It’s never too late to refactor • The simpler, the better • Perceive the need
38. Build and release the first app with the right architecture to support multiple brands from the get-go. Scenario 2 Multiple Codebases
39. B-VIPER (Builder, View, Interactor, Presenter, Entity, Router) is a popular iOS architecture that divides an app’s logical structure into distinct layers of responsibility. B-VIPER
40. Builders Builders have an essential role in the architecture as they provide a reusable interface to access to a VIPER stack. /// Bag VIPER builder func build() -> UINavigationController? /// Category VIPER builder func build(categoryId categoryId: String) -> UIViewController?
41. B-VIPER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER COCA COLA VIEW SPRITE VIEW …
42. Coca Cola View Sprite View
43. B-VIPER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER PRODUCT DETAIL VIEW PRODUCT ARRAY HOME SCREEN CHECKOUT ACCOUNT VIEW … VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER
44. B-VIPER CHECKOUT SHIPPING BILLING PAYMENT Sub Modules VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER VIEW PRESENTER INTERACTOR ENTITY ENTITY ROUTER BUILDER
45. SDK Build an SDK to be the brain of all your business logic and define the default VIPER stacks. COCA COLA SDK … SPRITE
46. public protocol ProductInteractor { func findProduct(productId: String) func addToBag(selectedSKU: SKU, productCode: String) func availableSizes(product: Product) -> [Size] } SDK Protocol Oriented Programming
47. public protocol ProductDataManagerInterface: DataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) } public extension ProductDataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) { let productURL = productEndpoint.url(productId) NetworkingManager.request(.GET, urlString: productURL, parameters: nil) { [weak self] (result) -> () in self?.handleProductCompletion(result, completion: completion) } } }
48. public protocol ProductDataManagerInterface: DataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) } public extension ProductDataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) { let productURL = productEndpoint.url(productId) NetworkingManager.request(.GET, urlString: productURL, parameters: nil) { [weak self] (result) -> () in self?.handleProductCompletion(result, completion: completion) } } }
49. public protocol ProductDataManagerInterface: DataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) } public extension ProductDataManagerInterface { func product<T: Product>(productId: String, completion: Result<T, Error> -> Void) { let productURL = productEndpoint.url(productId) NetworkingManager.request(.GET, urlString: productURL, parameters: nil) { [weak self] (result) -> () in self?.handleProductCompletion(result, completion: completion) } } }
50. SDK public protocol DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface func productBuilder() -> ProductBuilderInterface func bagBuilder() -> BagBuilderInterface func categoryBuilder() -> CategoryBuilderInterface . . . } internal final class DependencyManager: DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface { return AccountBuilder(dependencyManager: self) } . . . } Dependency Manager
51. SDK public protocol DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface func productBuilder() -> ProductBuilderInterface func bagBuilder() -> BagBuilderInterface func categoryBuilder() -> CategoryBuilderInterface . . . } internal final class DependencyManager: DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface { return AccountBuilder(dependencyManager: self) } . . . } Dependency Manager
52. SDK public protocol DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface func productBuilder() -> ProductBuilderInterface func bagBuilder() -> BagBuilderInterface func categoryBuilder() -> CategoryBuilderInterface . . . } internal final class DependencyManager: DependencyManagerInterface { func accountBuilder() -> AccountBuilderInterface { return AccountBuilder(dependencyManager: self) } . . . } Dependency Manager
53. Reusability • Create builders to have modular code • Code everything under dependency injection • Implement VIPER to reuse code in a flexible way at a layer or stack level
54. What we learned • B-VIPER is a very powerful architecture • Onboarding was not easy • Hard to anticipate the right amount of flexibility required
55. Example
56. Scenario 1 vs scenario 2 • Pros and cons of each scenarios Scenario 1 Single codebase • Simple code • Easy onboarding • Less flexibility for custom features • Every custom code will end up being messy Scenario 2 Multiple codebases • A lot of flexibility and modularity • Granular scalability • Complexity in the architecture • A lot of code updates required at every change
57. What you need to remember • Abstraction through Protocol Oriented Programming • Modularity through Builders • Flexibility with Dependency Injection
58. Thank you. Brooklyn 77 Sands St, 10th Floor Brooklyn, NY 11201 347.462.0990 San Francisco 995 Market St, 14th Floor San Francisco, CA 94103 415.813.4199