Reverse Engineering UI For Fun And Profit (CocoaConf Boston, November 2014)

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

A couple 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.
- The easing example is here: https://github.com/designatednerd/EasingExample
- 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 BOSTON 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. IS THIS GESTURE A SWIPE OR A PAN?
28. WHAT LOOKS LIKE THE VIEW HIERARCHY?
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/
80. LIBRARIES! ▸ https://github.com/designatednerd/DNSSwipeableTableCell ▸ https://github.com/designatednerd/DNSCastroSegmentedControl (both libraries also available via CocoaPods)
81. PLUGS! ▸ http://justhum.com ▸ http://www.mobilemakers.co/ ▸ http://vokalinteractive.com/