Finding Nemo - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

A R C H I T E C T U R E Architecture is both the process and the product of planning, designing, and constructing buildings or any other structures. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilisations are often identified with their surviving architectural achievements. W I K I P E D I A

Slide 3

Slide 3 text

N E M O F I N D I N G @ A N D Y Y H O P E C R A F T C O N F E R E N C E M AY 2 0 1 8

Slide 4

Slide 4 text

I O S H A S A N A R C H I T E C T U R E P R O B L E M ( K I N D A . . . )

Slide 5

Slide 5 text

M V C : M O D E L - V I E W- C O N T R O L L E R 1 9 7 0 S • Traditional architecture for GUI applications • Used in different environments  Java, ASP, C#, PHP, all the classics • Model layer represents data • View is what the user sees • Controller is for View interaction or Model manipulation

Slide 6

Slide 6 text

V I E W M O D E L Owns and User interaction updates C O N T R O L L E R Notification M V C : M O D E L - V I E W- C O N T R O L L E R Owns and updates

Slide 7

Slide 7 text

M V C : M O D E L - V I E W- C O N T R O L L E R T H E G O O D • Simple • Easy to use and understand • Officially supported by Apple frameworks

Slide 8

Slide 8 text

M V C : M O D E L - V I E W- C O N T R O L L E R T H E B A D • Hasn’t aged well • Data isn’t always readily available • Logic has become more complex • View and Controller are bound   by UIKit (UIViewController) • Difficult to write tests for • Suffers from Massive View Controller • Difficulties with scale

Slide 9

Slide 9 text

M O D E L User interaction V I E W C O N T R O L L E R V I E W Notification Owns and M V C : M O D E L - V I E W- C O N T R O L L E R R E A L I T Y updates

Slide 10

Slide 10 text

M V C : M O D E L - V I E W- C O N T R O L L E R S P I N - O F F S • Hierarchical Model-View-Controller • Model-View-Adaptor • Model-View-Presenter • Model-View-ViewModel

Slide 11

Slide 11 text

M V V M : M O D E L - V I E W- V I E W M O D E L 2 0 0 5 • Built for event-driven programming of user interfaces (2005) • Designed by Microsoft • Model represents business logic • View represents what the user sees and interacts with • ViewModel converts the Model for View representation

Slide 12

Slide 12 text

V I E W M O D E L User interaction Owns Notification V I E W M O D E L Owns and updates M V V M : M O D E L - V I E W- V I E W M O D E L and data binding

Slide 13

Slide 13 text

M V V M : M O D E L - V I E W- V I E W M O D E L T H E G O O D • Reactive UI data binding • Increased testability! • First viable contender to MVC (within iOS) • Post-MVC movement on iOS primarily started by Ash Furrow

Slide 14

Slide 14 text

M V V M : M O D E L - V I E W- V I E W M O D E L T H E B A D • Very idealogical • Community has different ideas on implementation • Some felt that the ViewModel shouldn't import UIKit • Some suggested putting network request logic inside the ViewModel • Felt like we were trying to wedge it into iOS

Slide 15

Slide 15 text

V I P E R 2 0 1 2 • Derivative of Uncle Bob’s (Robert C. Martin) Clean architecture (2012) • View presents user interface to user • Interactor performs business logic • Presenter works with Interactor and prepares the data • Entities represents data models • Router provides ability to move between scenes

Slide 16

Slide 16 text

V I E W I N T E R A C T O R E N T I T Y P R E S E N T E R R O U T E R Navigation Updates User interaction lifecycle updates Request data Owns V I P E R

Slide 17

Slide 17 text

V I P E R T H E G O O D • Has a really cool name • Follows great programming practices • Well-defined separation of responsibility • Modular • Testable

Slide 18

Slide 18 text

V I P E R T H E B A D • Presenter is tightly coupled with View • Spaghetti code • Lots of classes • Difficult to onboard engineers

Slide 19

