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 You can access all the content and Deckset-ready Markdown file at: https://dl.dropboxusercontent.com/u/1497273/storyboards-nsistanbul.zip

1. Storyboardsvs.
Interface Buildervs.
Code

2. DifferentMethods

3. StoryboardsHas morethan oneviewand managestransitions

4. Supported byApple

5. Interface Builder

6. Interface Builder
Circa1993

7. Code

8. Storyboards

9. Oneapplication, one
storyboard

10. Oneapplication, 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. WHENTO USE
ADVANTAGES
» Easier Transitions

21. WHENTO USE
ADVANTAGES
» Easier Transitions
» No alloc] init]

22. WHENTO USE
ADVANTAGES
» Easier Transitions
» No alloc] init]
» Visual Tool

23. WHENTO USE
ADVANTAGES
» Easier Transitions
» No alloc] init]
» Visual Tool
» Static Table Views

24. WHENTO USE
ADVANTAGES
» Easier Transitions
» No alloc] init]
» Visual Tool
» Static Table Views
» More than one Cell Templates

25. WHENTO USE
ADVANTAGES
» Easier Transitions
» No alloc] init]
» Visual Tool
» Static Table Views
» More than one Cell Templates
» Less file count

26. WHEN NOTTO 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 storyboardsthen.

33. Storyboard Cons -
REUSABILITY

34. Storyboard Cons -
DATAFLOW

35. Storyboard Cons -
DATAFLOW
» prepareForSegue:

36. Storyboard Cons -
CONFLICT

37. Interface Builder

38. Interface Builder
Old.

39. Interface Builder
Old. ButNSString is oldtoo.

40. Interface Builder
MultipleFilesforSingleviewsorSingleFilesforMultiple
relatedviews

41. Interface Builder
EveryviewhasitsownXIBfile.

42. Interface Builder
EveryviewhasitsownXIBfile.
“After all, that's what Object-Oriented programming
stands for.”
-- Some programmer dude

43. WHENTO USE
» Modal Views

44. WHENTO USE
» Modal Views
» Login/Register screens

45. WHENTO USE
» Modal Views
» Login/Register screens
» Reusable Views (templates, table cells)

46. WHENTO 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 +
VisualTool
» 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 -
DonkeyCorpseamountofCode

58. Code Cons -
SeeingResultsAin'tEasy
» Iterate/Run/Debug/Iterate Cycle

59. Code Cons -
NotImminent
» 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. ThewayIwork

63. THANKS
@seyfoyun - @wearethreadco