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