Slide 19 text

G R A P H O F A R C H I T E C T U R E O V E R - S I M P L I F I E D FILES AND COMPLEXITY MVC MVVM VIPER TESTABILITY

Slide 20

Slide 20 text

H O W D O W E D E C I D E O N W H I C H T O A D O P T ?

Slide 21

Slide 21 text

O U R P R O D U C T P U N T E R S • Consumer focused • News articles • Statistical data • Community platform for enthusiasts • 130+ Screens • Reused views • Interactive • Updated via web sockets • Backend For Frontend (BFF) server architecture

Slide 22

Slide 22 text

C H O O S I N G A N A R C H I T E C T U R E R E Q U I R E M E N T S • Testability • Code reusability • Easy to onboard • Modular • Expandable • Compatible • iOS first and foremost • Enforce unidirectional flow • Utilise immutability • Include reactive elements • Embrace Swift’s functionality • Strong guidelines P R I N C I P L E S

Slide 23

Slide 23 text

C O N S U M E P R O S • Plenty of documentation available • Officially sanctioned or community driven • Environment integration • Known limitations and edge cases • Doesn't meet all requirements • Retrofitted design • Layers of abstraction C O N S U S I N G A P R E - E X I S T I N G A R C H I T E C T U R E

Slide 24

Slide 24 text

C O N S T R U C T P R O S • Potentially meet all requirements • Design around an ideology • Plenty of resources to learn from • Ad-hoc solutions • No documentation • Errors can be expensive • Requires a lot of thought and planning • Onboarding other developers C O N S Y O L O

Slide 25

Slide 25 text

W E I G H I N G T H E D E C I S I O N S M V C • Simple but not scaleable • Better but not best M V V M V I P E R • Rich in theory • Poor in practice

Slide 26

Slide 26 text

W E ’ R E G O N N A C O N S T R U C T • We could afford the time to draft and prototype • Foreknowledge of current and future requirements • Understanding of edge cases • Team backed the decision • Hybridise architectures J U S T I F Y I N G O U R D E C I S I O N

Slide 27

Slide 27 text

O U R P R O D U C T ’ S S T R U C T U R E • Our screens were similar to a GitHub repository page • Hierarchical structure for: • Design • Data C O M PA R I N G T O G I T H U B

Slide 28

Slide 28 text

P R O D U C T ’ S S T R U C T U R E U N I V E R S A L F U N C T I O N A L I T Y

Slide 29

Slide 29 text

P R O D U C T ’ S S T R U C T U R E T O P - L E V E L I N F O R M AT I O N A N D A C T I O N S

Slide 30

Slide 30 text

P R O D U C T ’ S S T R U C T U R E S E C T I O N S L I S T

Slide 31

Slide 31 text

P R O D U C T ’ S S T R U C T U R E S E C T I O N C O N T E N T

Slide 32

Slide 32 text

S E G M E N T I N G T H E P R O D U C T S E C T I O N S L I S T • Code • Issues • Pull Requests • Projects • Wiki • Insights

Slide 33

Slide 33 text

G I T H U B R E P O S I T O RY R E P O T I T L E R E P O A C T I O N S & S TAT S

Slide 34

Slide 34 text

C O D E S E C T I O N

Slide 35

Slide 35 text

C O D E H E A D E R

Slide 36

Slide 36 text

C O D E A C T I O N S

Slide 37

Slide 37 text

C O D E T I T L E R O W S

Slide 38

Slide 38 text

C O D E F I L E R O W S

Slide 39

Slide 39 text

C O D E C O N T E N T

Slide 40

Slide 40 text

G I T H U B R E P O S I T O RY R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E C O N T E N T F I L E R O W S C O D E A C T I O N S T I T L E R O W H E A D E R

Slide 41

Slide 41 text

I S S U E S S E C T I O N

Slide 42

Slide 42 text

I S S U E S A C T I O N S

Slide 43

Slide 43 text

