Unidirectional Data Flow in Swift

Slide 1

Slide 1 text

BENJAMIN ENCZ @BENJAMINENCZ 1 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 2

Slide 2 text

UNIDIRECTIONAL DATA FLOW IN SWIFT & THE END OF MODEL-VIEW-CONTROLLER 2 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 3

Slide 3 text

1979 3 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 4

Slide 4 text

DOES ANYONE EVEN UNDERSTAND MVC? 4 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 5

Slide 5 text

5 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 6

Slide 6 text

6 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 7

Slide 7 text

2016 7 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 8

Slide 8 text

MVC IS NOT A HOLISTIC APPLICATION ARCHITECTURE 8 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 9

Slide 9 text

PROBLEM #1: VIEW CONTROLLERS ARE MICROMANAGERS IMAGE CREDITS: NAKEDPASTOR.COM 9 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 10

Slide 10 text

func userLoggedInWithUsername(username: String, password: String) { apiClient.authenticateUser(username, password: password) { response, error in if (error == nil) { let nextViewController = ... navigationController.pushViewController(nextViewController) } else { showErrorMessage(error) } } } 10 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 11

Slide 11 text

PROBLEM #2: WHERE IS STATE? 11 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 12

Slide 12 text

WHERE IS STATE? > Currently Active Views > Currently Active View Controllers > Database > Singletons? 12 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 13

Slide 13 text

HOW DO I PASS INFORMATION BETWEEN VIEW CONTROLLERS? 13 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 14

Slide 14 text

14 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 15

Slide 15 text

PROBLEMS I HAVE WITH MVC > View Controllers need to know business logic details 15 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 16

Slide 16 text

PROBLEMS I HAVE WITH MVC > View Controllers need to know business logic details > View Controllers need to manage significant amount of state (almost anything that is not stored in the DB) 16 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 17

Slide 17 text

PROBLEMS I HAVE WITH MVC > View Controllers need to know business logic details > View Controllers need to manage significant amount of state (almost anything that is not stored in the DB) > State management & propagation happens ad-hoc 17 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 18

Slide 18 text

PROBLEMS I HAVE WITH MVC > View Controllers need to know business logic details > View Controllers need to manage significant amount of state (almost anything that is not stored in the DB) > State management & propagation happens ad-hoc > Very difficult to build a mental model of how an application works 18 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 19

Slide 19 text

MEET REDUX! 19 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 20

Slide 20 text

20 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 21

Slide 21 text

21 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 22

Slide 22 text

REDUCERS: (STATE, ACTION) -> STATE 22 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 23

Slide 23 text

ACTIONS: DECLARATIVE DESCRIPTION OF A STATE CHANGE 23 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 24

Slide 24 text

SWIFT FLOW UNFINISHED OPEN SOURCE REDUX IMPLEMENTATION IN SWIFT 24 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 25

Slide 25 text

25 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 26

Slide 26 text

struct AppState: StateType, HasNavigationState { var counter: Int = 0 var navigationState = NavigationState() } 26 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 27

Slide 27 text

func newState(state: AppState) { counterLabel.text = "\(state.counter)" } @IBAction func increaseButtonTapped(sender: UIButton) { mainStore.dispatch( Action(CounterActionIncrease) ) } @IBAction func decreaseButtonTapped(sender: UIButton) { mainStore.dispatch( Action(CounterActionDecrease) ) } 27 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 28

Slide 28 text

struct CounterReducer: Reducer { func handleAction(state: AppState, action: Action) -> AppState { var state = state switch action.type { case CounterActionIncrease: state.counter += 1 case CounterActionDecrease: state.counter -= 1 default: break } return state } } 28 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 29

Slide 29 text

TIME TRAVEL! 29 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 30

Slide 30 text

DEMO 30 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 31

Slide 31 text

REAL WORLD EXAMPLES? 31 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 32

Slide 32 text

ENTIRE APP STATE IN ONE DATA STRUCTURE? 32 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 33

Slide 33 text

33 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 34

Slide 34 text

WHAT ABOUT ASYNC? 34 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 35

Slide 35 text

func fetchUserList -> ActionCreator { return { state, store in self.apiClient.fetchUsers() { users in store.dispatch( SetUsers(users) ) } } } 35 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 36

Slide 36 text

36 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 37

Slide 37 text

CHALLENGES > UIKit > Encoding / Decoding > Restricing Access to Global State 37 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 38

Slide 38 text

WHY SWIFT FLOW? > Separation of concerns 38 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 39

Slide 39 text

WHY SWIFT FLOW? > Separation of concerns > Decoupling of intent and implementation 39 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 40

Slide 40 text

WHY SWIFT FLOW? > Separation of concerns > Decoupling of intent and implementation > Clear, Declarative API 40 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 41

Slide 41 text

WHY SWIFT FLOW? > Separation of concerns > Decoupling of intent and implementation > Clear, Declarative API > Predictable, explicit state 41 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 42

Slide 42 text

WHY SWIFT FLOW? > Separation of concerns > Decoupling of intent and implementation > Clear, Declarative API > Predictable, explicit state > Program has a shape 42 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 43

Slide 43 text

WHY SWIFT FLOW? > Separation of concerns > Decoupling of intent and implementation > Clear, Declarative API > Predictable, explicit state > Program has a shape > Automatic state propagation 43 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 44

Slide 44 text

CREDITS > Gerald Monaco (@devknoll) for introducing me to Redux > Dan Abramov (@dan_abramov) for building Redux > Jake Craige (@jakecraige) for feedback and support during implementation 44 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015

Slide 45

Slide 45 text

SPEAKERDECK.COM/BENJAMIN_ENCZ GITHUB.COM/SWIFT-FLOW @BENJAMINENCZ 45 — Unidirectional Data Flow in Swift | @benjaminencz | SLUG @ Realm, December 2015