Top Banner
Storyboards vs. Interface Builder vs. Code
63

Storyboards vs XIBs vs Code

Aug 23, 2014

Download

Software

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
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Storyboards vs XIBs vs Code

Storyboards vs. Interface Builder vs. Code

Page 2: Storyboards vs XIBs vs Code

Different Methods

Page 3: Storyboards vs XIBs vs Code

StoryboardsHas more than one view and manages transitions

Page 4: Storyboards vs XIBs vs Code

Supported by Apple

Page 5: Storyboards vs XIBs vs Code

Interface Builder

Page 6: Storyboards vs XIBs vs Code

Interface BuilderCirca 1993

Page 7: Storyboards vs XIBs vs Code

Code

Page 8: Storyboards vs XIBs vs Code

Storyboards

Page 9: Storyboards vs XIBs vs Code

One application, one storyboard

Page 10: Storyboards vs XIBs vs Code

One application, one storyboard

Page 11: Storyboards vs XIBs vs Code

Storyboards

Page 12: Storyboards vs XIBs vs Code

Storyboards

Page 13: Storyboards vs XIBs vs Code

BREAK INTO PIECES» Authentication / Registration

Page 14: Storyboards vs XIBs vs Code

BREAK INTO PIECES» Authentication / Registration

» Multi-step Order Forms

Page 15: Storyboards vs XIBs vs Code

BREAK INTO PIECES» Authentication / Registration

» Multi-step Order Forms

» Wizards, Tutorials, etc.

Page 16: Storyboards vs XIBs vs Code

BREAK INTO PIECES» Authentication / Registration

» Multi-step Order Forms

» Wizards, Tutorials, etc.

» Master-Detail

Page 17: Storyboards vs XIBs vs Code

BREAK INTO PIECES: WHY?<viewControllerLayoutGuide type="top" id="cIm-e0-J51"/><viewControllerLayoutGuide type="bottom" id="a0L-h9-sNL"/>

Page 18: Storyboards vs XIBs vs Code

BREAK INTO PIECES: WHY?

Page 19: Storyboards vs XIBs vs Code

CONFLICT

Page 20: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

Page 21: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

» No alloc] init]

Page 22: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

» No alloc] init]

» Visual Tool

Page 23: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

» No alloc] init]

» Visual Tool

» Static Table Views

Page 24: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

» No alloc] init]

» Visual Tool

» Static Table Views

» More than one Cell Templates

Page 25: Storyboards vs XIBs vs Code

WHEN TO USEADVANTAGES

» Easier Transitions

» No alloc] init]

» Visual Tool

» Static Table Views

» More than one Cell Templates

» Less file count

Page 26: Storyboards vs XIBs vs Code

WHEN NOT TO USE» Complex custom UI

» UI with too many clear backgrounds

» Already implemented with code or XIBs

Page 27: Storyboards vs XIBs vs Code

Storyboard Pros +

Page 28: Storyboards vs XIBs vs Code

Storyboard Pros +

PERFORMANCE» Only the initial view is allocated

Page 29: Storyboards vs XIBs vs Code

Storyboard Pros +

PROTOTYPING» Can be used to quickly create prototypes

Page 30: Storyboards vs XIBs vs Code

Storyboard Pros +

VISUAL» For those who are better with visuals

Page 31: Storyboards vs XIBs vs Code

Storyboard Pros +

AUTO-LAYOUT» We'll come back to this

Page 32: Storyboards vs XIBs vs Code

I should use storyboards then.

Page 33: Storyboards vs XIBs vs Code

Storyboard Cons -REUSABILITY

Page 34: Storyboards vs XIBs vs Code

Storyboard Cons -DATA FLOW

Page 35: Storyboards vs XIBs vs Code

Storyboard Cons -

DATA FLOW» prepareForSegue:

Page 36: Storyboards vs XIBs vs Code

Storyboard Cons -CONFLICT

Page 37: Storyboards vs XIBs vs Code

Interface Builder

Page 38: Storyboards vs XIBs vs Code

Interface BuilderOld.

Page 39: Storyboards vs XIBs vs Code

Interface BuilderOld. But NSString is old too.

Page 40: Storyboards vs XIBs vs Code

Interface BuilderMultiple Files for Single views or Single Files for Multiple related views

Page 41: Storyboards vs XIBs vs Code

Interface BuilderEvery view has its own XIB file.

Page 42: Storyboards vs XIBs vs Code

Interface BuilderEvery view has its own XIB file.

“After all, that's what Object-Oriented programming stands for.”

-- Some programmer dude

Page 43: Storyboards vs XIBs vs Code

WHEN TO USE» Modal Views

Page 44: Storyboards vs XIBs vs Code

WHEN TO USE» Modal Views

» Login/Register screens

Page 45: Storyboards vs XIBs vs Code

WHEN TO USE» Modal Views

» Login/Register screens

» Reusable Views (templates, table cells)

Page 46: Storyboards vs XIBs vs Code

WHEN TO USE» Modal Views

» Login/Register screens

» Reusable Views (templates, table cells)

» Everywhere basically

Page 47: Storyboards vs XIBs vs Code

Interface Builder Pros +

Reusability» Prepare once, use everywhere

Page 48: Storyboards vs XIBs vs Code

Interface Builder Pros +

Visual Tool» See what you are making

Page 49: Storyboards vs XIBs vs Code

Interface Builder Pros +Auto-Layout

Page 50: Storyboards vs XIBs vs Code

Interface Builder Cons -

Localization» It's not easy for the unexperienced

Page 51: Storyboards vs XIBs vs Code

Code

Page 52: Storyboards vs XIBs vs Code

Code» When IB and Storyboards aren't enough

Page 53: Storyboards vs XIBs vs Code

Code» Understanding what's under the hood.

Page 54: Storyboards vs XIBs vs Code

Code» Use coding only for a project at least once.

Page 55: Storyboards vs XIBs vs Code

Code Pros +Performance

Page 56: Storyboards vs XIBs vs Code

Code Pros +

Reusability» Good for small changes on similar views

» Open Source

Page 57: Storyboards vs XIBs vs Code

Code Cons -Donkey Corpse amount of Code

Page 58: Storyboards vs XIBs vs Code

Code Cons -

Seeing Results Ain't Easy» Iterate/Run/Debug/Iterate Cycle

Page 59: Storyboards vs XIBs vs Code

Code Cons -

Not Imminent» Changes to the layout can't be applied that fast.

Page 60: Storyboards vs XIBs vs Code

Code Cons -

Anti-Prototyping» Say farewell to your loved ones if you are trying

this.

Page 61: Storyboards vs XIBs vs Code

Code Cons -

Auto-Layout[NSLayoutConstraint constraintWithItem:self.button1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.button2 attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-12.0];

Page 62: Storyboards vs XIBs vs Code

The way I work

Page 63: Storyboards vs XIBs vs Code

THANKS@seyfoyun - @wearethreadco