Responsive UI for iOS Apps

Slide 1

Slide 1 text

Responsive UI Vitalii Topoliuk

Slide 2

Slide 2 text

Application Core Animation Render server Core Animation GPU Display

Slide 3

Slide 3 text

Application Core Animation Render server Core Animation GPU Display 16.67 ms

Slide 4

Slide 4 text

Application Core Animation Render server Core Animation GPU Display Handle events 16.67 ms

Slide 5

Slide 5 text

Application Core Animation Render server Core Animation GPU Display Commit Transaction 16.67 ms

Slide 6

Slide 6 text

Application Core Animation Render server Core Animation GPU Display Decode 16.67 ms

Slide 7

Slide 7 text

Application Core Animation Render server Core Animation GPU Display Draw Calls 16.67 ms

Slide 8

Slide 8 text

Application Core Animation Render server Core Animation GPU Display Render 16.67 ms

Slide 9

Slide 9 text

Application Core Animation Render server Core Animation GPU Display Display 16.67 ms

Slide 10

Slide 10 text

Application Core Animation Render server Core Animation GPU Display 16.67 ms

Slide 11

Slide 11 text

CPU bound vs GPU bound

Slide 12

Slide 12 text

CPU bound vs GPU bound • Creating views • Layout views • CGContext drawing • Image decoding

Slide 13

Slide 13 text

CPU bound vs GPU bound • Creating views • Layout views • CGContext drawing • Image decoding • Offscreen rendering • Count of views/layers • Shapes/Shadow/Effects

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

• Buttons ! !

Slide 16

Slide 16 text

• Buttons • Text !

Slide 17

Slide 17 text

• Buttons • Text • Images

Slide 18

Slide 18 text

• Buttons • Text • Images • Container Views

Slide 19

Slide 19 text

Collecting data

Slide 20

Slide 20 text

• Drops over 50ms f.e. Collecting data

Slide 21

Slide 21 text

• Drops over 50ms f.e. • Usually when new cell appears Collecting data

Slide 22

Slide 22 text

• Drops over 50ms f.e. • Usually when new cell appears • Can be easily tracked with CADisplayLink Collecting data

Slide 23

Slide 23 text

Proﬁling with instruments

Slide 24

Slide 24 text

event = 550; syscall(SYS_kdebug_trace, APPSDBG_CODE(DBG_MACH_CHUD, event) | DBG_FUNC_NONE, arg1, arg2, arg3, arg4); Proﬁling with instruments

Slide 25

Slide 25 text

Proﬁling with instruments

Slide 26

Slide 26 text

Proﬁling with instruments

Slide 27

Slide 27 text

Proﬁling with instruments

Slide 28

Slide 28 text

Tips & Tricks

Slide 29

Slide 29 text

Tips & Tricks • Preloading next rows • Simple views/layers hierarchy (backboardd!!!) • view.hidden vs add/removeFromSuperview: • Using CALayer instead of UIView • Image decoding in background • Caching layers (only x2.5 screen sizes!)

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Tips & Tricks

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images where possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering

Slide 37

Slide 37 text

Tips & Tricks

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Tips & Tricks

Slide 41

Slide 41 text

Tips & Tricks • Don’t use UILabel with NSAttributedString • All size calculations in background • Sometimes UIButton is very expensive • Use stretchable images when possible • Use 4 separated stretchable images for outlines • Avoid offscreen rendering

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Tips & Tricks

Slide 44

Slide 44 text

Tips & Tricks

Slide 45

Slide 45 text

Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];

Slide 46

Slide 46 text

Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];

Slide 47

Slide 47 text

Tips & Tricks UIImage* image = [shadowImage resizableImageWithCapInsets:10];

Slide 48

Slide 48 text

Tips & Tricks

Slide 49

Slide 49 text

Tips & Tricks

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Tips & Tricks • Avoid offscreen rendering • Cropping layers by mask, shadows • Each GC switch takes 0.2ms • 3 CG switches for rounded corners = 0.6ms • For 10 rows = 6ms

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Tips & Tricks

Slide 54

Slide 54 text

Tips & Tricks

Slide 55

Slide 55 text

Tips & Tricks • Flatting view hierarchy in background • Simpliﬁed view hierarchy => low backboardd • Doesn’t block main thread • Only for static parts of cell

Slide 56

Slide 56 text

Tips & Tricks • Use QoS from iOS 8 • Or implement your own • LOW, HIGH, and DEFAULT queues are almost the same (priorities 28, 30, 32) • Main thread has priority about 40-45 • backboardd priority is about 50