Reverse Engineering UI For Fun And Profit (CocoaConf Atlanta, December 2014)

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.

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

Transcript

1. REVERSE ENGINEERING USER INTERFACE FOR FUN AND PROFIT BY ELLEN SHAPIRO COCOACONF ATLANTA 2014 @DESIGNATEDNERD | DESIGNATEDNERD.COM | VOKALINTERACTIVE.COM | JUSTHUM.COM
2. PREFACE: WHO AM I?
3. VOKAL INTERACTIVE
4. MOBILE MAKERS
5. HUM
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?
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
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/