iOS UI Design Tutorial: Storyboards vs. NIBs Vs - Code - Toptal
iOS UI Design Tutorial: Storyboards vs. NIBs Vs - Code - Toptal
APPLY AS A DEVELOPER
LOGIN
SUBSCRIBE
Share
Tweet
10
66
84
TRENDING ARTICLES
Why I Decided To
Embrace Laravel
about 23 hours ago
Developer's Dream
Keyboard
about 1 month ago
Using Logstash to
Streamline Email
Notifications
2 days ago
RELEVANT TECHNOLOGIES
Front-end
Mobile
Objective-C
UI
Xcode
iOS
TOPTAL AUTHORS
Nikolay Derkach
Software engineer
Ryan J. Peterson
Software Engineer
L Anh Qun
Software Engineer
Ivan Vasilev
Java Developer
Mahmud Ridwan
iOS Storyboards
A classic beginners mistake is to
create one massive project-wide
iOS Storyboard. I too made this
mistake when I first started working
with Storyboards (probably
because its a tempting route to
take).
A classic beginners
mistake is to create one
massive project-wide
Storyboard. A Storyboard
is a board with a story to
tell. It shouldn't be used
to mix unrelated stories
into one big volume.
As its name implies, a Storyboard is
Pro: Performance
Intuitively, you can assume that
when a Storyboard is loaded, all of
its view controllers are instantiated
immediately. Fortunately, this is just
an abstraction and not true of the
Pro: Prototypes
Storyboards simplify the
prototyping and mocking up of user
interfaces and flow. Actually, a
complete working prototype
application with views and
navigation can be easily
implemented using Storyboards
and just a few lines of code.
Con: Reusability
When it comes to moving or
copying, iOS Storyboards are
poorly positioned. A Storyboard
must be moved along with all of its
dependent view controllers. In
other words, a single view
controller cannot be individually
extracted and reused elsewhere as
a single independent entity; its
dependent on the rest of the
Storyboard to function.
NIBs
be:
Modal views
Simple login and registration
views
Settings
Popup windows
Reusable view templates
Reusable table cell templates
Meanwhile
Pro: Reusability
NIBs come in handy when the
same layout is shared across
multiple classes.
As a simple use case, a view
template containing a username
and a password text field could be
implemented with the hypothetical
TTLoginView and TTSignupView
views, both of which could
originate from the same NIB. The
TTLoginView would have to hide
the password field, and both would
have to specify corresponding
static labels (such as Enter your
username vs Enter your
password), but the labels would
efficient code.
So, mastering the coding of iOS
user interfaces gives you more
control over and greater awareness
of how these pieces fit together,
which raises your upper-bound as a
developer.
Con: Prototyping
Its difficult to figure out how a
layout will look until you seen it in
action. Further, you cant visually
position views and controls, so
translating layout specs into a
Con: Refactoring
Refactoring code that was written
long ago or by someone else also
becomes much more complicated:
when elements are being
positioned and animated with
custom methods and magic
numbers, debugging sessions can
become arduous.
Pro: Performance
In terms of performance,
Storyboards and NIBs are subject
to the overhead of loading and
parsing; and in the end, theyre
indirectly translated into code.
Needless to say, this doesnt
happen with code-made UIs.
Pro: Reusability
Any view implemented
programmatically can be designed
in a reusable fashion. Lets see a
few use cases:
Two or more views share a
common behavior, but they are
Wrapping Up
As examined in this turtorial,
Storyboards add a noticeable
simplification to iOS UI design and
visual flow. They also eliminate
Comments
Community
Login
Share Favorite
Sort by Best
10 months ago
Reply Share
Reply Share
dbjdbj
10 months ago
Reply Share
Charlie Marsh
Mod
> dbjdbj
10 months ago
Reply
Share
dbjdbj
10 months ago
kgelner
Reply Share
6 days ago
@kgelner,
I think there are few
misunderstanding here
between your comment
and post.
1.) This article is written
before iOS 8 SDK which
introduce Size Classes.
However, size classes are
still availble trough
Storyboards, XIB and
even programatically.
2.) Also part of iOS 8
SDK. If app uses native
SplitViewController
design, then definitelly
see more
Reply Share
Gautam Lakum
2 months ago
Min Kim
Reply Share
7 months ago
5 days ago
Guest
Reply Share
10 months ago
Reply Share
Ian Donaldson
10 months ago
Reply Share
Reply
Share
simple refactors in
extreme cases. In UI
builder changes are only
easy when Ui builder
designers made them
easy.
Reply Share
WHAT'S THIS?
ALSO ON TOPTAL
JavaScript Video
Tutorial - The
Behavior
1
comment of
a month
ago
"This" in
Visar Uruqi
JavaScript
Managing the
View State with
3 comments 2 months
React
ago
coreyitguy A
thnx for
sharing this,
very well
Reverse
explained
great
walkthrough of
React. I've
Building
HTML5
reduced
jQuery
Engineering The canvas
basedto
spaghetti
Couchsurfing.com
8
comments a month
video
6
comments
game
19
days
simple,
easyago
ago
API
to-read code
Sergey
Ezequiel
using De
Tolmachev
simone
Nice article!
Awesome
I've never
thanks for
heard about
share!
the smali
debugging, it's
interesting
Subscribe
solution!
At Toptal, we
connect the best
developers all
Join the
Toptal
community.
TRENDING ON BLOG
HIRE A DEVELOPER
OR
APPLY AS A DEVELOPER
NAVIGATION
CONTACT
SOCIAL
Why I Decided To
Embrace Laravel
Why
Apply for
work
What
Become
a partner
Google+
Team
Send us
an email
Dribbble
Using Logstash to
Streamline Email
Notifications
Shazam It! Music
Processing,
Fingerprinting, and
Recognition
Predicting Likes: Inside A
Simple Recommendation
Engine
How
Clients
Community
Blog
Call
888.604.3188
Resources
Videos
Client reviews
Developer reviews
Contact
FAQ
Privacy Policy,
Twitter
GitHub