Slide for my presentation in "Designers meet Developers Mashup Meetup #6 (May 2017)" (https://www.meetup.com/apps_jakarta/events/238917160/?comment_table_id=252339089&comment_table_name=reply)

1. SMOOTH SCROLLING FOR
UITABLEVIEW IN IOS
DESIGNERS MEET DEVELOPERS
MASHUP MEETUP #6 (MAY 2017)

2. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
WHO AM I?
▸ Ricardo Pramana Suranta (Edo)
▸ Software Engineer at Ice House Corp.
▸ iOS Developer for 3.5 years, Mobile for ~4 years
▸ Twitter / GitHub: edopelawi

3. WHAT MAKES A
GREAT UX?

4. UTILITY
DESIRABILITY
USABILITY

5. UTILITY
DESIRABILITY
USABILITY
(design + app performance)

6. PERFORMANCE
MATTERS.

7. IOS HAS
LONGER DEVICE
SUPPORT TIME

10. UITABLEVIEW

11. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
WHEN TO USE
▸ Repetitive elements
▸ Rich pages

12. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
REPETITIVE ELEMENTS

13. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
RICH PAGES

14. UITABLEVIEW
(SC)ROLL
(pls don’t hate me)

15. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
HOW TO (SC)ROLL SMOOTHLY
▸ Thread usage
▸ Rendering
▸ Cell creation
▸ Height Calculation

16. SOCIAL
MEDIA

17. THREAD USAGE

18. UI RENDERING
(MOST) APP LOGIC
Main Thread
OTHERS
“Default” Thread
OTHERS
Background, etc.

19. UI RENDERING
(MOST) APP LOGIC
Main Thread
OTHERS
“Default” Thread
OTHERS
Background, etc.
FASTER CODE
ONLY
API REQUEST,
DB FETCH
ANYTHING
ELSE

20. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
NON-BLOCKING OPTIONS
▸ DispatchQueue.qos(.userInitiated).async
▸ URLSessionDataTask
▸ Libraries (e.g. AlamofireImage, SDWebImage)

21. RENDERING

22. RED = HEAVY!

23. OPAQUE
BACKGROUND
COLORS 👌

24. CELL CREATION

26. NOT ALL CREATED
CELLS ENDED UP
DISPLAYED!

27. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
HOW TO CREATE AND BIND CELL
▸ Create on tableView(_:cellForRowAt:)
▸ Bind the data on tableView(_:willDisplay:forRowAt:)
▸ Add 0.2 - 0.5 seconds data validation in UITableViewCell
▸ Bind data in Main thread

28. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
UH OH.

29. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
UH OH. (WHY?)
▸ UITableViewAutomaticDimension
▸ AutoLayout
▸ Data binding on tableView(_:cellForRowAt:)

30. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
UH OH. (SOLUTION!)
▸ Count manually!
▸ Fast operations: addition, reduction, multiplication,
division
▸ Use UIFont, String, and known width to count multiline
label height

31. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
UH OH. (SOLUTION!)

32. EXTRA: EMPTY
STATE

33. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
FAKE RESPONSE SPEED.

34. CONCLUSION

35. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
HOW TO (SC)ROLL SMOOTHLY (CONCLUSION)
▸ Thread usage
▸ Use fast operations in Main thread
▸ Rendering
▸ Prevent color-blended layers
▸ Use similar background colors

36. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
HOW TO (SC)ROLL SMOOTHLY (CONCLUSION)
▸ Cell creation
▸ Bind in tableView(_:willDisplay:forRowAt:)
▸ Add delay to prevent unnecessary binding
▸ Height Calculation
▸ Don’t use UITableViewAutomaticDimension
▸ Empty state

37. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
FURTHER OPTIMIZATION
▸ Non-Auto Layout UI (CGFrame, CGRect, and old-school
stuffs)
▸ Rendering in CPU (drawRect:, low level stuffs)

38. QUESTIONS?

39. SMOOTH SCROLLING FOR UITABLEVIEW IN IOS
FURTHER READING
▸ Sample code repo: https://github.com/edopelawi/
SmoothTableScrollingSample-iOS
▸ https://medium.com/ios-os-x-development/perfect-
smooth-scrolling-in-uitableviews-fd609d5275a5
▸ http://stackoverflow.com/questions/6731545/when-does-
a-view-or-layer-require-offscreen-rendering

40. WE ARE HIRING!
https://www.icehousecorp.com/careers/

41. THANK YOU!