When you look at a wireframe, what do you see? ViewControllers, navigation bars, and tableviews? As developers, we are great at figuring out what to put on the screen, what to animate, and how to put those pieces together. What we don't realize, in this early stage of app development, is that knowing your APIs here is crucial. How many times have we gone to implement a feature, only to find a half-baked API, or one that makes us hardcode half the information? The wireframe stage is the point to match screens with API calls, because this is where the app is most flexible. In this session we will walk through how to match wireframes to their corresponding APIs, as well as identify and solve the problems they create.

1. @MicheleTitolo
API Jones
and the
Wireframes of Doom

7. APIs & Wireframes

8. APIs

9. Wireframes

10. Not mockups

11. Wireframes

13. What not to do

14. Hey, look! A Wireframe!

16. Start developing!

17. Models

18. //
// Photo.h
//
@interface Photo : NSObject
@property (strong, nonatomic) User* user;
@property (strong, nonatomic) Location* location;
@property (strong, nonatomic) NSNumber* photoID;
@property (strong, nonatomic) NSDate* timestamp;
@property (strong, nonatomic) NSSet* comments;
@property (strong, nonatomic) NSURL* photoURL;
@end

19. //
// User.h
//
@interface User : NSObject
@property (copy, nonatomic) NSString* username;
@property (strong, nonatomic) NSNumber* userID;
@property (strong, nonatomic) NSURL* userPhotoURL;
@property (strong, nonatomic) NSSet* photos;
@property (strong, nonatomic) NSSet* comments;
@end

20. //
// Comment.h
//
@interface Comment : NSObject
@property (strong, nonatomic) User* user;
@property (strong, nonatomic) Photo* photo;
@property (strong, nonatomic) NSDate* timestamp;
@property (copy, nonatomic) NSString* text;
@end

21. PhotoCell

22. //
// PhotoCell.h
//
@interface PhotoCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView* userImageView;
@property (weak, nonatomic) IBOutlet UIImageView* photoImageView;
@property (weak, nonatomic) IBOutlet UILabel* userNameLabel;
@property (weak, nonatomic) IBOutlet UILabel* dateLabel;
@property (weak, nonatomic) IBOutlet UILabel* locationLabel;
@property (weak, nonatomic) IBOutlet UILabel* usersLovedLabel;
@property (weak, nonatomic) IBOutlet UILabel* userCommentLabel;
@property (strong, nonatomic) Photo* cellPhoto;
- (void)setupWithPhoto:(Photo*)photo;
@end

23. //
// PhotoCell.m
//
@implementation PhotoCell
- (void)setupWithPhoto:(Photo *)photo
{
self.cellPhoto = photo;
[self.userImageView setImageWithURL:photo.user.userPhotoURL];
[self.photoImageView setImageWithURL:photo.photoURL];
self.userNameLabel.text = photo.user.username;
// etc.
}
@end

24. //
// PhotoViewController.m
//
@implementation PhotoViewController
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath
{
PhotoCell* cell = [tableView dequeueReusableCellWithIdentifier:s_cellID
forIndexPath:indexPath];
Photo* photo = [self.photos objectAtIndex:indexPath.row];
[cell setupWithPhoto:photo];
return cell;
}
@end

25. ...several hours to several days later...

26. Build and Run

28. Time === Money

29. The right way

30. Hey, look! A Wireframe!

32. Annotations

33. photo posted date
photo
users who love photo
user picture, name
photo comments
photo location

34. photo posted date
photo
users who love photo
user picture, name
photo comments
photo location
tapping goes to user
profile
tapping goes to user
profile
tapping goes to location
on map
tapping user goes to
user profile

35. Write it down.

36. Photo
• location (lat/log and name)
• timestamp
• image URL
• user (name, photo, and id)
• comments (text, user name, and user id)
• users who love (name and id)

37. JSON

38. {
! "meta": {
! ! "self":"photos",
! ! "page":1,
! ! "offset":0,
! ! "total_items":282
! },
! "photos": [
{
"photo_url":"http://p3.amazons3.com/apijones/photos/124hh3b99d77dsnn.png",
"created_at":"2013-09-01T18:16:54Z",
"identifier":24435,
"user": {
"username":"karlthefog",
"identifier":6332
},
"loves": [ 5622, 4402, 9773 ],
"comments": [
{
"text":"Sorry I'm not home right now",
"user_id":24254,
"identifier":122887,
"timestamp":"2013-09-01T18:36:02Z"
},
{
"text":"I'm floating into spiderwebs",
"user_id":6332,
"identifier":122921,
"timestamp":"2013-09-01T18:42:22Z"
}
]
}
]
}

39. Back to the list

40. Photo
• location (lat/log and name)
• timestamp
• image URL
• user (name, photo, and id)
• comments (text, user name, and user id)
• users who love (name and id)(name and id)

41. {
! "meta": {
! ! "self":"photos",
! ! "page":1,
! ! "offset":0,
! ! "total_items":282
! },
! "photos": [
{
"photo_url":"http://p3.amazons3.com/apijones/photos/124hh3b99d77dsnn.png",
"created_at":"2013-09-01T18:16:54Z",
"identifier":24435,
"user": {
"username":"karlthefog",
"identifier":6332
},
"loves": [ 5622, 4402, 9773 ],
"comments": [
{
"text":"Sorry I'm not home right now",
"user_id":24254,
"identifier":122887,
"timestamp":"2013-09-01T18:36:02Z"
},
{
"text":"I'm floating into spiderwebs",
"user_id":6332,
"identifier":122921,
"timestamp":"2013-09-01T18:42:22Z"
}
]
}
]
}
"loves": [ 5622, 4402, 9732 ],

42. Congrats!
You found a problem.

43. Make a note,
then move along

44. Do this for every screen.

45. Measure twice, cut once

48. Measure twice, cut once

49. Communicate!

50. Work...uninterrupted

51. Tips & Tricks

52. Design

53. Pull To Refresh

54. To remove all data, or not to
remove all data, that is the
question

55. Storage

56. Don’t overwrite data with nil

57. //
// NSMutableDictionary+NilAdditions.m
//
@implementation NSMutableDictionary (NilAdditions)
- (void)setNotNilObject:(id)anObject forKey:(id<NSCopying>)key
{
if (anObject) {
[self setObject:anObject forKey:key];
}
}
@end

58. Infinite Scroll

59. Pagination

60. Remember your place

61. Drill Down

62. REST

63. GET /resources
GET /resources/:id
GET /resources/:id/nested_resources

64. GET /photos
GET /photos/55
GET /photos/55/comments

65. REST has it’s problems, too

66. APIs

67. Find Patterns

68. Meta information

69. Structures

70. Inconsistencies

71. Missing or Bad Data

72. Getting the Data

73. Batching

74. GET /photos/55
GET /photos/55/comments

75. Make sure you are actually
loading data

76. “comment_count”
“total_items”

77. Background Processing

78. Blocking the main thread
is bad

79. Process & construct where
it won’t affect performance

80. Caching

81. Core Data

82. NSCache

83. Documentation

84. Agile

85. This can be done

86. More communication,
faster turnaround

87. Define “iteration”

88. In Summary

89. Plan Ahead

90. Work smart, not hard

93. Why’d it have to be snakes?

95. Thank you!
@MicheleTitolo