Reverse Engineering UI For Fun And Profit (CocoaConf DC, April 2015)

Learn how to rip apart UI controls, so that you can rebuild them better, stronger, and faster.

The D.C. edition contains a number of updates from my original talk in Boston (available here: https://speakerdeck.com/designatednerd/reverse-engineering-ui-for-fun-and-profit-cocoaconf-boston-november-2014), along with the other updates I'd made across versions in Atlanta and Chicago.

Useful things that were only in my demos or speaker notes:
- When logging out recursiveDescripton, copy and paste things into TextWrangler documents. Select two documents in the sidebar and then right click to compare them.
- Use the left/right arrow keys to navigate through QuickTime videos: hold the key down to go in slow-mo, tap the key to go frame by frame.
- When looking at a video in QuickTime, Cmd-C to copy the current frame to the clipboard, and then Cmd-N in Preview to open New From Clipboard.
- If you're on Mavericks or below, the two airplay solutions I mentioned are Reflector (http://www.airsquirrels.com/reflector/) and AirServer (http://www.airserver.com/)

Transcript

1. REVERSE ENGINEERING
   USER INTERFACE
   FOR FUN AND PROFIT
   BY ELLEN SHAPIRO
   COCOACONF D.C. APRIL 2015
   @DESIGNATEDNERD | DESIGNATEDNERD.COM | VOKAL.IO | JUSTHUM.COM
   

   View Slide

2. PREFACE: WHO AM I?
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. WHAT DO I MEAN BY
   "REVERSE ENGINEER"?
   

   View Slide

7. WHAT DON'T I MEAN BY
   "REVERSE ENGINEER"?
   

   View Slide

8. WHAT DO I MEAN BY
   "REVERSE ENGINEER"?
   

   View Slide

9. WHY REVERSE
   ENGINEER?
   

   View Slide

10. YOU WANT TO
    USE IT YOURSELF
    

    View Slide

11. YOU WANT A
    BETTER UNDERSTANDING
    OF HOW A GIVEN CONTROL WORKS
    

    View Slide

12. YOU WANT A BETTER
    UNDERSTANDING OF
    HOW IOS UI WORKS
    IN GENERAL.
    

    View Slide

13. WHEN YOU SEE SOMETHING
    AWESOME IN AN APP
    

    View Slide

14. YOU SAY:
    "HEY, THAT LOOKS COOL!"
    

    View Slide

15. YOU MEAN:
    "I'M TOTALLY STEALING THAT."
    

    View Slide

16. THIS TALK IS YOUR GUIDE
    TO MORE EFFICIENT
    AND ACCURATE THIEVERY.
    

    View Slide

17. TWO SITUATIONS
    I'LL BE COVERING:
    

    View Slide

18. APPLE MAKES SOMETHING
    THAT LOOKS COOL
    BUT DOESN'T GIVE YOU THE
    TOOLS TO USE IT YOURSELF.
    

    View Slide

19. ANOTHER DEV MAKES
    SOMETHING COOL
    BUT DOESN'T OPEN-SOURCE IT.
    

    View Slide

20. TOOLS I WILL BE USING
    ▸ Things that are built into OS X Yosemite
    ▸ Free Text Editors
    ▸ My Eyeballs
    ▸ Built-in LLDB and Xcode debugging techniques.
    ▸ Facebook Chisel
    

    View Slide

21. TOOLS I WILL NOT BE USING
    ▸ Jailbreaking
    ▸ Reveal
    ▸ Anything else that costs you money.
    

    View Slide

22. CASE STUDY #1:
    DNSSWIPEABLETABLECELL
    

    View Slide

23. APPLE MADE SOMETHING AWESOME,
    AND I WANT TO USE IT.
    

    View Slide

24. BUT APPLE'S SDK SAID
    TOO BAD SO SAD
    

    View Slide

25. APPLE INTRODUCED
    SWIPE-UNDER ACTIONS
    IN IOS 7.
    

    View Slide

26. AS A THIRD PARTY DEVELOPER,
    YOU COULD EASILY USE SWIPE TO DELETE .
    

    View Slide

27. iOS 7...
    !
    

    View Slide

28. iOS 8...
    !
    

    View Slide

29. STEP 1:
    STARE AT YOUR PHONE
    

    View Slide

30. WHAT LOOKS LIKE THE VIEW HIERARCHY?
    

    View Slide

31. IS THIS GESTURE A SWIPE OR A PAN?
    

    View Slide

32. WHAT HAPPENS WHEN YOU CHANGE THE
    SPEED OF YOUR GESTURE?
    

    View Slide

33. STEP 2: POKE AT
    THE VIEW HIERARCHY
    FROM INSIDE AN APP
    

    View Slide

34. CREATE A SAMPLE PROJECT USING THE
    APPLE CONTROL YOU WANT TO USE.
    

    View Slide

35. USE LOGGING AND TOOLS TO INSPECT THE
    VIEW HIERARCHY.
    

    View Slide

36. 2A: BUILT-IN TOOLS
    po [view recursiveDescription]
    Xcode's View Hierarchy debugger
    

    View Slide

37. [DEMO: XCODE FUNTIMES]
    

    View Slide

38. 2B: FACEBOOK CHISEL
    Make things happen when you're paused at a breakpoint
    without rerunning
    

    View Slide

39. [DEMO: CHISEL IN ACTION]
    

    View Slide

40. !: CHISEL IS FINICKY IN
    SWIFT
    

    View Slide

41. STEP 3: START
    BUILDING
    

    View Slide

42. [DEMO: DNS SWIPEABLE TABLE CELL]
    

    View Slide

43. SOMEONE ELSE MADE AN AWESOME THING
    AND I WANT TO USE IT.
    

    View Slide

44. DID THEY OPEN SOURCE IT?
    NOPE.
    

    View Slide

45. CASE STUDY #2:
    DNSCASTROSEGMENTEDCONTROL
    

    View Slide

46. WHAT AM I
    STEALING
    REVERSE ENGINEERING?
    

    View Slide

47. View Slide

48. View Slide

49. ONE MINOR PROBLEM:
    NON-STOCK CONTROLS CAN'T
    BE EXAMINED INTERNALLY
    WITHOUT JAILBREAKING.
    

    View Slide

50. ONE MINOR PROBLEM:
    NON-STOCK CONTROLS CAN'T
    BE EXAMINED INTERNALLY
    WITHOUT JAILBREAKING.
    

    View Slide

51. YOU HAVE TO GET
    A BIT MORE CREATIVE
    TO FIGURE OUT HOW THINGS WORK.
    

    View Slide

52. BLAME CREDIT THIS GUY
    

    View Slide

53. View Slide

54. STEP 1: RECORD SOME VIDEO
    FROM YOUR DEVICE
    

    View Slide

55. MAVERICKS AND BELOW: IT'LL COST YA
    Use Reflector ($12.99) or AirServer (14.99) to AirPlay to your Mac
    

    View Slide

56. YOSEMITE: FREE
    Record directly from your device with QuickTime
    

    View Slide

57. [DEMO: RECORDING VIDEO WITH QUICKTIME]
    

    View Slide

58. STEP 2: OPEN THAT VIDEO WITH QUICKTIME
    When you hit the info button, you'll get some useful...information!
    

    View Slide

59. [DEMO: QUICKTIME SCRUBBING]
    

    View Slide

60. SIDEBAR: EASING
    

    View Slide

61. UNDERSTANDING EASING MAKES
    GETTING THE DETAILS OF A CONTROL RIGHT
    A LOT SIMPLER.
    

    View Slide

62. EASING IS ABOUT
    THE CURVE OF THE ANIMATION
    

    View Slide

63. [DEMO: EASE IN, EASE OUT]
    

    View Slide

64. STEP 3: OPEN INDIVIDUAL
    FRAMES IN PREVIEW
    

    View Slide

65. MEASURE IMAGES
    PIXEL BY PIXEL
    

    View Slide

66. ZOOM
    WAAAAAAAY
    IN ON YOUR IMAGES
    

    View Slide

67. [DEMO: PREVIEW MEASURING]
    

    View Slide

68. STEP 4: START
    BUILDING AGAIN!
    

    View Slide

69. [DEMO: DNS CASTRO SEGMENTED CONTROL]
    

    View Slide

70. PUTTING IT TOGETHER:
    TIPS FOR BUILDING
    

    View Slide

71. BUILD YOUR SAMPLE PROJECT
    IN ISOLATION.
    

    View Slide

72. KEEP THE FILES FOR THE CONTROL
    ITSELF IN A SINGLE FOLDER.
    

    View Slide

73. KEEP DISPLAY LOGIC
    INDEPENDENT
    

    View Slide

74. TEST TEST TEST TEST TEST
    TEST TEST TEST TEST TEST
    (DID I MENTION TEST?)
    

    View Slide

75. COMPARE THE FEEL
    OF YOUR SAMPLE APP
    TO THE ORIGINAL APP
    

    View Slide

76. NEXT STEPS: MAKE IT
    SHAREABLE
    

    View Slide

77. Create a repo for your sample code.
    

    View Slide

78. Make a CocoaPod!
    

    View Slide

79. Submit it to CocoaControls
    

    View Slide

80. OFFICIAL SUMMARY SLIDE™
    ▸ Start your view hierarchy debugging with built-in tools
    ▸ Use Facebook Chisel to make that even faster
    ▸ Use video and images to examine 3rd party controls
    ▸ Rebuild the control in isolation
    

    View Slide

81. QUESTIONS?
    

    View Slide

82. STUFF I MENTIONED!
    ▸ https://github.com/facebook/chisel
    ▸ http://www.barebones.com/products/textwrangler
    ▸ http://guides.cocoapods.org/making/making-a-cocoapod.html
    ▸ http://castro.fm/
    ▸ http://petersteinberger.com/blog/2013/how-to-inspect-the-view-
    hierarchy-of-3rd-party-apps/
    

    View Slide

83. TEH CODEZ!
    ▸ https://github.com/designatednerd/DNSSwipeableTableCell
    ▸ https://github.com/designatednerd/DNSCastroSegmentedControl
    (both of the above also available via CocoaPods)
    ▸ https://github.com/designatednerd/EasingExample
    

    View Slide

84. PLUGS!
    ▸ http://justhum.com
    ▸ http://www.mobilemakers.co/
    ▸ http://vokalinteractive.com/
    

    View Slide