This document discusses a flexible layout kit for delivering dynamic content and layouts without using webviews in native mobile apps. It provides an overview of the problem, an implementation using protocols and classes for elements, models, controllers and builders, and a demo. It also covers learnings around nested collection view size calculation, performance, and next steps for open sourcing and adding a content editor.

1. D Y N A M I C CONTENT DELIVERY
WITH NO WEBVIEWS!
FLEXIBLE
LAYOUT KIT
1 6 - 0 4 -2 0 1 6
ZEYAD SALLOUM

2. 2
The Problem
Flexible Layout Kit
Implementation
Demo
Learnings
TA B LE OF
C O N T E N T S

3. 3
C O N T E N T I S K I N G

4. 4
WEBSITES

5. 5
A P P S

6. 6
Slow
No Multi touch
Fluid Animations are much harder
Overall User Experience
WEBVIEWS

7. 7
100% Native UI Elements
Dynamic Content + Dynamic Layout
FLEXIBLE LAYOUT KIT

8. 8
FLEXIBLE LAYOUT KIT
LAYOUT
ENGINE
J S O N
TEMPLATES
N AT I V E U S E R
INTERFACE
C M S

9. 9
SIMPLE ELEM EN TS
TEXT IMAGE VIDE O
IMAGE SETBUTTON

10. 1 0
A D VA N C E D E L E M E N T S
TEASER PROD UC T C ATA L O G

11. 11
H E R O PA G E

12. 1 2
LOOKBOOK

13. 1 3 Insert footnote
GALLERY

14. 1 4
VERTICAL L IST

15. 1 5
ELEMENT STRU C TU R E
ELEM ENT
S TR UCT
B UIL DE R
V IE WCONT R O LL ER
ST ORY BO ARD

16. 1 6
Containable
Container
Actionable
Element Model
Element Controller
Element Builder
PROTOCOL S

17. 1 7
protocol Containable {
weak var containerDelegate: Container? { get set }
func prepareForReuse(model: ElementModel?)
func contentSize(parentWidth: CGFloat, parentHeight: CGFloat, parentLayout: ParentLayout) -> CGSize
func invalidateSize()
}
PROTOCOL S
protocol Container: class {
func updateElementLayout(element: Containable)
}
protocol Actionable {
func sendAction(from from: AnyObject, to: AnyObject?, event: UIEvent)
}

18. 1 8
PROTOCOL S
protocol ElementModel {
var subelements: [ElementModel] { get set }
var identifier: String? { get set }
var uuid: String { get }
var genericIdentifier: String { get }
}
protocol ElementController: Actionable {
static func createController(model model: ElementModel?) -> UIViewController
var model: ElementModel? { get set }
var scrollingEnabled: Bool { get }
}

19. 1 9
PROTOCOL S
protocol ElementBuilder {
var element: RawElement { get }
var hasValidElement: Bool { get }
var requiredAttributeKeys: [String] { get }
var requiredSubelementIdentifiers: [String] { get }
init(element: RawElement)
func buildElement() -> ElementModel?
}

20. 2 0
Main integration point
Subclass and supply with JSON
FLEXIBLE VIEW CONTROLLER

21. 2 1
D E M O

22. 2 2 Insert footnote
LEARNINGS

23. 2 3
N E S T E D C O L L E C T I O N V I E W S I Z E C A L C U L AT I O N

24. 2 4
Memory footprint
Scrolling
Insert footnote
PERFORMAN CE

25. 2 5
Open Source
Content Editor
N E X T S T E P S

26. ZEYAD SALLOUM
Fashion Store Mobile
iOS Developer
zeyad.salloum@zalando.com
+49 17622266905
QUESTIONS?