Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Ellen Shapiro

April 10, 2015
Tweet

More Decks by Ellen Shapiro

Other Decks in Technology

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 full-size slide

  2. PREFACE: WHO AM I?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. WHY REVERSE
    ENGINEER?

    View full-size slide

  7. YOU WANT TO
    USE IT YOURSELF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. WHEN YOU SEE SOMETHING
    AWESOME IN AN APP

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. TWO SITUATIONS
    I'LL BE COVERING:

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  19. CASE STUDY #1:
    DNSSWIPEABLETABLECELL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. STEP 1:
    STARE AT YOUR PHONE

    View full-size slide

  25. WHAT LOOKS LIKE THE VIEW HIERARCHY?

    View full-size slide

  26. IS THIS GESTURE A SWIPE OR A PAN?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. [DEMO: XCODE FUNTIMES]

    View full-size slide

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

    View full-size slide

  34. [DEMO: CHISEL IN ACTION]

    View full-size slide

  35. !: CHISEL IS FINICKY IN
    SWIFT

    View full-size slide

  36. STEP 3: START
    BUILDING

    View full-size slide

  37. [DEMO: DNS SWIPEABLE TABLE CELL]

    View full-size slide

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

    View full-size slide

  39. DID THEY OPEN SOURCE IT?
    NOPE.

    View full-size slide

  40. CASE STUDY #2:
    DNSCASTROSEGMENTEDCONTROL

    View full-size slide

  41. WHAT AM I
    STEALING
    REVERSE ENGINEERING?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. BLAME CREDIT THIS GUY

    View full-size slide

  46. STEP 1: RECORD SOME VIDEO
    FROM YOUR DEVICE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. [DEMO: RECORDING VIDEO WITH QUICKTIME]

    View full-size slide

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

    View full-size slide

  51. [DEMO: QUICKTIME SCRUBBING]

    View full-size slide

  52. SIDEBAR: EASING

    View full-size slide

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

    View full-size slide

  54. EASING IS ABOUT
    THE CURVE OF THE ANIMATION

    View full-size slide

  55. [DEMO: EASE IN, EASE OUT]

    View full-size slide

  56. STEP 3: OPEN INDIVIDUAL
    FRAMES IN PREVIEW

    View full-size slide

  57. MEASURE IMAGES
    PIXEL BY PIXEL

    View full-size slide

  58. ZOOM
    WAAAAAAAY
    IN ON YOUR IMAGES

    View full-size slide

  59. [DEMO: PREVIEW MEASURING]

    View full-size slide

  60. STEP 4: START
    BUILDING AGAIN!

    View full-size slide

  61. [DEMO: DNS CASTRO SEGMENTED CONTROL]

    View full-size slide

  62. PUTTING IT TOGETHER:
    TIPS FOR BUILDING

    View full-size slide

  63. BUILD YOUR SAMPLE PROJECT
    IN ISOLATION.

    View full-size slide

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

    View full-size slide

  65. KEEP DISPLAY LOGIC
    INDEPENDENT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. NEXT STEPS: MAKE IT
    SHAREABLE

    View full-size slide

  69. Create a repo for your sample code.

    View full-size slide

  70. Make a CocoaPod!

    View full-size slide

  71. Submit it to CocoaControls

    View full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

  74. 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 full-size slide

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

    View full-size slide