Pro Yearly is on sale from $80 to $50! »

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

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro
PRO

April 10, 2015
Tweet

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
  2. PREFACE: WHO AM I?

  3. None
  4. None
  5. None
  6. WHAT DO I MEAN BY "REVERSE ENGINEER"?

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

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

  9. WHY REVERSE ENGINEER?

  10. YOU WANT TO USE IT YOURSELF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    TO DELETE .
  27. iOS 7... !

  28. iOS 8... !

  29. STEP 1: STARE AT YOUR PHONE

  30. WHAT LOOKS LIKE THE VIEW HIERARCHY?

  31. IS THIS GESTURE A SWIPE OR A PAN?

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

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

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

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

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

  37. [DEMO: XCODE FUNTIMES]

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

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

  40. !: CHISEL IS FINICKY IN SWIFT

  41. STEP 3: START BUILDING

  42. [DEMO: DNS SWIPEABLE TABLE CELL]

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

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

  45. CASE STUDY #2: DNSCASTROSEGMENTEDCONTROL

  46. WHAT AM I STEALING REVERSE ENGINEERING?

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

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

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

    OUT HOW THINGS WORK.
  52. BLAME CREDIT THIS GUY

  53. None
  54. STEP 1: RECORD SOME VIDEO FROM YOUR DEVICE

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

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

  57. [DEMO: RECORDING VIDEO WITH QUICKTIME]

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

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

  60. SIDEBAR: EASING

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

    A LOT SIMPLER.
  62. EASING IS ABOUT THE CURVE OF THE ANIMATION

  63. [DEMO: EASE IN, EASE OUT]

  64. STEP 3: OPEN INDIVIDUAL FRAMES IN PREVIEW

  65. MEASURE IMAGES PIXEL BY PIXEL

  66. ZOOM WAAAAAAAY IN ON YOUR IMAGES

  67. [DEMO: PREVIEW MEASURING]

  68. STEP 4: START BUILDING AGAIN!

  69. [DEMO: DNS CASTRO SEGMENTED CONTROL]

  70. PUTTING IT TOGETHER: TIPS FOR BUILDING

  71. BUILD YOUR SAMPLE PROJECT IN ISOLATION.

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

    FOLDER.
  73. KEEP DISPLAY LOGIC INDEPENDENT

  74. TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST

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

    APP
  76. NEXT STEPS: MAKE IT SHAREABLE

  77. Create a repo for your sample code.

  78. Make a CocoaPod!

  79. Submit it to CocoaControls

  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
  81. QUESTIONS?

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