Using View Models for simpler UI

Slide 1

Slide 1 text

@daloog #iosdevuk Component Driven …and modular UI code with ViewModel Alexey Demedetskyi

Slide 2

Slide 2 text

@daloog #iosdevuk https://www.youtube.com/watch?v=dJUEkjxylBw

Slide 3

Slide 3 text

@daloog #iosdevuk Alexey Demedetskyi [email protected] Github Speakerdeck iOS Team lead @ Sigma Software

Slide 4

Slide 4 text

@daloog #iosdevuk MVVM: 2012 - 2015 MVC: 2009 - 2011 Redux: 2015 - …

Slide 5

Slide 5 text

@daloog #iosdevuk MVVM

Slide 6

Slide 6 text

@daloog #iosdevuk How to MVVM 1. Extract ViewModel from ViewController 2. ??? 3. Good design https://sharpﬁvesoftware.com/2016/07/20/mvvm-is-lipstick-on-a-pig/

Slide 7

Slide 7 text

@daloog #iosdevuk

Slide 8

Slide 8 text

@daloog #iosdevuk View Models

Slide 9

Slide 9 text

@daloog #iosdevuk “Design is never done.”

Slide 10

Slide 10 text

@daloog #iosdevuk

Slide 11

Slide 11 text

@daloog #iosdevuk Art

Slide 12

Slide 12 text

@daloog #iosdevuk Art Engineering

Slide 13

Slide 13 text

@daloog #iosdevuk

Slide 14

Slide 14 text

@daloog #iosdevuk Feedback loop

Slide 15

Slide 15 text

@daloog #iosdevuk Deﬁnition of done

Slide 16

Slide 16 text

@daloog #iosdevuk Better tools

Slide 17

Slide 17 text

@daloog #iosdevuk Better result

Slide 18

Slide 18 text

@daloog #iosdevuk Art Engineering UI - ?

Slide 19

Slide 19 text

@daloog #iosdevuk Art Engineering UI

Slide 20

Slide 20 text

@daloog #iosdevuk UI is the hardest CS problem

Slide 21

Slide 21 text

@daloog #iosdevuk

Slide 22

Slide 22 text

@daloog #iosdevuk

Slide 23

Slide 23 text

@daloog #iosdevuk

Slide 24

Slide 24 text

@daloog #iosdevuk

Slide 25

Slide 25 text

@daloog #iosdevuk

Slide 26

Slide 26 text

@daloog #iosdevuk

Slide 27

Slide 27 text

@daloog #iosdevuk Zero* dependency** rule*** * - not actually zero ** - internal is ok *** - not a rule at all

Slide 28

Slide 28 text

@daloog #iosdevuk TDD?

Slide 29

Slide 29 text

@daloog #iosdevuk

Slide 30

Slide 30 text

@daloog #iosdevuk Singletons

Slide 31

Slide 31 text

@daloog #iosdevuk Dependency net ViewController Network Database DataModel Application

Slide 32

Slide 32 text

@daloog #iosdevuk Dependency tree ViewController Network Database DataModel Application View

Slide 33

Slide 33 text

@daloog #iosdevuk Parent is always responsible for child dependencies

Slide 34

Slide 34 text

@daloog #iosdevuk Module External dependency

Slide 35

Slide 35 text

@daloog #iosdevuk Module Internal dependency

Slide 36

Slide 36 text

@daloog #iosdevuk Module context always should be external

Slide 37

Slide 37 text

@daloog #iosdevuk Zero dependency UI?

Slide 38

Slide 38 text

@daloog #iosdevuk Component UI

Slide 39

Slide 39 text

@daloog #iosdevuk

Slide 40

Slide 40 text

@daloog #iosdevuk

Slide 41

Slide 41 text

@daloog #iosdevuk

Slide 42

Slide 42 text

@daloog #iosdevuk Action

Slide 43

Slide 43 text

@daloog #iosdevuk https://medium.com/swift-fox/react-native-native-28e37f7de1ae#.x3l8sip38 Native React Native

Slide 44

Slide 44 text

@daloog #iosdevuk VM == Props

Slide 45

Slide 45 text

@daloog #iosdevuk MVVM

Slide 46

Slide 46 text

@daloog #iosdevuk React

Slide 47

Slide 47 text

@daloog #iosdevuk VM + Dynamic Animations, partial updates, etc.

Slide 48

Slide 48 text

@daloog #iosdevuk Deposit Time

Slide 49

Slide 49 text

@daloog #iosdevuk Deposit Time

Slide 50

Slide 50 text

@daloog #iosdevuk Deposit Time + + - - -

Slide 51

Slide 51 text

@daloog #iosdevuk State = f(t)

Slide 52

Slide 52 text

@daloog #iosdevuk Event = ΔState

Slide 53

Slide 53 text

@daloog #iosdevuk State = ∫Event

Slide 54

Slide 54 text

@daloog #iosdevuk

Slide 55

Slide 55 text

@daloog #iosdevuk CQRS Event sourcing

Slide 56

Slide 56 text

@daloog #iosdevuk

Slide 57

Slide 57 text

@daloog #iosdevuk Data driven

Slide 58

Slide 58 text

@daloog #iosdevuk Data driven

Slide 59

Slide 59 text

@daloog #iosdevuk VM + Complexity Containers, transition

Slide 60

Slide 60 text

@daloog #iosdevuk https://medium.com/@dan_abramov/smart-and- dumb-components-7ca2f9a7c7d0#.62d4jggzw