iOS

Better Code: No time like the present to use Xcode storyboards

After all of the dust has settled, it seems that storyboards may offer developers a distinct advantage.

d_mvalenzuela_shipment_tracker_2.png
Nearly two years ago, Apple introduced a capability that would allow developers to visually create the interface, navigation, and program flow for an iOS app. Storyboards were first introduced in the October 2011 release of Xcode 4.2. As with many forward-thinking concepts, the adoption of storyboards by seasoned developers has been a slow process. Do storyboards help or hinder the development lifecycle? There are two camps as it relates to the advantages and usefulness of storyboards for developing the user interface of an iOS app. After all of the dust has settled, it seems that storyboards may offer developers a distinct advantage.

Welcome to Camp Storyboards-are-a-waste-of-time

The group of individuals that see no real value in Xcode storyboards is comprised mostly of seasoned developers with a high-level of experience designing a user interface with Interface Builder or by using code. Their adversion to Xcode storyboards stems from two valid points. First, it would take longer to learn a new approach than to continue creating user interfaces using the tried-and-true methods. Second, the storyboard interface cannot possibly support all of the capabilities of developing an interface using code. In other words, if you want to "dumb down" your apps, go ahead and use storyboards - right?

Top reasons to not use storyboards (Cons):

  • Project collaberation is nearly impossible.
  • Storyboard views are not reusable.
  • Storyboards are not git compatible.
  • Not always compatible with other display engines and third-party toolkits.

Welcome to Camp Storyboards-make-me-more-productive

Most everyone joining the iOS developer ranks post Xcode 4.2 is using storyboards for creating the user interface for an iOS app. The downside is that many developers never get an opportunity to fully appreciate capabilities that go beyond the limitations of a user interface created within storyboard. The upside, however, is that a developer can create prototypes of very complex iOS apps before writing a single line of code. Traditionally, the prototyping begins with napkin doodles and continues with the development of screens in Adobe Photoshop or other design application.

Top reasons to use storyboards (Pros):

  • Supports MVC development.
  • Easier to create prototypes.
  • Simple transition to multiple device support.
  • Visual display of entire interface and program flow.

Should you use storyboards?

Obviously, you should not do anything that would hinder your ability to deliver an iOS app within scope, on time, and under budget. Sometimes, however, it is necessary to accept the short-term challenges in anticipation of the long-term benefits. Learning Xcode storyboards is not difficult. In fact, there are several good tutorials for developing your first storyboard app - Google it.

The basics

To use storyboards in your iOS app, select the "Use Storyboards" option in the new project dialog (Figure A).

Figure A

a_gdean_xcode_storyboard.png

When the new project loads, a new file will appear in the project navigation pane (Figure B). Storyboard files have a .storyboard extension. Selecting the storyboard file in the project navigation pane opens the storyboard editor. The editor is where you design and layout the user interface, navigation, and program flow for your iOS app.

Figure B

b_gdean_xcode_storyboard.png

A storyboard is the visual representations of an iOS app's user interface. Specifically, a storyboard is comprised of scenes and the transitions between them. Using storyboard to layout every possible path through an app greatly reduces the amount of code required to develop a complex multi-screen app.

  • Scenes - All app screens are referred to as scenes. A scene corresponds to a single view controller and related views.
  • Segues - All segues manage the transition between scenes (Figure C).

Figure C

c_gdean_xcode_storyboard.png

Storyboards are the recommended approach for designing the user interface for an iOS app. Not only do storyboards allow a developer to prototype and prove the flow of an app, but also reduce the amount of code necessary to support complex multi-screen iOS apps. The most compelling reason to use storyboards, however, is to ensure compatibility with future releases of iOS.

Final thoughts

Anyone new to iOS development will most likely learn to use Xcode storyboards as part of the "best practices" training from Apple. Seasoned developers will be challenged with deciding the right time - if at all - to make the leap into storyboards. While new projects can begin with storyboards, legacy projects will need to be completely rewritten to support storyboards. Why should you consider converting to storyboards?

There are many depreciated methods in iOS 7. Many of these methods relate to the user interface. Borderless buttons, full-screen layout, and translucent bars are new to iOS 7. If a developer used code to create these elements and effects in legacy apps, he or she will need to find alternate methods to render and control these objects. There will be no shortage of new iOS devices in our future. Using Xcode storyboards to develop the user interface makes it easier to support multiple devices. In this particular case, best practices makes best sense.

Also read:


About

Gregory Dean is the CTO for the Wilen Group. He has spent the past 25 years in C-level positions setting the tone and direction of technology-driven services organizations. Gregory is constantly researching technologies and developing capabilities to...

1 comments
Mark W. Kaelin
Mark W. Kaelin moderator

Did you use storyboards for your last iOS project? Are you worried that you may regret not using them at some point in the future?