I S S U E S T I T L E R O W

Slide 44

Slide 44 text

I S S U E S I T E M R O W S

Slide 45

Slide 45 text

I S S U E S F O O T E R

Slide 46

Slide 46 text

G I T H U B R E P O S I T O RY I S S U E S A C T I O N S T I T L E R O W I T E M R O W S F O O T E R R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E C O N T E N T F I L E R O W S C O D E A C T I O N S T I T L E R O W H E A D E R

Slide 47

Slide 47 text

P U L L R E Q U E S T S S E C T I O N

Slide 48

Slide 48 text

P U L L R E Q U E S T S A C T I O N S

Slide 49

Slide 49 text

P U L L R E Q U E S T S T I T L E R O W

Slide 50

Slide 50 text

P U L L R E Q U E S T S I T E M R O W S

Slide 51

Slide 51 text

P U L L R E Q U E S T S F O O T E R

Slide 52

Slide 52 text

G I T H U B R E P O S I T O RY I S S U E S P U L L R E Q U E S T S A C T I O N S T I T L E R O W I T E M R O W S F O O T E R A C T I O N S T I T L E R O W I T E M R O W S F O O T E R R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E C O N T E N T F I L E R O W S C O D E A C T I O N S T I T L E R O W H E A D E R

Slide 53

Slide 53 text

G I T H U B R E P O S I T O RY I S S U E S P U L L R E Q U E S T S A C T I O N S T I T L E R O W I T E M R O W S F O O T E R A C T I O N S T I T L E R O W I T E M R O W S F O O T E R R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E C O N T E N T F I L E R O W S H E A D E R T I T L E R O W A C T I O N S

Slide 54

Slide 54 text

P U S H I N G D E TA I L V I E W S N AV I G AT I O N

Slide 55

Slide 55 text

G I T H U B R E P O S I T O RY I S S U E S P U L L R E Q U E S T S R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E F I L E / F O L D E R I S S U E P U L L R E Q U E S T

Slide 56

Slide 56 text

G I T H U B R E P O S I T O RY I S S U E S P U L L R E Q U E S T S R E P O T I T L E R E P O A C T I O N S & S TAT S C O D E F I L E / F O L D E R I S S U E P U L L R E Q U E S T

Slide 57

Slide 57 text

I S S U E D E TA I L V I E W

Slide 58

Slide 58 text

I S S U E D E TA I L V I E W T I T L E

Slide 59

Slide 59 text

I S S U E D E TA I L V I E W S U B T I T L E

Slide 60

Slide 60 text

I S S U E D E TA I L V I E W I S S U E S

Slide 61

Slide 61 text

I S S U E D E TA I L V I E W T H R E A D : C O M M E N T S

Slide 62

Slide 62 text

I S S U E D E TA I L V I E W T H R E A D : U P D AT E S

Slide 63

Slide 63 text

I S S U E D E TA I L V I E W C O M M E N T B O X

Slide 64

Slide 64 text

I S S U E S D E TA I L V I E W T H R E A D C O M M E N T S T I T L E   S U B T I T L E U P D AT E S S I D E B A R A S S I G N E E S L A B E L S P R O J E C T S M I L E S T O N E S N O T I F I - C AT I O N S PA RT I C - I PA N T S C O M M E N T B O X

Slide 65

Slide 65 text

P U L L R E Q U E S T D E TA I L V I E W

Slide 66

Slide 66 text

P U L L R E Q U E S T D E TA I L V I E W T I T L E

Slide 67

Slide 67 text

P U L L R E Q U E S T D E TA I L V I E W S U B T I T L E

Slide 68

Slide 68 text

P U L L R E Q U E S T D E TA I L V I E W S I D E B A R

Slide 69

Slide 69 text

P U L L R E Q U E S T D E TA I L V I E W T H R E A D : C O M M E N T S

Slide 70

Slide 70 text

P U L L R E Q U E S T D E TA I L V I E W T H R E A D : U P D AT E S

