Reverse Engineering UI For Fun And Profit (CocoaHeads Chicago, March 2015)

Reverse Engineering UI For Fun And Profit (CocoaHeads Chicago, March 2015)

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

This edition contains a few minor updates in here from my talk in Boston (available here: https://speakerdeck.com/designatednerd/reverse-engineering-ui-for-fun-and-profit-cocoaconf-boston-november-2014) including better links at the end, and mostly just cosmetic updates from the version of this talk I gave in Atlanta (https://speakerdeck.com/designatednerd/reverse-engineering-ui-for-fun-and-profit-cocoaconf-atlanta-december-2014)

Updated 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/)

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

March 10, 2015
Tweet

Transcript

  1. REVERSE ENGINEERING USER INTERFACE FOR FUN AND PROFIT BY ELLEN

    SHAPIRO COCOAHEADS CHICAGO SMARCH 2015 @DESIGNATEDNERD | DESIGNATEDNERD.COM | VOKAL.IO | JUSTHUM.COM
  2. PREFACE: WHO AM I?

  3. None
  4. None
  5. None
  6. WHY REVERSE ENGINEER?

  7. YOU WANT A BETTER UNDERSTANDING OF HOW A CONTROL WORKS

  8. YOU WANT TO USE IT YOURSELF

  9. YOU WANT A BETTER UNDERSTANDING OF HOW IOS UI WORKS

    IN GENERAL.
  10. WHEN YOU SEE SOMETHING AWESOME IN AN APP

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

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

  13. THIS TALK IS YOUR GUIDE TO MORE EFFICIENT AND ACCURATE

    THIEVERY.
  14. TWO SITUATIONS I'LL BE COVERING:

  15. APPLE MAKES SOMETHING THAT LOOKS COOL BUT DOESN'T GIVE YOU

    THE TOOLS TO USE IT YOURSELF.
  16. ANOTHER DEV MAKES SOMETHING COOL BUT DOESN'T OPEN-SOURCE IT.

  17. 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
  18. TOOLS I WILL NOT BE USING ▸ Jailbreaking ▸ Reveal

    ▸ Anything else that costs you money.
  19. CASE STUDY #1: DNSSWIPEABLETABLECELL

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

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

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

  23. AS A THIRD PARTY DEVELOPER, YOU COULD EASILY USE SWIPE

    TO DELETE .
  24. iOS 7... !

  25. iOS 8... !

  26. STEP 1: STARE AT YOUR PHONE

  27. WHAT LOOKS LIKE THE VIEW HIERARCHY?

  28. IS THIS GESTURE A SWIPE OR A PAN?

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

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

    APP
  31. CREATE A SAMPLE PROJECT USING THE APPLE CONTROL YOU WANT

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

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

  34. [DEMO: XCODE FUNTIMES]

  35. 2B: FACEBOOK CHISEL Make things happen when you're paused at

    a breakpoint without rerunning
  36. [DEMO: CHISEL IN ACTION]

  37. !: CHISEL ONLY WORKS IN OBJ-C CODE (FOR NOW).

  38. STEP 3: START BUILDING

  39. [DEMO: DNS SWIPEABLE TABLE CELL]

  40. [WE'LL COME BACK TO BUILDING IN A BIT]

  41. CASE STUDY #2: DNSCASTROSEGMENTEDCONTROL

  42. SOMEONE ELSE MADE AN AWESOME THING AND I WANT TO

    USE IT.
  43. DID THEY OPEN SOURCE IT? NOPE.

  44. WHAT AM I STEALING REVERSE ENGINEERING?

  45. None
  46. None
  47. ONE MINOR PROBLEM: NON-STOCK CONTROLS CAN'T BE EXAMINED INTERNALLY WITHOUT

    JAILBREAKING.
  48. YOU HAVE TO GET A BIT MORE CREATIVE TO FIGURE

    OUT HOW THINGS WORK.
  49. BLAME CREDIT THIS GUY

  50. None
  51. STEP 1: RECORD SOME VIDEO FROM YOUR DEVICE

  52. MAVERICKS AND BELOW: IT'LL COST YA Use Reflector ($12.99) or

    AirServer (14.99) to AirPlay to your Mac
  53. YOSEMITE: FREE Record directly from your device with QuickTime

  54. [DEMO: RECORDING VIDEO WITH QUICKTIME]

  55. STEP 2: OPEN THAT VIDEO WITH QUICKTIME When you hit

    the info button, you'll get some useful...information!
  56. [DEMO: QUICKTIME SCRUBBING]

  57. SIDEBAR: EASING

  58. EASING IS ABOUT THE CURVE OF THE ANIMATION

  59. UNDERSTANDING EASING MAKES GETTING THE DETAILS OF A CONTROL RIGHT

    A LOT SIMPLER.
  60. [DEMO: EASE IN, EASE OUT]

  61. STEP 3: OPEN INDIVIDUAL FRAMES IN PREVIEW

  62. MEASURE IMAGES PIXEL BY PIXEL

  63. ZOOM WAAAAAAAY IN ON YOUR IMAGES

  64. [DEMO: PREVIEW MEASURING]

  65. STEP 4: START BUILDING AGAIN!

  66. [DEMO: DNS CASTRO SEGMENTED CONTROL]

  67. PUTTING IT TOGETHER: BUILDING BASED ON YOUR FINDINGS

  68. BUILD YOUR SAMPLE PROJECT IN ISOLATION.

  69. KEEP THE FILES FOR THE CONTROL ITSELF IN A SINGLE

    FOLDER.
  70. KEEP DISPLAY LOGIC INDEPENDENT

  71. TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST

    (DID I MENTION TEST?)
  72. COMPARE THE FEEL OF YOUR SAMPLE APP TO THE ORIGINAL

    APP
  73. NEXT STEPS: MAKE IT SHAREABLE

  74. Create a repo for your sample code.

  75. Make a CocoaPod!

  76. Submit it to CocoaControls

  77. OFFICIAL SUMMARY SLIDE™ ▸ View hierarchy debugging with built-in tools

    ▸ How to use Facebook Chisel to make that even faster ▸ How to use video to examine the contents of a control ▸ How to go tear apart a control so you can rebuild it yourself
  78. QUESTIONS?

  79. 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/
  80. 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
  81. PLUGS! ▸ http://justhum.com ▸ http://www.mobilemakers.co/ ▸ http://vokalinteractive.com/