Storyboards vs. XIBs vs Code

We've compared different methods of creating a layout on an iOS project.

Presented at the NS Istanbul Meetup on June 1st, 2014.

Created with Deckset. http://www.decksetapp.com

Transcript

1. Storyboards vs. Interface Builder vs. Code
2. Different Methods
3. Storyboards Has more than one view and manages transitions
4. Supported by Apple
5. Interface Builder
6. Interface Builder Circa 1993
7. Code
8. Storyboards
9. One application, one storyboard
10. One application, one storyboard
11. Storyboards
12. Storyboards
13. BREAK INTO PIECES » Authentication / Registration
14. BREAK INTO PIECES » Authentication / Registration » Multi-step Order Forms
15. BREAK INTO PIECES » Authentication / Registration » Multi-step Order Forms » Wizards, Tutorials, etc.
16. BREAK INTO PIECES » Authentication / Registration » Multi-step Order Forms » Wizards, Tutorials, etc. » Master-Detail
17. BREAK INTO PIECES: WHY? <viewControllerLayoutGuide type="top" id="cIm-e0- J51"/> <viewControllerLayoutGuide type="bottom" id="a0L-h9- sNL"/>
18. BREAK INTO PIECES: WHY?
19. CONFLICT
20. WHEN TO USE ADVANTAGES » Easier Transitions
21. WHEN TO USE ADVANTAGES » Easier Transitions » No alloc] init]
22. WHEN TO USE ADVANTAGES » Easier Transitions » No alloc] init] » Visual Tool
23. WHEN TO USE ADVANTAGES » Easier Transitions » No alloc] init] » Visual Tool » Static Table Views
24. WHEN TO USE ADVANTAGES » Easier Transitions » No alloc] init] » Visual Tool » Static Table Views » More than one Cell Templates
25. WHEN TO USE ADVANTAGES » Easier Transitions » No alloc] init] » Visual Tool » Static Table Views » More than one Cell Templates » Less file count
26. WHEN NOT TO USE » Complex custom UI » UI with too many clear backgrounds » Already implemented with code or XIBs
27. Storyboard Pros +
28. Storyboard Pros + PERFORMANCE » Only the initial view is allocated
29. Storyboard Pros + PROTOTYPING » Can be used to quickly create prototypes
30. Storyboard Pros + VISUAL » For those who are better with visuals
31. Storyboard Pros + AUTO-LAYOUT » We'll come back to this
32. I should use storyboards then.
33. Storyboard Cons - REUSABILITY
34. Storyboard Cons - DATA FLOW
35. Storyboard Cons - DATA FLOW » prepareForSegue:
36. Storyboard Cons - CONFLICT
37. Interface Builder
38. Interface Builder Old.
39. Interface Builder Old. But NSString is old too.
40. Interface Builder Multiple Files for Single views or Single Files for Multiple related views
41. Interface Builder Every view has its own XIB file.
42. Interface Builder Every view has its own XIB file. “After all, that's what Object-Oriented programming stands for.” -- Some programmer dude
43. WHEN TO USE » Modal Views
44. WHEN TO USE » Modal Views » Login/Register screens
45. WHEN TO USE » Modal Views » Login/Register screens » Reusable Views (templates, table cells)
46. WHEN TO USE » Modal Views » Login/Register screens » Reusable Views (templates, table cells) » Everywhere basically
47. Interface Builder Pros + Reusability » Prepare once, use everywhere
48. Interface Builder Pros + Visual Tool » See what you are making
49. Interface Builder Pros + Auto-Layout
50. Interface Builder Cons - Localization » It's not easy for the unexperienced
51. Code
52. Code » When IB and Storyboards aren't enough
53. Code » Understanding what's under the hood.
54. Code » Use coding only for a project at least once.
55. Code Pros + Performance
56. Code Pros + Reusability » Good for small changes on similar views » Open Source
57. Code Cons - Donkey Corpse amount of Code
58. Code Cons - Seeing Results Ain't Easy » Iterate/Run/Debug/Iterate Cycle
59. Code Cons - Not Imminent » Changes to the layout can't be applied that fast.
60. Code Cons - Anti-Prototyping » Say farewell to your loved ones if you are trying this.
61. Code Cons - Auto-Layout [NSLayoutConstraint constraintWithItem:self.button1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.button2 attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-12.0];
62. The way I work
63. THANKS @seyfoyun - @wearethreadco