Slide 71

Slide 71 text

P U L L R E Q U E S T D E TA I L V I E W C H E C K S

Slide 72

Slide 72 text

P U L L R E Q U E S T D E TA I L V I E W C O M M E N T B O X

Slide 73

Slide 73 text

P U L L R E Q U E S T S D E TA I L V I E W T H R E A D C O M M E N T S T I T L E   S U B T I T L E U P D AT E S S I D E B A R A S S I G N E E S L A B E L S P R O J E C T S M I L E - S T O N E S N O T I F I - C AT I O N S PA RT I C - I PA N T S R E V I E W E R S C H E C K S C O M M E N T B O X

Slide 74

Slide 74 text

T H R E A D C O M M E N T S T I T L E   S U B T I T L E U P D AT E S S I D E B A R A S S I G N E E S L A B E L S P R O J E C T S M I L E - S T O N E S N O T I F I - C AT I O N S PA RT I C - I PA N T S R E V I E W- E R S C H E C K S C O M M E N T B O X F O O T E R

Slide 75

Slide 75 text

D O N ’ T R E P E AT Y O U R S E L F W R I T E Y O U R C O D E O N C E

Slide 76

Slide 76 text

P U L L R E Q U E S T D E TA I L E N T I T Y C O M M E N T S I D E B A R N O T I F I C AT I O N S V I E W U P D AT E P U L L R E Q U E S T S TAT U S C O M M E N T B O X I S S U E S D E TA I L E N T I T Y T I T L E S U B T I T L E C O D E D E TA I L E N T I T Y V I E W V I E W V I E W V I E W C O N T R O L L E R S V I E W S

Slide 77

Slide 77 text

W H E R E D O E S T H E C O D E R E S I D E ? L O O K I N G AT F U N C T I O N A L I T Y C A L L - S I T E S

Slide 78

Slide 78 text

I S S U E S D E TA I L E N T I T Y V I E W fetchData() titleText() subtitleText() commentText(forIndex: Int) updateText(forIndex: Int) submitComment(String) subscribeNotifications(id: Int) C O M M E N T S I D E B A R N O T I F I C AT I O N S V I E W U P D AT E P U L L R E Q U E S T S TAT U S C O M M E N T B O X T I T L E S U B T I T L E V I E W C O N T R O L L E R V I E W S

Slide 79

Slide 79 text

Y U C K Y L E T ’ S B R E A K I T U P

Slide 80

Slide 80 text

I S S U E S D E TA I L V I E W V I E W M O D E L fetchData() titleText() subtitleText() commentText(forIndex: Int) updateText(forIndex: Int) submitComment(String) subscribeNotifications(id: Int) C O M M E N T S I D E B A R N O T I F I C AT I O N S V I E W U P D AT E P U L L R E Q U E S T S TAT U S C O M M E N T B O X T I T L E S U B T I T L E V I E W C O N T R O L L E R V I E W S E N T I T Y

Slide 81

Slide 81 text

I N S P I R AT I O N F R O M I O S PAT T E R N S U I TA B L E V I E W D ATA S O U R C E P R O T O C O L

Slide 82

Slide 82 text

C R A S H C O U R S E U I TA B L E V I E W F U N C T I O N A L I T Y

Slide 83

Slide 83 text

I O S TA B L E V I E W S 1 0 1 F LY W E I G H T PAT T E R N • Designed for the original iPhone (2007) • Highly efficient for memory • Reuses cells and views as they scroll off-screen TA B L E V I E W C E L L C E L L S E C T I O N C E L L C E L L C E L L C E L L S E C T I O N S E C T I O N

Slide 84

Slide 84 text

I O S TA B L E V I E W S 1 0 1 numberOfSections(in tableView: UITableView) -> Int tableView(UITableView, numberOfRowsInSection: Int) -> Int tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell tableView(UITableView, viewForHeaderInSection: Int) -> UIView? V I E W C O N T R O L L E R V I E W TA B L E V I E W S E C T I O N C E L L C E L L

Slide 85

Slide 85 text

I S S U E S D E TA I L V I E W D ATA S O U R C E fetchData() submitComment(String) subscribeNotifications(id: Int) C O M M E N T S I D E B A R N O T I F I C AT I O N S V I E W U P D AT E P U L L R E Q U E S T S TAT U S C O M M E N T B O X T I T L E S U B T I T L E V I E W C O N T R O L L E R V I E W S V I E W M O D E L titleText() subtitleText() commentText(forIndex: Int) updateText(forIndex: Int) E N T I T Y

Slide 86

Slide 86 text

W E ’ R E O N T O S O M E T H I N G M O V I N G A S T E P F U RT H E R

Slide 87

Slide 87 text

T I T L E C O N T R O L L E R C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y C O M M E N T B O X C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W V I E W I S S U E S D E TA I L V I E W C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W P R O M O T I O N S

Slide 88

Slide 88 text

View Controller prepate() navigate(to: Destination) Data Source State {.loading, .completed, .failed} fetchData() sectionController(forIndex: Int) -> SectionController cellController(for: IndexPath) -> CellController View Model ViewState {.light, .dark} setStyle(ViewState) View updateStyle(for: ViewState) I S S U E S D E TA I L V I E W C O N T R O L L E R V I E W D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W C O N T R O L L E R F U N C T I O N A L I T Y S E PA R AT I O N S TAT E S TAT E

Slide 89

Slide 89 text

Section Controller init(SectionEntity) prepareBindings(for: UIView) Data Source cellController(forIndex: Int) -> CellController View Model titleText() -> String backgroundColor() -> UIColor View setTitle(String) setBackgroundColor(UIColor) T I M E L I N E S E C T I O N C O N T R O L L E R V I E W D ATA S O U R C E V I E W M O D E L E N T I T Y S E C T I O N C O N T R O L L E R F U N C T I O N A L I T Y S E PA R AT I O N

Slide 90

Slide 90 text

Cell Controller init(CellEntity) prepareBindings(for: UIView) Data Source State {.loading, .completed, .failed} updateFormat(Format, for: Range) submitComment(String) View Model ViewState {.editing, .preview}  setItalics(Bool, for: Range) setBold(Bool, for: Range) switch(to: ViewState) View setBackgroundColor(UIColor) update(to: ViewState) C E L L C O N T R O L L E R F U N C T I O N A L I T Y S E PA R AT I O N C O M M E N T B O X C E L L C O N T R O L L E R V I E W D ATA S O U R C E V I E W M O D E L E N T I T Y S TAT E S TAT E

Slide 91

Slide 91 text

V I E W C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W H I E R A R C H Y S E C T I O N C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W C E L L C O N T R O L L E R D ATA S O U R C E V I E W M O D E L E N T I T Y V I E W

Slide 92

Slide 92 text

V I E W C O N T R O L L E R S E C T I O N C O N T R O L L E R C E L L C O N T R O L L E R S E C T I O N C O N T R O L L E R S E C T I O N C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R C E L L C O N T R O L L E R H I E R A R C H Y

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

R O U T E R V I E W C O N T R O L L E R V I E W C O N T R O L L E R V I E W C O N T R O L L E R R O U T E R C O M PAT I B I L I T Y

Slide 96

Slide 96 text

D I D W E A C H I E V E O U R G O A L ?

Slide 97

Slide 97 text

R E F L E C T I N G O N O U R TA R G E T R E Q U I R E M E N T S • Testability • Code reusability • Easy to onboard • Modular • Expandable • Compatible

Slide 98

Slide 98 text

R E F L E C T I N G O N O U R TA R G E T • iOS first and foremost • Enforce unidirectional flow • Utilise immutability • Include reactive elements • Embrace Swift’s functionality • Strong guidelines P R I N C I P L E S